offset（）始终返回相同的数字

Question

我一直在寻找几个小时，不能为我的生活弄清楚这一点。我正在尝试使用jQuery创建一个“滚动到粘性”标题，但标题的位置每次都返回500（距离顶部的距离）。

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

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

有什么建议吗？

Answer 1

  

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

From jQuery API documentation

由于你永远不会改变它，它总会返回相同的值。

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

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

如果为true，请将.sticky类添加到$('#header')，这会将其修复为窗口的顶部。如果条件返回false，则删除类.sticky。

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

＆＃13;

＆＃13;

$(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')
  }
})

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

$(document).scroll(function() {
  var scrollTop = $(document).scrollTop();
 
  if( (originalOffsetTop) <= scrollTop){
    $("#header").addClass('sticky')
  }
  else{
    $("#header").removeClass('sticky')
  }
})

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;