CODEWITHSUNDEEP
javascriptjqueryscrollwidth
Maximus Dredoff
Maximus Dredoff

Reputation: 306

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

Why doesn't these functions work together? I want to change box-shadow when the page is scrolled and the window width is less then 960px.

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();
    }
});

Upvotes: 0

Views: 59

Answers (1)

Alexandr Lazarev
Alexandr Lazarev

Reputation: 12882

The problem is in your if/else construction. When scrollTop() returns a value more then 100, first condition will always be satisfied. Due to this, if else statement would not be touched. It will be touched only if first if condition fails.

Try to change first if to:

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

Upvotes: 1

Related Questions