Question

当用户滚动超过某个高度时，我正在寻找一种修正菜单的方法。

问题是我不能只使用if ($(window).scrollTop() > 70){，因为菜单前面元素的高度是可变的。

页面布局类似于：

* Banner <-- This is a variable height banner
* Menu
* Content

我可以在domready菜单的y位置上阅读，但我还需要考虑浏览器调整大小，因为某些媒体查询可能会更改横幅广告。

实现这一目标的最佳方法是什么？

Answer 1

您可以在脚本中使用它

$(window).scroll(function() {
    if ($(".menu").offset().top > 100) {
        $(".menu").addClass("scrolling-nav-header");
    }
    else {
        $(".menu").removeClass("scrolling-nav-header")
    }
});

并且您的css将具有您想要的此类=“scrolling-nav-header”的功能。像这样的东西：

menu.scrolling-nav-header{
    position:absolute;
    top:0;
    left:0;
}

Answer 2

当此值大于相对标题偏移量时，将可滚动标题的绝对偏移顶部设置为容器（窗口）滚动值。会是这样的：

＆＃13;

$(document).ready(function () {
  var scrollheader = $('.scrollheader'), scrollcontainer = $(window);
  var scrolling, shY;
  (function updateOffsetTop() {
    if (!scrolling) {shY = scrollheader.offset().top;}
    scrolling = false;
    setTimeout(updateOffsetTop, 5000); // Define lapse to update the height above.
  })();
  scrollcontainer.scroll(function() {
    var wsY = $(this).scrollTop();
    if (wsY > shY) {
      scrollheader.offset({top: wsY});
    } else {
      scrollheader.css({top: 0});
    }
    scrolling = true;
  });
  scrollcontainer.trigger('scroll');
});

＆＃13;

.scrollheader {
  position: relative;
  background-color: #000000;
  color: #ffffff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Stuff before<br/>More stuff before<br/>Stuff before<br/>More stuff before<br/>
Stuff before<br/>More stuff before<br/>Stuff before<br/>More stuff before<br/>
<div class="scrollheader">Scroll Header</div>
Stuff after<br/>More stuff after<br/>Stuff after<br/>More stuff after<br/>
Stuff after<br/>More stuff after<br/>Stuff after<br/>More stuff after<br/>
Stuff after<br/>More stuff after<br/>Stuff after<br/>More stuff after<br/>
Stuff after<br/>More stuff after<br/>Stuff after<br/>More stuff after<br/>
Stuff after<br/>More stuff after<br/>Stuff after<br/>More stuff after<br/>
Stuff after<br/>More stuff after<br/>Stuff after<br/>More stuff after<br/>
Stuff after<br/>More stuff after<br/>Stuff after<br/>More stuff after<br/>
Stuff after<br/>More stuff after<br/>Stuff after<br/>More stuff after<br/>

＆＃13;

注意：已更新，以定期检查标题上方内容高度的更改。

滚动固定菜单，前一个元素的高度未知

2 个答案: