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

Question

我试图在用户滚动经过某个部分时将动画导航栏粘贴到页面顶部。（这里有很多例子，但是我做不出来）

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

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

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/

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

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

Sticky an animated navbar once scrolled past a certain point

html

css

sticky