html - 一旦滚动到某个点，就会粘上一个动画导航栏

Question

一旦用户滚动到某个部分，我就会尝试将动画导航栏粘贴到页面顶部。 (这里有很多例子，但我做不出来)。

我想在不使用 bootstrap 的情况下添加 javascript，不让它与现有的滚动动画冲突，也不将整个页面嵌套在该导航栏自己的 div 中。

我是使用 Javascript 还是有 CSS 的方法？

https://jsfiddle.net/p9xfy79x/2/

window.onscroll = function() {
  myFunction()
};
function myFunction() {
  var navbar = document.getElementById("myNavbar");
  if (document.body.scrollTop > 85 || document.documentElement.scrollTop > 100) {
    navbar.className = " bar" + " card" + " animate-top" + " white";
  } else {
    navbar.className = navbar.className.replace(" card animate-top white", "");
  }
}

Answer 1

您的 CSS 选择器 .animate-top 是造成此处问题的原因。主要问题是它将导航的内部 div 设置为相对。只需将您的 css 选择器更改为以下内容，它应该可以解决您的问题:

.animate-top {
  position: fixed;
  top:0;
  animation: animatetop 0.4s
}

这里的工作示例:https://jsfiddle.net/7ze2fukk/

希望这对您有所帮助。干杯。