Question

我正在创建一个粘性标头，它可以正常工作，但是当有人向下滚动页面跳跃一些像素并且没有平滑度时，我的问题就出在“跳转”上。我找到了一些类似的主题，但是无法使其在我的网站上正常工作

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

谢谢。

Answer 1

检查this，这是一个现成的解决方案：）

Answer 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/

Answer 3

指定要设置动画的内容，将transition: all 1.3s;更改为transition: opacity 1.3s;。现在，padding:18px 0 0 0;将不再具有动画效果，并且可以防止粘性标头的跳跃行为。

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

Answer 4

我没有问题要删除过渡或动画，我只想使其平滑而无跳跃。但是我完全倾斜了这么长时间，而我却无法做到这一点：/

粘性标头平滑向下滚动

4 个答案: