Question

我遇到标题问题：我正在使用这个jquery，只有当你向上滚动时才会将标题的位置从相对位置转换为固定位置。在firefox中完美地工作，但是它有一个问题。这是代码，提前谢谢！

＆＃13;

$(window).scroll(
    {
        previousTop: 0
    }, 
    function () {
    var currentTop = $(window).scrollTop();
    if (currentTop < this.previousTop) {
        $(".header").slideDown("fast");
    } else {
        $(".header").slideUp("fast");
    }
    this.previousTop = currentTop;
});

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

滚动时JQuery修复标题问题

0 个答案: