我想让导航栏粘在视口的顶部一旦用户滚动页面,但它不工作,我不知道为什么。如果你可以帮助,这是我的HTML和CSS代码:

.container { min-height: 300vh; } .nav-selections { text-transform: uppercase; letter-spacing: 5px; font: 18px "lato",sans-serif; display: inline-block; text-decoration: none; color: white; padding: 18px; float: right; margin-left: 50px; transition: 1.5s; } .nav-selections:hover{ transition: 1.5s; color: black; } ul { background-color: #B79b58; overflow: auto; } li { list-style-type: none; } <main class="container"> <nav style="position: sticky; position: -webkit-sticky;"> <ul align="left"> <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li> <li><a href="#/about" class="nav-selections">About</a></li> <li><a href="#/products" class="nav-selections">Products</a></li> <li><a href="#" class="nav-selections">Home</a></li> </ul> </nav> </main>


当前回答

我使用了JS解决方案。它适用于Firefox和Chrome浏览器。有任何问题,请告诉我。

html

<body>
  <header id="header">
    <h1>Extra-Long Page Heading That Wraps</h1>
    <nav id="nav">
      <ul>
        <li><a href="" title="">Home</a></li>
        <li><a href="" title="">Page 2</a></li>
        <li><a href="" title="">Page 3</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <p><!-- ridiculously long content --></p>
  </main>
  <footer>
    <p>FOOTER CONTENT</p>
  </footer>
  <script src="navbar.js" type="text/javascript"></script>
</body>

css

nav a {
    background: #aaa;
    font-size: 1.2rem;
    text-decoration: none;
    padding: 10px;
}

nav a:hover {
    background: #bbb;
}

nav li {
    background: #aaa;
    padding: 10px 0;

}

nav ul  {
    background: #aaa;
    list-style-type: none;
    margin: 0;
    padding: 0;

}

@media (min-width: 768px) {

    nav ul {
        display: flex;
    }
}

js

function applyNavbarSticky() {
    let header = document.querySelector('body > header:first-child')
    let navbar = document.querySelector('nav')
    header.style.position = 'sticky'

    function setTop() {
        let headerHeight = header.clientHeight
        let navbarHeight = navbar.clientHeight
        let styleTop = navbarHeight - headerHeight

        header.style.top = `${styleTop}px`
    }

    setTop()

    window.onresize = function () {
        setTop()
    }
}

其他回答

检查祖先元素是否有溢出集(例如overflow:hidden);试着切换它。您可能需要检查DOM树的位置高于您的预期=)。

这可能会影响你的位置:粘在一个后代元素上。

有趣的时刻,我不明显:至少在Chrome 70的位置:粘是不适用的,如果你已经使用DevTools设置。

这是什么绊倒了我…我的粘性div是在另一个div,所以父div需要一些额外的内容后粘性div,使父div“足够高”的粘性div,以“滑过”其他内容,因为你向下滚动。

所以在我的情况下,在黏黏的div之后,我必须添加:

    %div{style:"height:600px;"} 
      &nbsp;

(我的应用程序有两个并排的div,左边是一个“高”图像,右边是一个短的数据输入表单,我希望当你向下滚动时,数据输入表单漂浮在图像旁边,这样表单就总是在屏幕上。它不会工作,直到我添加了上面的“额外内容”,这样粘性div就有东西可以“滑动”

我知道这是一个老帖子。但如果有人像我一样,最近才开始摆弄位置:粘性,这可能是有用的。

在我的例子中,我使用position: sticky作为网格项。它没有工作,问题是一个溢出x:隐藏在html元素。只要我删除了该属性,它就工作得很好。有溢出x:隐藏在身体元素似乎工作,但不知道为什么。

我知道这个问题似乎已经有了答案,但我遇到了一个具体的案例,我觉得大多数答案都没有抓住重点。

溢出:隐藏答案覆盖了90%的情况。这或多或少是“粘性导航”的情况。

但是粘性行为最好在容器高度内使用。想象一下,在你网站的右栏中,有一个新闻简报的形式,它可以随着页面向下滚动。 如果sticky元素是容器的唯一子元素,那么容器的大小是完全相同的,并且没有滚动的空间。

你的容器需要是你期望元素滚动的高度。在右列的情况下就是左列的高度。 实现这一点的最佳方法是在列上使用display:table-cell。如果你不能,并且像我一样被float:right困住了,你必须要么猜左列的高度,要么用Javascript计算它。