Question

我试图在我的网站上添加一个侧面导航栏，当用户滚动时，它会从右侧激活，以便正常的导航栏不可见。我设法得到它所以它的动画我想要的但不是我想要的时候。它只是在显示之间交替，并且在用户滚动时不显示，而不是每当用户滚动超过标题时。

我正在使用jquery，这里是一个jsfiddle： http://jsfiddle.net/2twmcmzh/1/和我目前的js：

$(document).ready(function() {
    var $header = $('header');
    var $sideButtons = $('.roundSideButton');
    var scrollstate = 'hidden';
    var animating = false;
    var duration = 500;
    $( window ).scroll(function() {
        var scrollToTop = $(window).scrollTop(); 
        if(animating === false){
            if(scrollToTop > $('header').height() && scrollstate == 'hidden'){
                showSideButtons(true);
            }else if (scrollstate == 'shown' ){
                showSideButtons(false); 
            }
        }
    });


    function showSideButtons(hide){
        animating = true;
        if(hide){
            $.each($sideButtons,function(i) {
                $(this).stop().delay(i * (duration / 2)).animate({right:"20px"}, duration,function(){animating = false;});
            });
            setTimeout(function() {
                animating = false;
                scrollstate = 'shown';
                console.log(" " + scrollstate + " " + animating);
            }, duration * $sideButtons.length);
        }else{
            $.each($sideButtons,function(i) {
                $(this).stop().delay(i * (duration / 2)).animate({right:"-20px"}, duration);
            });
            setTimeout(function() {
                animating = false;
                scrollstate = 'hidden';
                console.log(" " + scrollstate + " " + animating);
            }, duration * $sideButtons.length);
        }
    }
});

Answer 1

如果我理解你是正确的，当用户向下滚动时一切正常。只要隐藏了标题，就会显示这些点。（从我在小提琴中看到）。当用户滚动到顶部时，问题开始于在显示标题之前隐藏点。对？

如果是这样，您只需像状态hidden一样复制支票。

if(animating === false){
        if(scrollToTop > $('header').height() && scrollstate == 'hidden'){
            showSideButtons(true);
        // I was added this check `scrollToTop < $('header').height()`
        } else if (scrollstate == 'shown' && scrollToTop < $('header').height()){
            showSideButtons(false); 
        }
    }

Jquery侧导航动画

1 个答案: