位置:粘性不离开父母

Question

如何使元素具有粘性，使其保持在视口的顶部？我希望该元素即使离开容器也能保持粘性。

我试过这个：

.child-sticky {
  height: 200px;
  background: #333366;
  position:sticky;
  top:20px;
  color:#ffffff;
}
.parent {
  background: #555599;
}
.child {
  background-color: #8888bb;
}
.page {
  height: 3000px;
  background: #999999;
  width: 500px;
  margin: 0 auto;
}
div {
  padding: 20px;
}

<div class="page">
  <div class="parent">
    <div class="child"><p>...<br>...<br>...<br>...<br>...</p></div>
    <div class="child-sticky">
      <p>i want to be sticky, even when I'm outside my parent.</p>
    </div>
    <div class="child"><p>...<br>...<br>...<br>...<br>...</p></div>
    <div class="child"><p>...<br>...<br>...<br>...<br>...</p></div>
  </div>
</div>

Answer 1

粘性以这种方式工作，它将保持相对于其父级的sticky。您需要使用 fixed .检查此代码笔

Answer 2

已经在 7 个月前了，但是如果您要粘性的元素是其父元素的最后一个，我找到了唯一的 CSS 解决方案，这很简单：只需给父元素position: sticky;并给它top: -xx;，具体取决于最后一个元素之前元素的高度。

#parent {
  position: -webkit-sticky;
  position: sticky;
  top: -3em;
}
#some_content {
  height: 3em;
}
#sticky {
  background-color: red;
}
#space {
  height: 200vh;
}

<div id="parent">
  <div id="some_content">Some Content</div>
  <div id="sticky">Sticky div</div>
</div>
<div id="space"></div>
<p>Scroll here</p>

Answer 3

这就是位置：粘性的工作原理。如果你也需要它在父级之外工作，你必须改变HTML结构。

另见官方定义：https://www.w3.org/TR/css-position-3/#sticky-pos

Answer 4

你可以尝试一个小技巧。在某些情况下，它会破坏您的布局，而在其他情况下则不会。就我而言，我有一个带有一些按钮的标题，但是当我向下滚动时，我想访问该单行标题内的一些操作按钮。唯一的更改是将父项的 display 属性设置为 inline 。

.parent {
  display: inline;
}

Answer 5

基于 https://stackoverflow.com/a/46913147/2603230 和 https：//stackoverflow.com/a/37797978/2603230 的代码，下面是一个不需要硬编码高度的组合解决方案。

$(document).ready(function() {
    // Get the current top location of the nav bar.
    var stickyNavTop = $('nav').offset().top;
  
    // Set the header's height to its current height in CSS
    // If we don't do this, the content will jump suddenly when passing through stickyNavTop.
    $('header').height($('header').height());
  
    $(window).scroll(function(){
        if ($(window).scrollTop() >= stickyNavTop) {
            $('nav').addClass('fixed-header');
        } else {
            $('nav').removeClass('fixed-header');
        }
    });
});

body { margin: 0px; padding: 0px; }
nav {
    width: 100%;
    background-color: red;
}
.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <div>
    <h1 style="padding-bottom: 50px; background-color: blue;">
    Hello World!
    </h1>
  </div>
  <nav>
    A nav bar here!
  </nav>
</header>
<main style="height: 1000px;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</main>

Answer 6

如前所述，粘性就是这样工作的。但是，您可以使用CSS黑客

。

免責聲明

这是一个丑陋的黑客，可能会给以下内容带来很多问题。所以我不建议在大多数用例中使用它。话虽如此...

负保证金黑客

您可以使用一个技巧，包括负保证金。如果您扩展容器的高度，然后给它一些负的下边距，它至少可以"视觉上离开"容器。

.child-sticky {
  height: 200px;
  background: #333366;
  position:sticky;
  top:20px;
  color:#ffffff;
}
.parent {
  height: 1250px;
  background: #555599;
  margin-bottom: -500px;
}
.following-content {
  background: red;
  height:500px;
}
.child {
  background-color: #8888bb;
}
.page {
  height: 3000px;
  background: #999999;
  width: 500px;
  margin: 0 auto;
}
div {
  padding: 20px;
}

<div class="page">
  <div class="parent">
    <div class="child"><p>...<br>...<br>...<br>...<br>...</p></div>
    <div class="child-sticky">
      <p>i want to be sticky, even when I'm outside my parent.</p>
    </div>
    <div class="child"><p>...<br>...<br>...<br>...<br>...</p></div>
    <div class="child"><p>...<br>...<br>...<br>...<br>...</p></div>
  </div>
  <div class="following-content">
  </div>
</div>