我想让导航栏粘在视口的顶部一旦用户滚动页面,但它不工作,我不知道为什么。如果你可以帮助,这是我的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>


当前回答

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

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

其他回答

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

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

我使用了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()
    }
}

另一个position: sticky不能工作的常见场景是,如果它的父类有display: flex或display: grid。

在这种情况下发生的是粘性位置在工作,但你看不到它,因为元素被完全拉伸了。尝试使用align-self: baseline降低它的高度,你会看到效果。

我还遇到了一些事情:

当你的sticky元素是一个组件时(angular等)

如果“sticky”元素本身是一个带有自定义元素选择器的组件,比如一个名为<app-menu-bar>的angular组件,你需要在该组件的css中添加以下内容: :主机{显示:块;} //或使用flexbox

or

    app-menu-bar  { display: block; }   // (in the containing component's css)

Safari on iOS in particular seems to require `display:block` even on the root element `app-root` of an angular application or it won't stick.

If you are creating a component and defining the css inside the component (shadow DOM / encapsulated styles), make sure the position: sticky is being applied to the 'outer' selector (eg. app-menu-bar in devtools should show the sticky position) and not a top level div within the component. With Angular, this can be achieved with the :host selector in the css for your component. :host { position: sticky; display: block; // this is the same as shown above top: 0; background: red; }

其他

If the element following your sticky element has a solid background, you must add the following to stop it from sliding underneath: .sticky-element { z-index: 100; } .parent-of-sticky-element { position: relative; } Your sticky element must be before your content if using top and after it if using bottom. There are complications when using overflow: hidden on your wrapper element – in general it will kill the sticky element inside. Better explained in this question Mobile browsers may disable sticky/fixed positioned items when the onscreen keyboard is visible. I'm not sure of the exact rules (does anybody ever know) but when the keyboard is visible you're looking at a sort of 'window' into the window and you won't easily be able to get things to stick to the actual visible top of the screen. Make sure you have: position: sticky; and not display: sticky;

杂项可用性问题

Be cautious if your design calls for for sticking things to the bottom of the screen on mobile devices. On iPhone X for instance they display a narrow line to indicate the swipe region (to get back to the homepage) - and elements inside this region aren't clickable. So if you stick something there be sure to test on iPhone X that users can activate it. A big 'Buy Now' button is no good if people can't click it! If you're advertising on Facebook the webpage is displayed in a 'webview' control within Facebook's mobile apps. Especially when displaying video (where your content begins in the bottom half of the screen only) - they often completely mess up sticky elements by putting your page within a scrollable viewport that actually allows your sticky elements to disappear off the top of the page. Be sure to test in the context of an actual ad and not just in the phone's browser or even Facebook's browser which can all behave differently.

注意空网格区域!

在我的例子中,我有这样的东西:

.cart-areas {
    grid-template-columns: 2fr 0.2fr 1.5fr;
    grid-template-areas:
      'order . summary'
      'order . .'
      'order . .';
}

我希望当用户完成结帐表单时,总结网格项具有粘性。它没有工作,因为那些空的网格项(用。标记)。

解决方案是删除这些空项,如下所示:

.cart-areas {
    grid-template-columns: 2fr 0.2fr 1.5fr;
    grid-template-areas:
      'order . summary'
      'order . summary'
      'order . summary';
}