Question

我发现了很多信息。在使用jQuery滚动时更改标题，并尝试调整一些以使它们符合我的需要。 Scolling down工作正常，但向上滚动什么都不做。有任何想法吗？这是我到目前为止所做的：

HTML / CSS：

<header id="pictogram">
    <ul id="nav-main">
        <li><a href="#"><span>A</span><img src="A.jpg"></a></li>
        <li><a href="#"><span>B</span><img src="B.jpg"></a></li>
        <li><a href="#"><span>C</span><img src="C.jpg"></a></li>
        <li><a href="#"><span>D</span><img src="D.jpg"></a></li>
    </ul>
</header>

<header id="nopictogram" style="opacity:0;display:none;">
    <ul id="nav-main">
        <li><a href="#">Another</a></li>
        <li><a href="#">Beautifully</a></li>
        <li><a href="#">Challenging</a></li>
        <li><a href="#">Day</a></li>
    </ul>
</header>

jQuery的：

var lastScrollTop = 0;
$(window).scroll(function () {
    var st = $(this).scrollTop();
        if (st < lastScrollTop){

            $('header#nopictogram')
                .animate({'opacity':'0'},500, 
                    function(){$('header#nopictogram')
                    .css({'display':'none'});
                    });
            $('header#pictogram')
                .css({'display':'block'})
                .animate({'opacity':'1'},500);

        } else {

            $('header#pictogram')
                .animate({'opacity':'0'},500, 
                    function(){$('header#pictogram')
                    .css({'display':'none'});
                    });
            $('header#nopictogram')
                .css({'display':'block'})
                .animate({'opacity':'1'},500);

        } //end if

        lastScrollTop = st;
});

这是一个fiddle。

Answer 1

这是你在找什么？

http://jsfiddle.net/q5Lco8f6/7/

我不确定您要使用lastScrollTop跟踪的内容。当scrollTop为0时，您位于页面顶部。当它不为0时，你不在顶部。

所以，当0，显示picto。当不是0时，显示nopicto。

此外，您正在混淆不透明度并且不显示任何内容并导致奇怪的可见性状态。只需使用fadeIn fadeOut，并将nopicto设置为在css中只显示：none。

JS

$(window).scroll(function () {
    var st = $(this).scrollTop();

    if (st == 0 && $('header#nopictogram').is(':visible')) {
        $('header#nopictogram').fadeOut(500, function () {
            $('header#pictogram').fadeIn(500);
        });        
    } 
    else if ($('header#pictogram').is(':visible')) {
        $('header#pictogram').fadeOut(500, function () {
              $('header#nopictogram').fadeIn(500);
        });        
    } //end if
});

使用jQuery在向下滚动时交换带动画的标题，然后向上交换向上滚动

1 个答案: