脚本结束后，Div不会重新加载到原始位置

Div doesn't reload to original place after script

本文关键字：加载 位置 原始 新加载 结束 Div 脚本      更新时间：2023-09-26

我有一个div，当你滚动到顶部并越过它时，它粘在顶部但是当你滚动到顶部时，它不会返回到原来的位置。

https://jsfiddle.net/5ADzD/754/embedded/result/

function fixDiv() {
var $div = $("#navwrap");
if ($(window).scrollTop() > $div.data("top")) { 
    $('#navwrap').css({'position': 'fixed', 'top': '0', 'width': '100%'}); 
}
else {
    $('#navwrap').css({'position': 'absolute'});
}
}
$("#navwrap").data("top", $("#navwrap").offset().top); // set original position on load
$(window).scroll(fixDiv);

你没有把顶部设置回它应该在的位置。

试试这个:

function fixDiv() {
  var $div = $("#navwrap");
  var top = $div.data("top");
  if ($(window).scrollTop() > top) { 
    $('#navwrap').css({'position': 'fixed', 'top': '0', 'width': '100%'}); 
  }
  else {
    $('#navwrap').css({'position': 'absolute', 'top' : top + 'px'}); //set back to absolute and position the top
  }
}
$("#navwrap").data("top", $("#navwrap").offset().top); // set original position on load
$(window).scroll(fixDiv);
#container {
    padding: 100px 0 2500px;
}
#navwrap{
    position:absolute;
    width: 100%;
    height: 50px;
    background-color: #C00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
    <div id="navwrap">NAV WRAP</div>
</div>

更新小提琴:https://jsfiddle.net/5ADzD/755/1

在else块中，使用位置relative或static。这样，它就会返回到原来的布局位置。

http://jsfiddle.net/5ADzD/756/

这是因为absolute非常像fixed，其中元素从布局中取出。不同之处在于fixed保持在原位，absolute紧随其后(相对于下一个定位的祖先)。

相关文章：