Question

我正在使用jQuery在我正在处理的单页面上创建一些效果。我有两个单独的导航栏。一个绝对定位（#initial）在页面顶部，而另一个定位（#fixed_nav）到屏幕顶部。根据屏幕宽度，固定的样式有两种不同的样式。

我想要做的是在用户向下滚动#initial之后，＃fixed_nav向下滑入视图并粘住，直到你向上滚动并再次看到#initial。我还希望它在窗口调整大小时响应性地切换，这可能是不常见的。我个人可以让他们两个都工作，但我已经尝试了几种不同的方法让他们一起工作，我只是得到一个或另一个。我希望有人能指出我正确的方向。以下是我现在对于该部分脚本的所有内容：

//Nav Switcher
    if ($(window).width >= 940) {
        $(document).scroll(function () {
            if ($(window).scrollTop() >= 60) {
                $('#fixed_nav').slideDown();
            } else {
                $('#fixed_nav').slideUp();
            }
        });
    }
    //Responsive
    $(document).resize(function () {
        if ($(window).width() < 940) {
            $('#fixed_nav').show();
            $('#initial').hide();
        }
    });

响应部分有效，但我不再让#fixed_nav向下滑动，宽度为940 +。

Answer 1

首先，使用css3媒体查询代替使用javascript执行响应式任务，性能结果会更好。

/* CSS */
@media only screen and (max-width: 939px) { 
    #initial {display:none}
}
@media only screen and (min-width: 940px) { 
    #fixed_nav {display:none}
}

其次，请注意，只有当窗口宽度最初为＆gt; = 940时，你才绑定 resize的处理函数。你想要做的是绑定函数，然后让它它只在该条件成立时运行：

// Javascript
$(document).scroll(function () {
       if ($(window).width >= 940) {
            if ($(window).scrollTop() >= 60) {
                $('#fixed_nav').slideDown();
            } else {
                $('#fixed_nav').slideUp();
            }
       }
});

jQuery调整大小和滚动

1 个答案: