时间戳

首页 > 解决方案 > $(window).width() 和滚动的问题

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

问题描述

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

该代码在淡入然后淡出的位置上完美运行，但是我不希望它在移动设备上这样做，因为滚动点（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');
        }
    });
});

标签： javascriptjquerydom

解决方案

我认为您的主要问题是不小心使用< 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>

推荐阅读