将导航杆滚动到顶部

时间:2019-02-06 11:04:27

标签: javascript jquery html css

我的问题与以前在StackOverflow上的问题类似,但有细微差别。

以前的问题: Stopping fixed position scrolling at a certain point? Sticky subnav when scrolling past, breaks on resize

我有一个从页面中某个位置开始的子导航。滚动页面时,子导航需要从顶部停止127px。我发现的大多数解决方案都需要您先指定子导航的“ y”位置。问题是我的子导航将从不同页面上的不同位置开始。

这是我当前正在使用的JS代码。此功能仅适用于一页,但并非全部。再加上在移动设备上的值将再次不同。

 var num = 660; //number of pixels before modifying styles

 $(window).bind('scroll', function () {
     if ($(window).scrollTop() > num) {
         $('.menu').addClass('fixed');
     } else {
         $('.menu').removeClass('fixed');
     }
 });

我正在寻找一种解决方案,无论它从页面的哪个位置开始,都停止从顶部导航127px。

3 个答案:

答案 0 :(得分:1)

您可以使用position: sticky并将子导航的top设置为127px

请参见以下示例:

body {
  margin: 0;
}

.main-nav {
  width: 100%;
  height: 100px;
  background-color: lime;
  position: sticky;
  top: 0;
}

.sub-nav {
  position: sticky;
  width: 100%;
  height: 50px;
  background-color: red;
  top: 100px;
}

.contents {
  width: 100%;
  height: 100vh;
  background-color: black;
  color: white;
}

.contents p {
  margin: 0;
}
<nav class="main-nav">Main-nav</nav>

<div class="contents">
  <p>Contents</p>
</div>

<nav class="sub-nav">Sub-nav</nav>

<div class="contents">
  <p>More contents</p>
</div>

请查看浏览器对sticky here的支持

答案 1 :(得分:1)

您应该将代码更改为以下内容,并且可以正常运行:

 $(window).bind('scroll', function () {
     if ($(window).scrollTop() > $(".menu").offset().top) {
         $('.menu').addClass('fixed');
     } else {
         $('.menu').removeClass('fixed');
     }
 });

答案 2 :(得分:0)

也许您可以尝试以下方法:

  • 查找导航div(.menu
  • 找到.menu的最高价值(香草JS是menuVar.getBoundingClientRect().top,不确定jQuery如何做到这一点)。
  • 获得浏览器屏幕的最高价值。
  • 计算差异-127像素。
  • 当用户滚动并达到menu -127px-> addClass('fixed')的最大值时。