Question

我正在尝试在div（而不是整个页面）中定位一个固定元素。

我希望导航（deadspin，gawer，awl，other）在写入部分内被修复，这样即使用户滚动，导航仍然存在。但目前它已针对整个页面进行修复。

正如您在我的测试页面上看到的那样，导航按照我希望的方式进行修复： http://violetoeuvre.com/scroll.html

我尝试了＃position-box-links的位置：相对/固定，但这没有帮助。

CSS：

    .home_writing {
    display: block;
    position: relative;
    background: rgba(50,50,50,0);
    height: 1000px;
    text-align: left;
}

#small-box-container {
        border: 1px solid black;
        background: rgba(10,200,10,0);
        width: 980px;
        height: 800px;
        overflow: auto;
    }

 #small-box-links{
    position: relative;
    margin-left: 700px;
    height: 25px;
    margin-top: 10px;
 }

HTML：

<div id="small-box-container">
        <div id="small-box-links">
            <a href="#small-box1" class="top_link_style">deadspin |</a>
            <a href="#small-box2" class="top_link_style">gawker |</a>
            <a href="#small-box3" class="top_link_style">the awl |</a>
            <a href="#small-box4" class="top_link_style">other</a>
        </div>
    <div style='overflow:hidden; width:980px;'>
        <div style='overflow:scroll; width:988px'>
            <div id="small-box1" class="small-box"><h2>deadspin</h2>
                <h3>How Pat Summitt Ruined The Best Thing About Women's Basketball</h3>

ETC. for the other boxes.

我发现了这个相关的问题/答案：

Fix an Element to a position within a parent scrollable Div

...然而当我尝试上/下等时，元素仍然固定在页面上，而不是写入div。（我尝试制作父元素，.home_writing，亲戚，但这不能解决我的问题。）

（另一方面，我无法弄清楚为什么我的Playfair在段落中看起来不像侧边栏导航。它的风格也是一样的。）

Answer 1

position:fixed始终使用视口作为参考框架，因此您无法在此处使用它。

但解决方案相当简单 - 使用position:absolute代替将导航定位在具有position:relative（和固定高度）的容器元素中，然后将内容作为该容器内的兄弟此外，该元素的固定高度和overflow:auto：

<div style="position:relative; height:800px;">
  <div style="position:absolute; top:0; …"> [link link link] </div>
  <div style="height:800px; overflow:auto;">
    Lorem ipsum, dolor sit …
  </div>
</div>

div中的固定和相对元素 - Jquery滚动

1 个答案: