Question

我想知道是否有人为此找到了解决方案？

我正在寻找将元素附加到滚动容器顶部的解决方案

HTML：

<div class="container">
  <div class="header">title</div>
  <div class="element">......</div>
  ... (about 10-20 elements) ...
  <div class="element">......</div> 
</div>

所有“元素”都有position:relative，

容器具有以下CSS：

.container {
  position:relative;
  width:200px;
  height:400px;
  overflow-y:scroll;
}

我希望标题保持在容器的顶部，独立于其滚动位置和在其下滚动的元素。

到目前为止的CSS：

.header {
  position:absolute; /* scrolling out of view :-( */
  z-index:2;
  background-color:#fff;
}
.element{
  position: relative;
}

所有元素都是块元素，我无法将标题移到容器外部。在这一点上，jquery是没有选择的。

Answer 1

我认为您的解决方案通过了position:sticky。看起来像position:fixed，但尊重与父母的相对位置。

不幸的是，这是一个实验性功能，仅在Chromium中受支持。您可以在this test page。

中查看更多详细信息

我想到的纯css解决方案是标记的一点变化。您只能为“元素”设置容器，如下所示：

<div class="cont_elements">
      <div class="element">......</div>
      .....
</div>

将溢出物交给这个内部容器。现在，你的标题贴在最上面。

Here's a working demo

Answer 2

jQuery UI为此添加了一个position()实用程序方法，可以让您的生活更轻松。

$( "#someElement" ).position({
    of:  //Element to position against,
    my:  //which position on the element being positioned,
    at:  //which position on the target element eg: horizontal/vertical,
    offset:  // left-top values to the calculated position, eg. "50 50"
});

绝对帮助过我。

Answer 3

在这种情况下，解决方案是在滚动元素之外弹出标题：

<div class="header">title</div>
<div class="container">
    <div class="element">......</div>
    <div class="element">......</div>
</div>

虽然你可能应该有更好的语义元素（只是在这里猜测）：

<h3>title</h3>
<ul>
    <li>......</li>
    <li>......</li>
</ul>

Answer 4

有关此解决方案的最佳答案是此链接How to fixed scroll div after certain height and stop after reach other div? 我希望这可以节省一些谷歌搜索时间

    var navWrap = $('#navWrap'),
        nav = $('nav'),
        startPosition = navWrap.offset().top,
        stopPosition = $('#stopHere').offset().top - nav.outerHeight();
    
    $(document).scroll(function () {
        //stick nav to top of page
        var y = $(this).scrollTop()
        
        if (y > startPosition) {
            nav.addClass('sticky');
            if (y > stopPosition) {
                nav.css('top', stopPosition - y);
            } else {
                nav.css('top', 0);
            }
        } else {
            nav.removeClass('sticky');
        } 
    });

body {
    height:1600px;
    margin:0;
}
#navWrap {
    height:70px
}
nav {
    height: 70px;
    background:gray;
}
.sticky {
    position: fixed;
    top:0;
}

h1 {
    margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit morb,o vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>
<div id="navWrap">
    <nav>
         <h1>I stick to the top when you scroll down and unstick when you scroll up to my original position</h1>
    </nav>
</div>

<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit morb,o vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>
<br>
<div id="stopHere">
<h3 style="color:red">I want it stop fixed scrolling here. If I'm back to scrolling up, It will follow also to original position.</h3>
</div>
<br>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit morb,o vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit morb,o vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit morb,o vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>

Answer 5

这是我使用position: sticky想到的解决方案（不幸的是没有IE）：

https://codepen.io/waterplea/pen/JjjMXzR

这个想法是在滚动容器的顶部有一个0高度的粘性容器，因此它会粘住但不会将任何内容推入下面，然后将您的内容绝对放置在其中。这样，您就可以拥有宽度，但没有高度，因此只能像我在示例中对按钮所做的那样，从顶部定位一些东西。

Answer 6

使用粘性绝对有效！

父容器：位置：相对；子容器：位置：粘性（固定在页面上）

Answer 7

用容器包裹要滚动的元素：height: 100%; overflow: scroll。

将滚动容器和标题放在另一个具有固定高度的容器内。

然后 position: absolute 外部容器内的标题。

.scroll-container {
  height: 100%;
  overflow-y: scroll;
}

.outer-container {
  position: relative;
  width: 200px;
  height: 200px;
}

.header {
  position: absolute; /* relative to outer container */
  background-color: pink;
  width: 100%;
  z-index: 2;
}

.element {
  position: relative;
  background-color: gold;
}

<div class="outer-container">
  <div class="header">title</div>
  <div class="scroll-container">
    <div class="element">......</div>
    <div class="element">......</div> 
    <div class="element">......</div> 
    <div class="element">......</div> 
    <div class="element">......</div> 
    <div class="element">......</div> 
    <div class="element">......</div> 
    <div class="element">......</div> 
    <div class="element">......</div> 
    <div class="element">......</div>
    <div class="element">......</div>
    <div class="element">......</div>
    <div class="element">......</div>
    <div class="element">......</div> 
    <div class="element">......</div> 
    <div class="element">......</div> 
    <div class="element">......</div> 
    <div class="element">......</div> 
    <div class="element">......</div> 
    <div class="element">......</div> 
    <div class="element">......</div> 
    <div class="element">......</div>
    <div class="element">......</div>
    <div class="element">......</div>
  </div>
</div>

CSS位置元素在滚动容器内“固定”

7 个答案: