粘性标题平滑向下滚动答案

【问题标题】：sticky header smoothing scroll down粘性标题平滑向下滚动
【发布时间】：2018-10-11 11:52:00
【问题描述】：

我正在创建一个粘性标题，它工作正常，但是当有人向下滚动页面跳跃一些像素并且没有平滑度时，我的问题是“跳跃”。我发现了一些类似的主题，但我无法使其适用于我的网站，

var navbar = document.getElementById("my_header");
var sticky = navbar.offsetTop;
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

window.onscroll = function() {myFunction()};

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index:999;
  padding:18px 0 0 0;
  -webkit-transition: all 1.3s;
  -moz-transition: all 1.3s;
  -ms-transition: all 1.3s;
  -o-transition: all 1.3s;
  transition: all 1.3s; 
    opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 0.75s;
}

@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div id="topnavbar"></div>
<div id="my_header" style="width:1150px; background: #181818;">   
  <div style="width: 100%;margin: -18px auto 0; padding: 0;"> 
    <div id="header"></div>
  </div>
</div>
<div id="content"> ... </div>

您也可以在 JSFIDDLE 找到演示。

我的网站是oipeirates.tv

提前谢谢你。

【问题讨论】：

标签： javascript html css wordpress

【解决方案1】：

检查this这是一个现成的解决方案:)

【讨论】：

【解决方案2】：

让我们摆脱这种不必要的过渡。你想达到这个效果吗？

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index:999;
  padding:18px 0 0 0;
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 0.75s; 
}
 @keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

http://jsfiddle.net/oipeirates/y41f98dg/39/

【讨论】：

我没有问题删除过渡或动画我只是想让它平滑而没有跳跃。但我完全倾斜我尝试了这么多天，我不能这样做：/

【解决方案3】：

指定您想要动画的内容，将transition: all 1.3s; 更改为transition: opacity 1.3s;。现在padding:18px 0 0 0;将不会被动画化，并且会阻止sticky header的跳跃行为。

JSFiddle : http://jsfiddle.net/y41f98dg/54/

【讨论】：

【解决方案4】：

我没有问题来删除过渡或动画，我只是想让它平滑而没有跳跃。但我完全倾斜我尝试了这么多天，我不能这样做：/

【讨论】：