Question

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

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检查一个函数并在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);

调整计算的变量窗口高度

1 个答案: