добавить класс на позицию прокрутки

Question

У меня есть div, который я хочу сохранять относительным на странице до тех пор, пока позиция прокрутки не достигнет вершины div, а затем с помощью добавления класса применяется фиксированное значение с плавающей точкой.

У меня есть код, который, я думаю, должен работать; однако, не может заставить его делать что-либо. При прокрутке div остается относительным и не применяет класс для исправления объекта.

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

};
});

Это CSS

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

У меня есть div выше заголовок, который может колебаться по высоте, поэтому я хотел рассчитать расстояние от верха заголовка до верхней части страницы динамически. Всякий раз, когда позиция прокрутки достигает позиции вершины div, я хочу добавить класс с фиксированным заголовком. Если позиция прокрутки идет меньше, чем позиция, я хочу удалить фиксированный заголовок класса, чтобы снова показать div над заголовком.

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

Здесь есть несколько проблем, например c.offset() возвращает объект. Вместо этого вам нужно использовать c.offset().top, и вам нужно добавить это logi c к jquery .scroll(), потому что сейчас проверка происходит только при загрузке страницы. Вам нужно проверять эту логику c каждый раз, когда прокручивается окно.

Рабочая демонстрация:

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

Answer 2

потому что javascript будет выполняться только при загрузке страницы, в то время как вы должны выполнить его при прокрутке. Для этого измените ваш js этот

$(function() {
  $(window).scroll(function(){
    var a = $(window).scrollTop();
    var b = $("#header");
    var c = c.offset();
    if(a > c) { 
       alert(c); b.addClass("header-fixed"); 
    } else { 
       b.removeClass("header-fixed");
    }
  });
});