Блог

Я пытаюсь уменьшить margin-top значение при прокрутке, поскольку я использую панель объявлений, которая исчезает при прокрутке.

Вот скрипт с CSS, который я сейчас использую, все это в теме.жидкий файл (я использую 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 .

На интерфейсе это происходит прямо сейчас:

Это происходит при прокрутке:

Любая помощь приветствуется! Заранее спасибо.

похоже, что ваш jQuery работает просто отлично, новый класс добавляется к изображению после scrollTop того, как значение превышает 50.

Ваша проблема связана со спецификой CSS, добавьте идентификатор в новый набор правил класса следующим образом:

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

Вот отличная статья 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>