Question

我有一个固定在顶部的主标题，我有一个subnav（在真实网站上用于页面内的锚链接），它固定在窗口的底部。然后我有一个英雄形象，它是窗口的高度减去标题的高度减去子空间的高度。当用户滚动到底部的子凹陷时，它会在主导航之后粘到顶部。这一切都很有效。

以下是正在开发的网站上的工作原理的摘录版本：https://jsfiddle.net/owgvjxdj。

然而，一个错误是当窗口调整大小时，子区域的位置不会重新计算，因此最终定位得太高或太低。

我可以通过绑定一个额外的窗口调整大小事件来重构subnav的位置：

// Refactor subnav measurements on window resize
$( window ).resize(function() {

  var windowH = $(window).height();
  var stickToBot = windowH - $('#subnav').outerHeight(true);

  var scrollVal = $(this).scrollTop();
  if ( scrollVal > stickToBot - $('.navbar').outerHeight(true) ) {
      $('#subnav').css({'position':'fixed','top' :'80px'});
  } else {
      $('#subnav').css({'position':'absolute','top': stickToBot +'px'});
  }

});

这适用于初始位置，但在滚动然后调整窗口大小后，定位不正确：https://jsfiddle.net/owgvjxdj/1/

我知道我错过了一些非常明显的东西，但它是什么？！

Answer 1

您需要再次更新windowH，最后更新sticktoBot，因此在窗口调整大小时将变量设置为全局并更新其值，这里是小提琴 - http://jsfiddle.net/owgvjxdj/4/

滚动过去时粘滞的subnav，打破调整大小

1 个答案: