Question

我有一个滚动功能，使导航栏在滚动时变大，而在用户位于页面顶部时变小。当屏幕变小时，导航栏将转换为可折叠的导航，并且在这种情况下该功能无法正常工作。

我想将函数嵌套在检查屏幕尺寸的函数中。当屏幕尺寸> 720时，需要启动滚动功能，否则需要返回。

当前我得到以下jQuery：

$(document).ready(function() {
    if($(window).width() > 720) {
        window.onscroll = function() {scrollFunction()};
        function scrollFunction() {
            if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
            document.getElementById("navbar-search").style.height = "100px";
            document.getElementById("navbar-search").style.marginTop = "-35px";
            }
            else {
            document.getElementById("navbar-search").style.height = "62px";
            document.getElementById("navbar-search").style.marginTop = "0px";
            }
        }
    }
});

我没有收到任何错误，并且该功能在每种屏幕尺寸上都可以正常工作。有人可以解释一下为什么它不检查屏幕尺寸并且无论如何仍然触发该功能吗？

Answer 1

$(document).ready()的普通javascript吊坠是window.onload。因此，当页面首次加载且宽度大于720像素时，将设置事件处理程序。

如果您调整窗口大小并且宽度为720像素或更小，则onScroll事件仍处于活动状态。解决方案是您必须删除事件window.onscroll。

存在一个名为window.onresize（see here）的事件，您可以使用该事件检查窗口大小是否已更改。如果大小小于720像素，则删除事件处理程序。

最好将onscroll事件绑定到专用元素而不是窗口上。

仅在屏幕尺寸> 720时触发滚动功能

1 个答案: