Problems with if statement - screen width

Question

I have the following code:

$(window).on("load resize", 
    function(){

    stickerHeight = $('#sticker').height();

    if ($(window).width() > 480) {

    var stickerTop = parseInt($('#sticker').offset().top);
        $(window).scroll(function() {
            $("#sticker").css((parseInt($(window).scrollTop()) + parseInt($("#sticker").css('margin-top')) > stickerTop) ? {
                position: 'fixed',
                top: '0px'
            } : {
                position: 'relative'
            });
            if ($('#sticker').css('position') === 'fixed') {
            $('#page').css('padding-top',stickerHeight + 20);}
            else {$('#page').css('padding-top','20px');}
        });
    }

    else {$('#page').css('padding-top','20px');}

    });

I'm trying to get the padding of #page to be fixed at 20px if the screen is smaller than 480 px wide. If the page is wider than that, I want it to run this section of the code:

var stickerTop = parseInt($('#sticker').offset().top);
            $(window).scroll(function() {
                $("#sticker").css((parseInt($(window).scrollTop()) + parseInt($("#sticker").css('margin-top')) > stickerTop) ? {
                    position: 'fixed',
                    top: '0px'
                } : {
                    position: 'relative'
                });
                if ($('#sticker').css('position') === 'fixed') {
                $('#page').css('padding-top',stickerHeight + 20);}
                else {$('#page').css('padding-top','20px');}
            });

But for some reason it is running that code all the time, and is affecting the padding-top value of #page even when the screen is less than 480px. I've picked over the code for about an hour and its driving me crazy, any pointers where i'm going wrong would be great, thank you.

score 1 · Answer 1 · edited May 23 '17 at 11:57

1

Same advice as here: window.scroll events triggering twice

Use a timeout to prevent performance issues:

var timeout;

$(window).scroll(function() {
    clearTimeout(timeout);  
    timeout = setTimeout(function() {
        // do your stuff
    }, 50);
});

Do the same thing for resizing!

edited May 23 '17 at 11:57

Community

1
1

answered Feb 28 '14 at 11:50

Alex

9,911
5
33
52

Thanks Alex, a useful point, but not quite what I was going for. Thanks for contributing anyhow :) – Visiophobia Feb 28 '14 at 12:16

score 0 · Answer 2 · answered Feb 28 '14 at 12:20

I managed to achive what I was going for by removing the if statement completely, and using a css media query to make the height of #sticker to be 0px below a screen width of 480px:

The CSS:

@media only screen and (max-width: 480px) {
#sticker {
        height:0;
        overflow:hidden;
    }
}

The Jquery:

$(window).on("load resize", 
    function(){

    stickerHeight = $('#sticker').height();

    var stickerTop = parseInt($('#sticker').offset().top);
        $(window).scroll(function hello() {
            $("#sticker").css((parseInt($(window).scrollTop()) + parseInt($("#sticker").css('margin-top')) > stickerTop) ? {
                position: 'fixed',
                top: '0px'
            } : {
                position: 'relative'
            });
            if ($('#sticker').css('position') === 'fixed') {
            $('#page').css('padding-top',stickerHeight + 20);}
            else {$('#page').css('padding-top','20px');}
        });

    });

Problems with if statement - screen width

2 Answers2