粘贴动画导航栏一旦滚过某一点

Question

一旦用户滚过某个部分，我会尝试将动画导航栏粘贴到页面顶部。 （这里有很多例子，但我无法做任何工作）。

我想在不使用bootstrap的情况下添加javascript，而不会使其与现有的onscroll动画冲突，并且不将整个页面嵌套在该navbar自己的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选择器class ExtrasPreviewClass { public string ExtrasName { get; set; } public CheckBox ExtrasCheckBox { get; set; } } 是导致此问题的原因。主要问题是它将导航的内部div设置为相对。只需将您的css选择器更改为以下内容即可解决您的问题：

.animate-top

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

希望这会有所帮助。欢呼声。