如何使用 Javascript 在网站上获得 Sticky header？

Question

尝试使用 javascript 将粘性 header 添加到我的网站上，但似乎没有用。

这里是html代码和javascript与这部分相关的代码：

<header>
    <a href="#" class="logo">Food<span>.</span></a>
    <ul class="navigation">
        <li><a href="#banner">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#menu">Menu</a></li>
        <li><a href="#expert">Expert</a></li>
        <li><a href="#testimonials">Testimonials</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</header>

<script type="text/javascript">
    window.addEventListener('scroll', function () {
        const header = document.querySelector('header');
        header.classList.toggle("sticky", window.scrollY > 0);
    });
</script>

这里是与置顶header相关的CSS：

header .sticky {
background: #fff;
padding: 10px 100px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

header .sticky .logo {
color: #111;
}

header .sticky .navigation li a {
color: #111;
}

请帮忙！

Answer 1

第 1 步。使用 header.sticky 代替 header .sticky（删除 space）

第2步.将以下样式添加到header.sticky

position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;

How TO - Sticky Element

如何使用 Javascript 在网站上获得 Sticky header？

How to get a Sticky header on website using Javascript?

javascript

sticky