如何将transitions与css postions一起使用

Question

我正在尝试用CSS和javascript创建一个粘性导航栏。如果用户滚动位置是200或更大，我将导航栏位置更改为固定。但当我们滚动时，位置确实会改变，但这就像一个突然的变化。

我怎样才能把它弄平？

这是我的代码

const App = (function() {
function loadEventListeners() {
window.addEventListener('scroll', showStickyNav)
}
function showStickyNav() {
const navbar = document.querySelector('#main-nav')
window.scrollY >= 200 ? navbar.classList.add('sticky') : navbar.classList.remove('sticky')
}
return {
init() {
loadEventListeners()
}
}
})()

.sticky {
position: sticky;
top: 0;
z-index: 10;
}

#main-nav {
background: #181d2f;
}

<nav id="main-nav">
<div class="container">
<div class="menu-wrap">
<div class="menu-center">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="#">Listings</a></li>
<li>
<a href="#">Products <i class="fas fa-chevron-down"></i></a>
</li>
<li><a href="#">Be A Vendor</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</nav>

Answer 1

我不知道你的用例是什么，但我觉得你在寻找使用导航栏的sticky位置属性，因为你希望它是relative，直到它溢出，然后变成fixed

这很简单，您只需要在navbar元素中使用position: sticky;和top属性。更多关于这里

编辑：顺便说一句，也许有人认为我没有帮助你，但我试图让你思考你的方法是否正确，或者你只是想做一些已经内置的事情。有点打破常规，而不是给予"；做这个和那个"复制粘贴这个"；，等答案。：(

Answer 2

如果你已经在使用javascript来应用固定位置，你也可以用一些可动画化的特性来让它变得更加灵活(列表可以通过mozilla在这里找到：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)添加一个类，并在它使用css转换变得粘稠时调整高度或字体大小。也就是说，使用粘性属性代替js会得到一些好的结果。