javascript - $(window).width() 和滚动的问题

Question

我试图让这段代码只在设备窗口大于 960 像素时才起作用，并且它应该只在窗口向下滚动 700 像素时触发。后面的部分有效，但第一部分无效。

代码在淡入和淡出的位置完美运行，但我不希望它在移动设备上这样做，因为滚动点 (700px) 太向下并且会产生问题。

$(function () {
    var header = $('.fadein');
    $(window).scroll(function () {
        var scroll = $(window).scrollTop();

        if (($(window).width() < 960) && (scroll >= 700)) {
            header.removeClass('.fadein').addClass('.fadeout').fadeIn();
        } else {
            header.removeClass('.fadeout').fadeOut().addClass('.fadein');
        }
    });
});

Answer 1

我认为您的主要问题是不小心使用了 < 960而不是 > 960 , 但您也可以更改为检查 innerWidth而不是 width如果你真的对 window 感兴趣的宽度而不仅仅是 screen的宽度。

对于这个演示，我将目标值降低为 500和 200在 SO 片段中更好地工作。 (调整浏览器窗口大小并再次运行该代码段以查看它在 500 像素阈值以上和以下的工作情况。)

console.log("width: " + $(window).innerWidth() );
$(window).scroll(function () {
    const
      div = document.getElementById("div"),
      scroll = $(window).scrollTop();
    if ( ($(window).innerWidth() > 500) && (scroll >= 200) ) {
      div.style.backgroundColor = "yellow";
    }
    else {
      div.style.backgroundColor = "white";
    }
});

#div{ height: 300vh; border: 1px solid grey; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="div"></div>