jQuery 调整大小和滚动

jQuery Resize and Scroll

本文关键字：滚动 调整 jQuery      更新时间：2023-09-26

我正在使用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+ 向下滑动。

首先，与其使用 javascript 来做响应式任务，不如使用 css3 媒体查询，性能结果会好得多。

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

其次，请注意，仅当窗口宽度最初为>= 940 时，才绑定调整大小的处理程序函数。无论如何，您要做的是绑定函数，然后仅在该条件成立时才让它运行：

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