CODEWITHSUNDEEP
jquery
Omid Ghafori
Omid Ghafori

Reputation: 31

offset() always returns the same number

I have been searching for hours and can not for the life of me figure this out. I'm trying to make a "scroll to sticky" header with jQuery, but the position of the header is returning 500 (the distance from the top) every time.

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

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

Any suggestions?

Upvotes: 1

Views: 1230

Answers (1)

Hikarunomemory
Hikarunomemory

Reputation: 4305

offset() allows us to retrieve the current position of an element relative to the document.

From jQuery API documentation

Since you never change it, it would always return the same value.


To build a sticky menu, you'll need the height of $('#filler-top') and the offsetTop of it. (In this case, offsetTop would be 0.)

Then check if scrollTop is greater or equal to the height + the offsetTop or not.

If true, add a class .sticky to $('#header') which makes it fixed to the window's top. And remove class .sticky if the condition returns false.

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

Edit: I, personally, think the following is a better way to do so.

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>

Upvotes: 3

Related Questions