为什么 window.scroll() 和 window.width() 不能一起工作？

Question

为什么这些功能不能协同工作？我想在页面滚动且 window 宽度小于 960px 时更改 box-shadow。

function hasScroll() {
    $('.fixed').css({
        "height": "50px",
        "box-shadow": "0px 79px 31px white"
    });
}
function changeShadow() {
    $('.fixed').css({
        "height": "50px",
        "box-shadow": "-3px 48px 44px white"
    });
}
$(window).scroll(function() {
    if ($(this).scrollTop() >= 100) {
        hasScroll();
    }
    else if ($(this).scrollTop() >= 100 && $(window).width() < 960) {
        changeShadow();
    }
    else{
        notSctoll();
    }
});

Answer 1

问题出在您的 if/else 构造中。当 scrollTop() returns 的值大于 100 时，第一个条件将始终满足。因此，不会触及 if else 语句。仅当第一个 if 条件失败时才会触及它。

先尝试把if改成：

if ($(this).scrollTop() >= 100 && $(window).width() > 960)

为什么 window.scroll() 和 window.width() 不能一起工作？

Why doesn't window.scroll() and window.width() work together?

javascript

jquery

scroll

width