0

i'm having a issue with the header: i'm using this jquery that transform the position of the header from relative to fixed only when you scroll up. Work perfectly in firefox, but is safari it has a problem. This is the code, thank you in advance!

$(window).scroll(
    {
        previousTop: 0
    }, 
    function () {
    var currentTop = $(window).scrollTop();
    if (currentTop < this.previousTop) {
        $(".header").slideDown("fast");
    } else {
        $(".header").slideUp("fast");
    }
    this.previousTop = currentTop;
});
.header {
    position: fixed;
    top: 0px;
    width:100%;
    height: 50px;
    border: 1px dotted blue;
    background-color: #3498db;
}

.header p {
    color:white;
    padding-left:5%;
}

.yolo {
    margin-top: 100px;
    width: 100%;
    height:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
<div class="header"><p>Contenuto Header</p></div>
<div class="yolo">
    <h1>Lorem Ipsum </h1>
    <p>Donec ipsum libero, pellentesque ut accumsan sit amet, porta vitae velit. Aenean id ante et ante congue interdum vitae ac nunc. Maecenas porta aliquam metus ac convallis. Morbi molestie posuere pulvinar. Curabitur non ligula ipsum, at laoreet ipsum. Aliquam nec dolor luctus massa eleifend interdum. Nunc sagittis, nulla eu hendrerit hendrerit, ante velit posuere turpis, in tincidunt odio magna vel neque. Sed lobortis neque eget tortor porta mattis. Vestibulum vulputate, nisi vel tempor tristique, nibh nisl posuere est, vitae ullamcorper ipsum nibh in ligula. Morbi in augue neque.Donec ipsum libero, pellentesque ut accumsan sit amet, porta vitae velit. Aenean id ante et ante congue interdum vitae ac nunc. Maecenas porta aliquam metus ac convallis. Morbi molestie posuere pulvinar. Curabitur non ligula ipsum, at laoreet ipsum. Aliquam nec dolor luctus massa eleifend interdum. Nunc sagittis, nulla eu hendrerit hendrerit, ante velit posuere turpis, in tincidunt odio magna vel neque. Sed lobortis neque eget tortor porta mattis. Vestibulum vulputate, nisi vel tempor tristique, nibh nisl posuere est, vitae ullamcorper ipsum nibh in ligula. Morbi in augue neque.</p>
    <h1>Lorem</h1>
    <p>Donec ipsum libero, pellentesque ut accumsan sit amet, porta vitae velit. Aenean id ante et ante congue interdum vitae ac nunc. Maecenas porta aliquam metus ac convallis. Morbi molestie posuere pulvinar. Curabitur non ligula ipsum, at laoreet ipsum. Aliquam nec dolor luctus massa eleifend interdum. Nunc sagittis, nulla eu hendrerit hendrerit, ante velit posuere turpis, in tincidunt odio magna vel neque. Sed lobortis neque eget tortor porta mattis. Vestibulum vulputate, nisi vel tempor tristique, nibh nisl posuere est, vitae ullamcorper ipsum nibh in ligula. Morbi in augue neque.Donec ipsum libero, pellentesque ut accumsan sit amet, porta vitae velit. Aenean id ante et ante congue interdum vitae ac nunc. Maecenas porta aliquam metus ac convallis. Morbi molestie posuere pulvinar. Curabitur non ligula ipsum, at laoreet ipsum. Aliquam nec dolor luctus massa eleifend interdum. Nunc sagittis, nulla eu hendrerit hendrerit, ante velit posuere turpis, in tincidunt odio magna vel neque. Sed lobortis neque eget tortor porta mattis. Vestibulum vulputate, nisi vel tempor tristique, nibh nisl posuere est, vitae ullamcorper ipsum nibh in ligula. Morbi in augue neque.</p>
    
    <h1>Lorem Ipsum </h1>
    <p>Donec ipsum libero, pellentesque ut accumsan sit amet, porta vitae velit. Aenean id ante et ante congue interdum vitae ac nunc. Maecenas porta aliquam metus ac convallis. Morbi molestie posuere pulvinar. Curabitur non ligula ipsum, at laoreet ipsum. Aliquam nec dolor luctus massa eleifend interdum. Nunc sagittis, nulla eu hendrerit hendrerit, ante velit posuere turpis, in tincidunt odio magna vel neque. Sed lobortis neque eget tortor porta mattis. Vestibulum vulputate, nisi vel tempor tristique, nibh nisl posuere est, vitae ullamcorper ipsum nibh in ligula. Morbi in augue neque.Donec ipsum libero, pellentesque ut accumsan sit amet, porta vitae velit. Aenean id ante et ante congue interdum vitae ac nunc. Maecenas porta aliquam metus ac convallis. Morbi molestie posuere pulvinar. Curabitur non ligula ipsum, at laoreet ipsum. Aliquam nec dolor luctus massa eleifend interdum. Nunc sagittis, nulla eu hendrerit hendrerit, ante velit posuere turpis, in tincidunt odio magna vel neque. Sed lobortis neque eget tortor porta mattis. Vestibulum vulputate, nisi vel tempor tristique, nibh nisl posuere est, vitae ullamcorper ipsum nibh in ligula. Morbi in augue neque.</p>
        
</div>
</body>
whites
  • 25
  • 4
  • When you say it has a problem in Safari, what is the nature of the problem? Can you describe it? – Kolban Oct 30 '14 at 20:22
  • Basicly when i scroll to the bottom of the page everything works fine, but when i scroll back to the top the header disappears – whites Nov 01 '14 at 11:43

0 Answers0