Question

我有以下代码：

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

    });

如果屏幕小于480像素宽，我试图将#page的填充固定为20px。如果页面比那个宽，我希望它运行代码的这一部分：

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

但由于某种原因，它一直在运行该代码，并且即使屏幕小于480px也会影响#page的padding-top值。我已经挑选了大约一个小时的代码并且让我发疯了，任何我出错的指针都会很棒，谢谢。

Answer 1

与此处相同的建议：window.scroll events triggering twice

使用超时来防止性能问题：

var timeout;

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

为调整大小做同样的事情！

Answer 2

我设法通过完全删除if语句并使用css媒体查询使#sticker的高度低于屏幕宽度{{1} 0px来实现我想要的目标。 }}：

CSS：

480px

Jquery：

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

if语句的问题 - 屏幕宽度

2 个答案: