Question

如何使元素变粘，使其保持在视口的顶部？我希望元素保持粘性，即使它离开它的容器。

我试过这个

HTML

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

CSS

.child-sticky {
  position:sticky;
  top:20px;
}

.page {
  height: 3000px;
}

这是用来说明问题的笔。向下滚动以查看我的意思。

https://codepen.io/pwkip/pen/OxeMao

Answer 1

Sticky以这种方式工作，相对于其父级，它将保持sticky。您需要使用fixed。 Check this codepen

Answer 2

早在7个月前，我发现了一个仅限CSS的解决方案如果您想要粘贴的元素是其父级的最后一个，那么它非常简单：只需给出父元素{{1并且还给它position: sticky;，具体取决于最后一个元素之前的元素的高度。

top: -xx;

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

Answer 3

基于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 4

就像提到的那样，粘性就是这样。但是，您可以使用CSS hack。

免责声明

这是一个丑陋的骇客，以下内容可能会造成很多问题。因此，我不建议在大多数情况下使用它。话虽如此...

负保证金黑客

有一个黑客可以玩，包括负利润。如果您扩展容器的高度，然后给它一个负的底边距，它至少可以“视觉上离开”容器。我更改了您的代码，并创建了一个JSFiddle进行演示。

HTML

<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>

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;
}

Introduction to terminal multiplexers - Part 2

Answer 5

这就是position：sticky的工作方式。如果您需要它也可以在父级之外工作，那么您必须更改HTML结构。

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

位置：粘不离开父母

5 个答案: