我的问题与以前在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。
答案 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)
也许您可以尝试以下方法:
.menu
).menu
的最高价值(香草JS是menuVar.getBoundingClientRect().top
,不确定jQuery如何做到这一点)。menu -127px
-> addClass('fixed')
的最大值时。