用于调整css的jQuery scrollTop功能不起作用

Posted 2023-05-08

【中文标题】用于调整css的jQuery scrollTop功能不起作用

【英文标题】：JQuery scrollTop function for adjusting css not working

【发布时间】：2022-01-13 11:18:11

【问题描述】：

我正在尝试缩小滚动时的 margin-top 值，因为我使用的是在滚动时消失的公告栏。

这是我目前正在使用的带有 CSS 的脚本，它都在 theme.liquid 文件中（我正在使用 Shopify）：

<script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"></script>
    <script>
      $(window).scroll(function()
        if ($(this).scrollTop() > 50) 
           $('#christmas-header-image-pc').addClass('christmas-header-image-margin');
         else 
           $('#christmas-header-image-pc').removeClass('christmas-header-image-margin');
        
    );
</script>

      <style>
      #christmas-header-image-pc 
          top:0!important;
          margin-top:120px;
          z-index:5;
          height:auto;
          position:fixed;
        
      .christmas-header-image-margin 
          margin-top:55px;
      
      </style>

      <img id="christmas-header-image-pc" src="https://cdn.shopify.com/s/files/1/0568/1191/3367/files/christmas-header-decoration.svg?v=1638965731">

我似乎无法让它工作。 该值需要从120px 变为55px。

在前端，这正在发生：

当我滚动时会发生这种情况：

感谢任何帮助！提前致谢。

【参考方案1】：

看起来你的jQuery 工作正常，在scrollTop 高于 50 之后，新类被添加到图像中。

您的问题与 CSS 特异性有关，请将 ID 添加到新的类规则集中，如下所示：

#christmas-header-image-pc.christmas-header-image-margin 
  margin-top:55px;

这是一个关于特异性主题的精彩 article by MDN。

特异性是浏览器决定哪些 CSS 属性值与元素最相关并因此将被应用的方法。特异性基于由不同种类的 CSS 选择器组成的匹配规则。

jQuery(window).scroll(function()
  if (jQuery(this).scrollTop() > 50) 
     jQuery('#christmas-header-image-pc').addClass('christmas-header-image-margin');
   else 
     jQuery('#christmas-header-image-pc').removeClass('christmas-header-image-margin');
  
);

section 
  min-height:2000px;


#christmas-header-image-pc 
    top:0!important;
    margin-top:120px;
    z-index:5;
    height:auto;
    position:fixed;
    transition:300ms;
  
#christmas-header-image-pc.christmas-header-image-margin 
    margin-top:55px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <img id="christmas-header-image-pc" src="https://cdn.shopify.com/s/files/1/0568/1191/3367/files/christmas-header-decoration.svg?v=1638965731">
</section>

【讨论】：

非常感谢！这就是问题所在。像魅力一样工作。