Question

当我向下滚动到我的网站时，我希望我的标题降低其高度。所以我写了这段代码：

function resizeHeader() {
    if ($(window).width() > 1200) {
        if ($('body').hasClass('scrolled')) {
            $('#masthead .top-header').css('height', '50px');
        } else {
            //Initial height
            $('#masthead .top-header').css('height', 'auto');
        }
    } else if ($(window).width() > 768 && $(window).width() < 989) {
        if ($('body').hasClass('scrolled')) {
            $('#masthead .top-header').css('height', '35px');
        } else {
            $('#masthead .top-header').css('height', 'auto');
        }
    }
}

/** Fix header scroll **/
$(window).scroll(function() {
    if ($(this).scrollTop() > 1) {
        $('body').addClass('scrolled');
        resizeHeader();
    } else {
        $('body').removeClass('scrolled');
        resizeHeader();
    }
});

因此，此代码有效，当我以所需大小刷新页面时，脚本正在运行。

但是，当我刷新然后调整窗口大小时，我的标题没有为此大小设置的高度

我想要的是当我调整窗口大小时，该功能正在运行并执行操作。我在刷新页面时总是工作，而不是在我调整页面大小时。

感谢您的帮助！

Answer 1

您需要在加载页面时触发scroll事件，以便代码运行。试试这个：

$(window).scroll(function () {
    // your code here...
}).trigger('scroll'); // < trigger on load

另请注意，使用媒体查询将resizeHeader()函数的逻辑放入响应式CSS样式表会更合适：

#masthead .top-header {
    height: auto;
}

@media (max-width: 1200px) {
  .scrolled #masthead .top-header {
    height: 50px;
  }
}

@media (max-width: 989px) {
  .scrolled #masthead .top-header {
    height: 35px;
  }
}

var scrollTimer;
$(window).scroll(function() {
    clearTimeout(scrollTimer);
    scrollTimer = setTimeout(function() {
        $('body').toggleClass('scrolled', $(this).scrollTop() > 1);
    }, 250);
}).trigger('scroll');

调整窗口Jquery的大小

1 个答案: