jquery粘贴标题与调整大小

问题描述：

我做了一个粘滞的导航栏，它将在启动时位于视口的底部。我正在使用vh单位来放置它。现在，如果视口的高度发生变化，导航栏将按照预期重新定位。但是，.offset().top将继续使用过时的位置。这会导致脚本在不正确的位置切换粘滞。jquery粘贴标题与调整大小

var win = $(window), 
 
    header = $('nav'), 
 
    offset = (header.offset().top); 
 

 
win.scroll(function() { 
 
    if (offset < win.scrollTop()) { 
 
    header.addClass("sticky"); 
 
    } else { 
 
    header.removeClass("sticky"); 
 
    } 
 
});

#container { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#boxi { 
 
    z-index: -15; 
 
    height: 50vh; 
 
    background-color: green; 
 
} 
 
#boxi2 { 
 
    z-index: -15; 
 
    height: 1000px; 
 
    background-color: pink; 
 
} 
 
nav { 
 
    width: 100%; 
 
    position: absolute; 
 
    height: 50px; 
 
    top: 50vh; 
 
    transform: translate(0, -50px); 
 
    background-color: black; 
 
    opacity: 0.5; 
 
    color: white; 
 
} 
 
nav.sticky { 
 
    transform: translate(0, 0px); 
 
    position: fixed; 
 
    top: 0px; 
 
    right: 0px; 
 
    left: 0px; 
 
    z-index: 999; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body id="container"> 
 
    <div id="boxi"></div> 
 
    <nav>Sticky!</nav> 
 
    <div id="boxi2"></div> 
 
</body>

JSFiddle

https://jsfiddle.net/4whfz14j/6/ - >这是你想实现什么？ –

是啊完美，谢谢你，所有的答案都在工作，但我说我不应该只是说“谢谢”！无论如何，每个解决方案都很棒 –

答

发生了什么事是你抵消你调整窗口大小后不会被更新。因此，一旦你滚过原始点，addClass/removeClass就会触发。值得庆幸的是，你可以只添加以下代码年底得到固定：

win.on('resize',function(){ 
    offset = (header.offset().top); 
});

这确保您的偏移将更新每次您调整窗口大小，从而保持事物同步。

JS Fiddle

答

使用窗口.resize jQuery函数。它会触发调整目标的大小。

var win = $(window), 
 
    header = $('nav'), 
 
    offset = (header.offset().top); 
 

 
win.scroll(function() { 
 
    if (offset < win.scrollTop()) { 
 
     header.addClass("sticky"); 
 
    } else { 
 
     header.removeClass("sticky"); 
 
    } 
 
}), 
 

 
win.resize(function() { 
 
\t \t offset = header.offset().top; 
 
})

#container{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#boxi { 
 
    z-index: -15; 
 
    height:50vh; 
 
    background-color:green; 
 
} 
 

 
#boxi2{ 
 
    z-index: -15; 
 
    height:1000px; 
 
    background-color:pink; 
 
} 
 

 
nav { 
 
    width:100%; 
 
    position:absolute; 
 
    height:50px; 
 
    top:50vh; 
 
    transform: translate(0,-50px); 
 
    background-color:black; 
 
    opacity:0.5; 
 
    color:white; 
 
} 
 

 
nav.sticky { 
 
    transform: translate(0, 0px); 
 
    position:fixed; 
 
    top:0px; 
 
    right:0px; 
 
    left:0px; 
 
    z-index:999; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body id="container"> 
 
    <div id="boxi"></div> 
 
    <nav>Sticky!</nav> 
 
    <div id="boxi2"></div> 
 
</body>

jquery粘贴标题与调整大小

相关推荐