Question

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

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);

Answer 1

您不应将顶部设置回原位。

试试这个：

＆＃13;

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);

＆＃13;

#container {
    padding: 100px 0 2500px;
}
#navwrap{
    position:absolute;
    width: 100%;
    height: 50px;
    background-color: #C00;
}

＆＃13;

<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>

＆＃13;

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

Answer 2

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

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

那是因为absolute非常像fixed，其中元素从布局中取出。区别在于fixed保持不变，absolute跟随（相对于下一个定位的祖先）。

Div不会在脚本之后重新加载到原始位置

2 个答案: