Jquery 侧边导航动画

Question

我正在尝试向我的网站添加一个侧边导航栏，当用户滚动时它会从右侧进入动画，这样正常的导航栏就看不到了。我设法得到它，所以它以我想要的方式动画，但不是在我想要的时候。它只是在显示和不在用户滚动时显示之间交替，而不是在用户滚动经过 header 时不显示。

我正在使用 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

如果我理解你是对的，当用户向下滚动时一切正常。每当隐藏 header 时，就会显示点。（从我看到的fiddle）。当用户滚动到顶部时，问题开始，而不是在 header 显示之前隐藏该点。正确的？

如果是这样，您只需要像状态 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 侧边导航动画

Jquery side navigation animation

html

javascript

css

navigation

jquery