需要帮助在滚动 'else' 语句中包含多个 jQuery 效果

Question

想不通这一点。我是 jQuery 的中间人，但遇到了麻烦。

   <div class="some-div"></div>
<div class="monster"></div>
<div class="another-div"></div>
<div class="little-nav">
    <p>click me!</p>
</div>
<div class="list">
    <p>close!</p>
</div>
<div class="div3">
</div>

我的jQuery如下：

var subNavTop = $('.monster').offset().top;
var littleNav = $('.little-nav');
var slideButton = $('.little-nav p');
var list = $('.list');
var closeList = $('.list p');

$(window).scroll(function() {
        //if window is scrolled to top of 'monster'
        if ($(window).scrollTop() > subNavTop) {

            littleNav.slideDown('fast');

            slideButton.click(function(){
            littleNav.fadeOut('slow');
            list.stop().animate({left: '0px'});
            });

            closeList.click(function(){
            list.stop().animate({left: '-200px'});
            littleNav.fadeIn('slow');
            });

        }

        else {
            littleNav.slideUp('fast');
        }
});

我有一个固定的子导航，它会在用户滚动到页面上的某个点时出现。如果用户向上滚动，我已经成功地滑入和滑出导航。但是，我在此导航中还有其他弹出菜单。一切正常，除非用户滚动到子导航，打开弹出窗口，但不关闭它，然后向上滚动时导航仍保留在页面上。我将所有这些都包含在此处 http://jsfiddle.net/jbarbermerge/pb9zwcx0/。如果 .list 仍然打开，有人可以帮我关闭 .little-nav 当用户向上滚动时

Answer 1

最简单的方法是在再次显示 little-nav 之前测试用户是否仍然滚动到适当的位置。 my fork of your fiddle.

的演示

相关变更：

closeList.click(function(){
    list.stop().animate({left: '-200px'});
    if ($(window).scrollTop() > subNavTop) {
        littleNav.fadeIn('slow');
    }
});

附带说明一下，最好只绑定一次事件处理程序。当您在其他事件处理程序中绑定事件时，可能会发生奇怪的事情，尤其是经常触发的 scroll 事件。由于您的元素不是动态创建或销毁的，它们的行为也不会动态更改，因此应在声明相应元素后立即定义点击事件处理程序。这就是我的意思：

    var subNavTop = $('.monster').offset().top;
    var littleNav = $('.little-nav');
    var slideButton = $('.little-nav p');
    var list = $('.list');
    var closeList = $('.list p');

    closeList.click(function(){
        list.stop().animate({left: '-200px'});
        if ($(window).scrollTop() > subNavTop) {
            littleNav.fadeIn('slow');
        }
    });

    slideButton.click(function(){
        littleNav.fadeOut('slow');
        list.stop().animate({left: '0px'});
    });

    $(window).scroll(function() { // ...

您会注意到这些处理程序不引用任何仅在滚动期间才知道的内容。一般来说，如果您确实需要来自周围事件的信息来确定正确的行为，您将需要更谨慎的方法。

另一个观察结果是，无论 Nav 对象当前是否可见，每次 window 滚动时都会调用 slideDown 函数。我认为 jQuery 对此做了正确的事情（即什么也没做），但它可能是错误的来源，我在更新我的 fiddle 以在用户向上滚动时删除列表时注意到这一点。

基本上，为了处理这些情况，我向全局范围添加了两个布尔值：isNavVisible 和 isListVisible。这基本上只是缓存 element.is(":visible") 的值并使用它来确定给定的动画是否需要发生。如果没有这些检查，每当列表被关闭时，我都会在导航栏上看到 slideUp 动画（应该是淡出）。这是因为每次滚动发生在分界点下方时，都会显示导航栏。当列表出现时我们只是看不到它，因为它位于导航栏的顶部。

需要帮助在滚动 'else' 语句中包含多个 jQuery 效果

Need help including multiple jQuery effects in a scroll 'else' statement

jquery

scroll

function

slide