javascript - 调整计算的变量窗口高度

Question

我正在为客户网站创建一个粘性滚动导航，并且已经开始工作。但是，由于其上方的 div 具有可变高度，该高度基于浏览器窗口的高度减去旋转木马的导航 height: calc(100vh - 100px); 当浏览器窗口调整大小时它会中断。那么有人可以帮我在下面的代码中添加一个调整大小事件，以便在调整浏览器大小时更新窗口的高度吗？

var yourNavigation = $(".home-navbar");
  stickyDiv = "sticky";
  yourHeader = $('.home-carousel').height();

$(window).scroll(function() {
  if( $(this).scrollTop() > yourHeader ) {
    yourNavigation.addClass(stickyDiv);
    $( "#sticky" ).addClass( "sticky__padding" );
  } else {
    yourNavigation.removeClass(stickyDiv);
    $( "#sticky" ).removeClass( "sticky__padding" );
  }
});

Answer 1

我认为您只是想让 scrollTop checkin 一个函数并在 load、scroll 和 resize 时调用它 如果是这样，您可以使用纯 JS 或 jQuery 来完成此操作:

function headerStuff() {
  var yourNavigation = $(".home-navbar");
  var stickyDiv = "sticky";
  var yourHeader = $('.home-carousel').height();
  if( $(this).scrollTop() > yourHeader ) {
    yourNavigation.addClass(stickyDiv);
    $( "#sticky" ).addClass( "sticky__padding" );
  } else {
    yourNavigation.removeClass(stickyDiv);
    $( "#sticky" ).removeClass( "sticky__padding" );
  }
};

window.addEventListener("load", headerStuff);
window.addEventListener("resize", headerStuff);
window.addEventListener("scroll", headerStuff);