Javascript 在滚动位置添加一个类

我有一个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类。如果滚动位置小于该位置，我想移除固定的类标题，以再次显示标题上方的div

HTML:

---

这里很少有像返回对象这样的问题。您需要实际使用

c.offset（）.top

，并且需要将此逻辑添加到jquery事件中，因为现在检查只在页面加载时发生。每次滚动窗口时，您都需要检查此逻辑

工作演示：

$（函数（）{
var c=$（“#标题”）；
变量d=c.offset（）.top-20；
$（窗口）。滚动（函数（）{
var b=$（window.scrollTop（）；
c、 切换类别（“表头固定”，b>d）；
});
});
.header固定{位置：固定；顶部：0；左侧：0；右侧：0}
#标题{浮动：左；宽度：100%；z索引：999998}
#公告{高度：500px；边框：1px实心#ccc！重要；填充：2米；边框半径：10px}
#公告，#标题(容器{页边距底部：15px}
ul{列表样式类型：无；边距：0；填充：0；溢出：隐藏；边框：1px实心#e7e7e7；背景色：#f3}
li{float:left}
li a{显示：块；颜色：#666；文本对齐：居中；填充：14px 16px；文本装饰：无}
LiA.active{color:#fff；背景色：#4CAF50}
.box shadow深蓝色{box shadow:0 3px 6px#071c38！重要；z-index:99999999！重要；}

公告分区-向下滚动到下面






公告div-再次向上滚动
请您也分享与之相关的HTML代码。这真的会有帮助。@palaѕѕѕѕѕѕ-updatedThanks。“滚动位置到达div顶部”您指的是哪个div？当滚动位置到达#header顶部时，我希望#header变为位置固定。我现在可以看到，一旦#header被修复，这可能会导致问题……嗯，我的困惑是基于您共享的HTML标记，
#header
似乎已经位于
header\u容器的顶部。是吗？这段代码工作得很好…除了…当页面完全向上滚动时，它消除了我的框阴影效果。但是当div移动到固定位置时，方块阴影再次工作。
.box shadow navy dark{box shadow:0 3px 6px#071c38！重要；z-index:99999999！重要；}
我添加了css。在这个演示中，长方体阴影似乎工作得很好。你那边肯定有一些css问题/冲突。我在下面有一张图片。。。图像从上方的div覆盖长方体阴影是自然的吗？有什么办法可以防止这种情况发生吗？我不确定到底是什么问题。您可以为它创建一个新问题，并在其中添加一个小演示来解释该问题。我相信其他人也会乐意帮忙的。
<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 ----*/ ?>