jquery - offset()始终返回相同的数字

我一直在寻找时间，无法为我的一生解决这个问题。我正在尝试使用jQuery创建“滚动到粘性”标头，但是标头的位置每次都返回500（距顶部的距离）。

https://jsfiddle.net/xpvt214o/122991/

$(document).scroll(function() {
  console.log($(document).scrollTop());
  console.log($("#header").offset().top);
})

有什么建议么？

最佳答案

offset（）允许我们检索元素的当前位置
相对于文档。


From jQuery API documentation

由于您从不更改它，因此它将始终返回相同的值。


要构建粘性菜单，您需要$('#filler-top')的高度和它的offsetTop。 （在这种情况下，offsetTop将为0。）

然后检查scrollTop是否大于或等于高度+ offsetTop。

如果为true，则将一个类.sticky添加到$('#header')，以使其固定在窗口的顶部。如果条件返回false，则删除类.sticky。

#header.sticky{
  position: fixed;
  top: 0px;
}

$(document).scroll(function() {
  var scrollTop = $(document).scrollTop();
  var offsetTop = $("#filler-top").offset().top;
  var height = $("#filler-top").height();

  if( (offsetTop + height) <= scrollTop){
    $("#header").addClass('sticky')
  }
  else{
    $("#header").removeClass('sticky')
  }
})

body {
  margin: 0;
  padding: 0;
}
#everything {
  width: 100%;
  height: 100%;
}
#header {
  width: 100%;
  height: 60px;
  margin: 0;
  padding: 0;
  border-bottom: 7px solid #4fd0ff;
  background-color: #00BBFF;
  position: relative;
  display: block;
}
.header-item {
  width: 20%;
  height: 100%;
  display: inline-block;
  float: left;
  text-align: center;
  vertical-align: middle;
  line-height: 60px;
  font-family: 'Lato', sans-serif;
  color: #effaff;
  font-size: 30px;
  transition: 0.6s;
}
.header-item:hover {
  background-color: #4fd0ff;
  cursor: pointer;
}
#filler-top {
  width: 100%;
  height: 500px;
  display: block;
  background-color: #00BBFF;
  font-size: 80px;
  font-family: 'Luckiest Guy', sans-serif;
  line-height: 500px;
  color: white;
  text-align: center;
}
#filler-bottom {
  width: 100%;
  height: 2000px;
  display: block;
}

#header.sticky{
  position: fixed;
  top: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato:700|Luckiest+Guy" rel="stylesheet">
<div id="filler-top">Jello!</div>
  <div id="header">
    <div class="header-item">Uno</div>
    <div class="header-item">Dos</div>
    <div class="header-item">Tres</div>
    <div class="header-item">Quartz</div>
    <div class="header-item">Sinx</div>
  </div>
  <div id="filler-bottom"></div>

编辑：我个人认为以下方法是一种更好的方法。

var originalOffsetTop = $('#header').offset().top;

$(document).scroll(function() {
  var scrollTop = $(document).scrollTop();

  if( (originalOffsetTop) <= scrollTop){
    $("#header").addClass('sticky')
  }
  else{
    $("#header").removeClass('sticky')
  }
})

body {
  margin: 0;
  padding: 0;
}
#everything {
  width: 100%;
  height: 100%;
}
#header {
  width: 100%;
  height: 60px;
  margin: 0;
  padding: 0;
  border-bottom: 7px solid #4fd0ff;
  background-color: #00BBFF;
  position: relative;
  display: block;
}
.header-item {
  width: 20%;
  height: 100%;
  display: inline-block;
  float: left;
  text-align: center;
  vertical-align: middle;
  line-height: 60px;
  font-family: 'Lato', sans-serif;
  color: #effaff;
  font-size: 30px;
  transition: 0.6s;
}
.header-item:hover {
  background-color: #4fd0ff;
  cursor: pointer;
}
#filler-top {
  width: 100%;
  height: 500px;
  display: block;
  background-color: #00BBFF;
  font-size: 80px;
  font-family: 'Luckiest Guy', sans-serif;
  line-height: 500px;
  color: white;
  text-align: center;
}
#filler-bottom {
  width: 100%;
  height: 2000px;
  display: block;
}

#header.sticky{
  position: fixed;
  top: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato:700|Luckiest+Guy" rel="stylesheet">
<div id="filler-top">Jello!</div>
  <div id="header">
    <div class="header-item">Uno</div>
    <div class="header-item">Dos</div>
    <div class="header-item">Tres</div>
    <div class="header-item">Quartz</div>
    <div class="header-item">Sinx</div>
  </div>
  <div id="filler-bottom"></div>