在滚动 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>