jQuery scrollTop анимировать

Question

css

.head { 
  width: 100%;
  left: 0px;
  top: 0px;
  height: 76px;
  border-bottom: 1px solid #e6e6e6;
  position: fixed;
  display: flex;
  background: #fff;
  z-index: 10;
 }

Javascript

$(window).scroll(function () {
  const height = $(document).scrollTop();
  console.log(height);
  if (height > 0) {
    console.log("no 0");
    $("#tt-body-index .head").animate(
      {
        marginTop: 0,
      },
      1000,
      "swing"
    );
  } else if (height === 0) {
    console.log("0");
    $("#tt-body-index .head").animate(
      {
        marginTop: -76,
      },
      1000,
      "swing"
    );
  }
});

Я пишу сценарий, используя jQuery. Когда начинается прокрутка, появляется .head и пытается заставить scrollTop 0 исчезнуть. .head появляется хорошо, но когда scrollTop равен нулю, он не становится marginTop: -76.

Answer 1

По возможности используйте переходы и анимацию CSS, что более плавно по сравнению с анимацией jquery. Это можно сделать с помощью css перехода, проверьте приведенный ниже код. Кроме того, вам нужно запустить прокрутку при загрузке страницы в случае, если браузер прокручивает страницу в какую-то часть из кеша.

CSS

.head { 
    width: 100%;
    left: 0px;
    top: -80px;
    height: 76px;
    border-bottom: 1px solid #e6e6e6;
    position: fixed;
    display: flex;
    background: #fff;
    z-index: 10;
    background-color: aqua;
    transition: top 1s;
}
body.showHeader .head{
    top: 0px;
}

Javascript

$(window).scroll(function () {
    const height = $(document).scrollTop();
    console.log(height);
    if (height < 76) {                    
        $('body').removeClass('showHeader')
    } else  {
        $('body').addClass('showHeader')
    }
}).scroll();