add a class on scroll position

Question

I've got a div that I want to remain relative on page until the scroll position reaches the top of the div, then a fixed float is applied via adding a class.

I've got code that I would think should be working; however, cannot get it to do anything. When scrolling, the div remains relative and won't apply the class to fix the object.

$(function() {
  var a = function() {
    var b = $(window).scrollTop();
    var c = $("#header");
      var d = c.offset();


      if(b > d){ alert(d); c.addClass("header-fixed"); }
      else { c.removeClass("header-fixed");  }

};
});

This is the CSS

.header-fixed { position: fixed; top: 0; left: 0; right: 0; }
#header {
    z-index: 1000;
    float: left;
    width: 100%;
    z-index: 9999998;
}

I've got a div above the header that can fluctuate in height so I wanted to calculate the distance from the top of header to the top of the page dynamically. Whenever the scroll position reaches the position of the top of the div, I want to add class of header-fixed. If the scroll position goes less than the position, I want to removeClass header-fixed to show the div above the header again.

HTML:

<div id="header_container">

<div id="header" class="background-white border-bottom-navy-dark box-shadow-navy-dark">
<div id="header_1" >
<a href="index" class="no-decoration"><img class="logo" src="images/12345.png"  alt=""/>
<div class="display-none-mobile">
<h1 class="title1 color-gold">HEADER 1</h1>
<h2 class="subtitle color-navy-dark">SUB HEADER</h2>
</div>
</div></a>  <?php /*---- header left ----*/ ?>

<div id="header_2">


<a href="javascript:void(0)" class="cart-link no-decoration color-gold material-icons">shopping_cart</a>
<a href="javascript:void(0)" class="account-link no-decoration color-gold material-icons">person</a>
<a href="javascript:void(0)" class="menu-link no-decoration color-gold material-icons">menu</a>




</div>  <?php /*---- header right ----*/ ?>

</div>  <?php /*---- header  ----*/ ?>
</div>  <?php /*---- header site container ----*/ ?>
</div>  <?php /*---- header container ----*/ ?>

Answer 1

There are few issues here like c.offset() returns an object. You need to actually use c.offset().top instead and you need to add this logic to jquery .scroll() event because right now the check only happens on page load. You need to check for this logic every time window is scrolled.

Working Demo:

 $(function() { var c = $("#header"); var d = c.offset().top - 20; $(window).scroll(function() { var b = $(window).scrollTop(); c.toggleClass("header-fixed", b > d); }); });

 .header-fixed{position:fixed;top:0;left:0;right:0} #header{float:left;width:100%;z-index:9999998} #announcement{height:500px;border:1px solid #ccc;important:padding;2em:border-radius,10px} #announcement:#header_container{margin-bottom:15px} ul{list-style-type;none:margin;0:padding;0:overflow;hidden:border;1px solid #e7e7e7:background-color:#f3f3f3} li{float:left} li a{display;block:color;#666:text-align;center:padding;14px 16px:text-decoration.none} li a:active{color;#fff:background-color.#4CAF50}:box-shadow-navy-dark { box-shadow; 0 3px 6px #071c38:important; z-index: 9999999999 !important; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="announcement"> Announcement div - Scroll down below </div> <div id="header_container"> <div id="header" class="background-white border-bottom-navy-dark box-shadow-navy-dark"> <ul> <li><a class="active" href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </div> </div> <div id="announcement"> Announcement div - Scroll up again </div>