我在页面中间有一个.stickyMenu
div。当.stickyMenu
与.navB
的底部接触时,我希望它粘在那里。当用户向上滚动时,我希望它不粘在其原始位置。
事情是,我也希望它是动态的,因为.gapA
可以是任意高度(当前以350
的偏移量为例)。
因此,在下面的演示中,当橙色div滚动到蓝色div的底部时,我希望它在向下滚动时粘在那儿,然后在向上滚动时在存在灰色div的地方,我要使其松开并返回到它的自然位置。
当前代码和结果:
(function($) {
$(document).ready(function() {
$(window).scroll(function(e) {
var $el = $('.stickyMenu');
var isPositionFixed = ($el.css('position') == 'fixed');
if ($(this).scrollTop() > 350 && !isPositionFixed) {
$el.css({
'position': 'fixed',
'top': '90px',
'width': '100%',
'left': '0px',
'background': 'orange',
'z-index': '1'
});
}
if ($(this).scrollTop() < 350 && isPositionFixed) {
$el.css({
'position': 'static',
'top': '50px'
});
}
});
});
})(jQuery);
body {
margin: 0;
}
.wrap{
position: relative;
display: block;
}
.wrap .navA {
background-color: red;
height: 50px;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.wrap .navB {
background-color: blue;
height: 90px;
position: fixed;
top: 50px;
left:0;
width: 100%;
}
.gapA{
height: 300px;
background-color: grey;
}
.stickyMenu {
height: 70px;
background-color: orange;
}
.gapB{
height: 1500px;
background-color: lightgrey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="navA"></div>
<div class="navB"></div>
</div>
<div class="gapA"></div>
<div class="stickyMenu"></div>
<div class="gapB"></div>
最佳答案
尝试这个
(function($) {
$(document).ready(function() {
$(window).scroll(function(e) {
var $el, nav, top,
$el = $('.stickyMenu');
nav = $('.navB');
top = nav.height() + nav.position().top;
if ($(this).scrollTop() >= top) {
$el.css({
'position': 'fixed',
'top': top,
'width': '100%',
'left': '0px',
'background': 'orange',
'z-index': '1'
});
}else{
$el.css({
'position': '',
'top': top,
'width': '100%',
'left': '0px',
'background': '',
'z-index': ''
});
}
});
});
})(jQuery);
body {
margin: 0;
}
.wrap{
position: relative;
display: block;
}
.wrap .navA {
background-color: red;
height: 50px;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.wrap .navB {
background-color: blue;
height: 90px;
position: fixed;
top: 50px;
left:0;
width: 100%;
}
.gapA{
height: 300px;
background-color: grey;
}
.stickyMenu {
height: 70px;
background-color: orange;
}
.gapB{
height: 1500px;
background-color: lightgrey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="navA"></div>
<div class="navB"></div>
</div>
<div class="gapA"></div>
<div class="stickyMenu"></div>
<div class="gapB"></div>