在滚动位置添加一个类

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顶部的位置时，我想添加 header-fixed 类。如果滚动位置小于该位置，我想删除Class header-fixed 以再次显示标题上方的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，并且需要将此逻辑添加到 jquery.scroll()事件中，因为现在检查仅发生在页面加载时。每次滚动窗口时，您都需要检查此逻辑。工作演示：$(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>