在滾動 position 上添加 class

Question

我有一個 div，我想在頁面上保持相對，直到滾動 position 到達 div 的頂部，然后通過添加 class 應用固定浮動。

我有我認為應該可以工作的代碼； 但是，不能讓它做任何事情。 滾動時，div 保持相對狀態，不會應用 class 來修復 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");  }

};
});

這是 CSS

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

我在 header 上方有一個 div，它的高度會波動，所以我想動態計算從 header 頂部到頁面頂部的距離。 每當滾動 position 到達 div 頂部的 position 時，我想添加 header-fixed 的 class。 如果滾動 position 小於 position，我想刪除固定類標題以再次顯示 header 上方的 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()返回 object。 您需要實際使用c.offset().top代替，並且您需要將此邏輯添加到 jquery .scroll()事件，因為現在檢查僅在頁面加載時發生。 每次滾動 window 時，您都需要檢查此邏輯。

工作演示：

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