41

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

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

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 在这一点上是没有选择的。

4

7 回答 7

31

我认为您的解决方案通过position:sticky. 好像是这样position:fixed，但尊重他父母的相对位置。

不幸的是，这是一个实验性功能，仅在 Chromium 中受支持。您可以在此测试页面中查看更多详细信息。

我想到的纯 css 解决方案是对标记稍作改动。您只能为“元素”设置容器，如下所示：

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

并给这个内部容器溢出。现在，您的标题位于顶部。

这是一个工作演示。

于 2013-06-27T06:48:46.717 回答
6

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

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

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

编辑：找到一种方法使其具有 100% 的高度，而不是使用浮动推送下面的内容。更新了代码笔。calc(100% - 1px)由于 Firefox 中的这个错误而不得不使用： https ://bugzilla.mozilla.org/show_bug.cgi?id=1612561

于 2019-11-01T18:02:29.670 回答
4

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

<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>
于 2012-06-29T13:15:29.130 回答
4

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

绝对帮助了我。

于 2012-06-29T13:16:17.703 回答
1

用容器包裹要滚动的元素：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>

于 2021-06-23T13:45:23.210 回答
0

对于这种解决方案，您将找到的最佳答案来自此链接如何在特定高度后固定滚动 div 并在到达其他 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>

于 2018-07-25T18:35:07.790 回答
0

使用粘性。绝对有效！

父容器：

position:relative;

子容器：

position: sticky; // fixed on the page
于 2021-05-26T23:01:38.170 回答