当达到最小窗口宽度时，触发全高容器

Trigger a full height container when a minimum window width is reached

本文关键字：高容器 窗口      更新时间：2023-09-26

我正在尝试在我的网站上实现全高幻灯片。然而，如果浏览器宽度超过767px，我希望幻灯片是全高的。

这是我迄今为止的代码：

if( $(window).width() > 767) {
  $(window).resize(function() {
   var winHeight = $(window).height(); 
   var headerHeight = $(".navbar").height(); 
   $('.slideshow, .slideshow li').height(winHeight);

  });
  $(window).trigger('resize');
}

如果浏览器的启动宽度大于767，它会起作用。然而如果浏览器开始时宽度小于767，而我开始调整大小时宽度大于767，则脚本不会启动。

你知道我该怎么解决这个问题吗？

resize事件处理程序在浏览器启动时绑定仅在width > 767启动时绑定，尝试删除if条件，它应该可以正常工作

编辑：

要使其仅在宽度>767时适用，条件应在resize事件内

$(window).resize(function() {
  if($(window).width() > 767) {
    var winHeight = $(window).height(); 
    var headerHeight = $(".navbar").height(); 
    $('.slideshow, .slideshow li').height(winHeight);
  } else {
    $('.slideshow, .slideshow li').height(400); //initial height
  }
});
$(window).trigger('resize');

您应该能够通过媒体查询在css中更容易地做到这一点。

@media (min-width:500px){
  .slideshow{
    height:100%;
  }
}
相关文章：