调整窗口大小Jquery

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