具有绝对定位的粘性顶部div

问题描述 投票：0回答：10

我使用绝对定位让 div 填满整个浏览器窗口。但是，我不想将其与有时存在有时不存在的粘性 div 结合起来。

为了让事情更清楚一点，请查看这个 jsFiddle：http://jsfiddle.net/henrikandersson/aDdRS/

我希望“顶部”、“左侧”和“副标题”始终保持在原来的位置。 我还希望“内容”div 填充窗口的剩余内容。 但是，有时我想在“内容”之前显示“警报”div。 到目前为止一切顺利，正如您在 jsFiddle 中看到的那样。但是，我希望“警报”坚持“副标题”并在滚动时停留在那里。正如您所看到的，如果调整窗口大小，“警报”现在将与“内容”一起滚动 - 我不希望这样。

有人知道如何解决这个问题吗？

编辑： 我对 jsFiddle 进行了更改，将“警报”放置在它应该在的位置（在子标题和内容区域之间）。正如您所看到的（http://jsfiddle.net/henrikandersson/aDdRS/12），它不会将“内容区域”向下推，因为内容区域的顶部：20px。例如，我无法设置 top:40px，因为“alert”应该能够改变高度，并且我希望内容区域具有相同的 css，无论是否有上面的警报。

编辑#2： 这个问题涉及同样的问题，但该问题也没有解决方案。似乎不使用 JavaScript 是不可能的： 可变高度滚动div，相对于可变高度同级定位

css positioning css-position sticky
10个回答
74
投票

2018-6-18

我用

position: sticky
选择CSS方式。

那个 https://github.com/abouolia/sticky-sidebar .
对我不起作用（我正在使用带有 vue-router 和 vuex 的 Vue.js 2.0 SPA）

我也想要元素

position: absolute
，
然后
position: sticky

解决方案

  1. 父 HTML 元素使用 
    position: absolute
    来获得正确的位置。

（不要忘记为父级设置

height
。例如
height:100%
）

  1. 子 HTML 元素 
    position: sticky

为我工作。

24
投票

位置：固定 是绝对和粘性的组合

5
投票

使用浮动：向左；和宽度：0;并且您可以使用变换：translateX(xxx);用于设置左侧位置。

问题解决了:)

5
投票

编辑
更新并进行了一些增强功能

body {
    height: 100%;
    overflow: hidden;
}
#top{
    position: absolute;
    background: yellow;
    height: 50px;
    width: 100%;
    top: 0;
}
#left {
    background: #e3e3e3;
    position: absolute;
    bottom: 0;
    left: 0;
    top: 50px;
    width: 200px;
}

#right {
    position: absolute;
    bottom: 0;
    left: 200px;
    right: 0;
    top: 50px;
}
#sub-header {
    height: 20px;
    background: orange;
}
#content-area {
    position: absolute;
    top: 20px;
    right: 0;
    bottom: 0;
    left: 0;
}
#alert {
    background: red;
    color: white;

}
#content {
    width: 100%;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    overflow-y: auto;
    position: absolute;
}
#alert + #content {
    top: 20px;
}
#alert:empty + #content {
    top: 0px;
}
<body>
<div class="container">
    <div id="top">top</div>
    <div id="left">left</div>
    <div id="right">
        <div id="sub-header">subheader</div>
        <div id="content-area">
            <div id="alert">alert!</div>
            <div id="content">content<br /><br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget nunc magna, eget vehicula ligula. Vestibulum in massa massa, ut feugiat arcu. Suspendisse feugiat commodo tellus, id aliquam dolor cursus eu. Aliquam erat volutpat. Nulla interdum ipsum ut lectus sollicitudin blandit sodales ante malesuada. Etiam ac neque ut turpis faucibus luctus non et arcu. Maecenas ut risus ut odio fringilla sagittis. Sed nulla lorem, suscipit at condimentum quis, adipiscing eget turpis. Morbi accumsan est at tellus hendrerit sed blandit nibh sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent gravida, velit id sodales bibendum, nulla leo rutrum quam, vel tempus justo mi vitae sapien. In imperdiet blandit rhoncus. Phasellus at massa nulla, ut tincidunt est. Nam viverra dui non enim semper consequat. Etiam sed libero sed ante condimentum bibendum ultrices eu nunc.

Integer massa nibh, interdum eget consectetur sed, scelerisque a ipsum. Fusce et ligula erat. Vestibulum lacus enim, facilisis id sollicitudin non, condimentum eu sem. Donec quis magna nec massa vulputate hendrerit. Nam leo nulla, fermentum eu congue quis, imperdiet sit amet orci. Aliquam ornare felis commodo est rhoncus blandit. Quisque at neque ac turpis vulputate sagittis. Donec et viverra risus. Fusce posuere lacus aliquam erat molestie sed tincidunt elit placerat. Sed pulvinar varius neque. Nullam congue adipiscing quam egestas convallis. Sed molestie massa euismod dolor facilisis laoreet.

Cras sit amet nisi sapien, non fringilla arcu. Aenean euismod gravida sem. Donec eu luctus justo. Aliquam erat volutpat. Mauris vestibulum sagittis magna, eget bibendum dolor tempor nec. Nunc rhoncus suscipit felis eu imperdiet. Sed fermentum diam non turpis tempor sit amet adipiscing leo elementum. Donec aliquam consequat elit id auctor.

Praesent vehicula, nibh a elementum imperdiet, urna nulla iaculis leo, ac hendrerit sem massa ac tortor. Suspendisse viverra consectetur libero a luctus. Maecenas iaculis mi id urna fermentum condimentum viverra tellus vulputate. Suspendisse potenti. Aliquam fermentum nulla quis dolor commodo scelerisque. Donec cursus laoreet consectetur. Praesent ultricies arcu ut ante hendrerit imperdiet. Etiam at metus lectus. Aliquam ut ligula neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec auctor scelerisque purus non sollicitudin. Sed elementum facilisis nisl, eget commodo est congue in. Etiam tincidunt viverra felis, vel tincidunt nulla pretium vel. Phasellus commodo bibendum magna et imperdiet. Aenean euismod condimentum magna eget venenatis. Pellentesque lorem eros, ornare at egestas vel, tincidunt non nunc. Quisque non diam nisl, ut consectetur metus. Fusce ipsum tortor, viverra et lobortis et, ullamcorper non magna. Duis elementum molestie sem, et ullamcorper neque eleifend non. Nunc iaculis quam eros, in pellentesque nunc. Donec tincidunt faucibus est, porta cursus eros imperdiet volutpat.</div>
        </div>
    </div>
    
</div>
<body>

第一篇文章
为什么不只滚动 

.content
而不是 
.content-area

body {
    height: 100%;
    overflow: hidden;
}
#top{
    position: absolute;
    background: yellow;
    height: 50px;
    width: 100%;
    top: 0;
}
#left {
    background: #e3e3e3;
    position: absolute;
    bottom: 0;
    left: 0;
    top: 50px;
    width: 200px;
}

#right {
    position: absolute;
    bottom: 0;
    left: 200px;
    right: 0;
    top: 50px;
}
#sub-header {
    height: 20px;
    background: orange;
}
#content-area {
    position: absolute;
    top: 20px;
    right: 0;
    bottom: 0;
    left: 0;
}
#alert {
    background: red;
    color: white;

}
#content {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
<body>
<div class="container">
    <div id="top">top</div>
    <div id="left">left</div>
    <div id="right">
        <div id="sub-header">subheader</div>
        <div id="content-area">
            <div id="alert">alert!</div>
            <div id="content">content<br /><br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget nunc magna, eget vehicula ligula. Vestibulum in massa massa, ut feugiat arcu. Suspendisse feugiat commodo tellus, id aliquam dolor cursus eu. Aliquam erat volutpat. Nulla interdum ipsum ut lectus sollicitudin blandit sodales ante malesuada. Etiam ac neque ut turpis faucibus luctus non et arcu. Maecenas ut risus ut odio fringilla sagittis. Sed nulla lorem, suscipit at condimentum quis, adipiscing eget turpis. Morbi accumsan est at tellus hendrerit sed blandit nibh sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent gravida, velit id sodales bibendum, nulla leo rutrum quam, vel tempus justo mi vitae sapien. In imperdiet blandit rhoncus. Phasellus at massa nulla, ut tincidunt est. Nam viverra dui non enim semper consequat. Etiam sed libero sed ante condimentum bibendum ultrices eu nunc.

Integer massa nibh, interdum eget consectetur sed, scelerisque a ipsum. Fusce et ligula erat. Vestibulum lacus enim, facilisis id sollicitudin non, condimentum eu sem. Donec quis magna nec massa vulputate hendrerit. Nam leo nulla, fermentum eu congue quis, imperdiet sit amet orci. Aliquam ornare felis commodo est rhoncus blandit. Quisque at neque ac turpis vulputate sagittis. Donec et viverra risus. Fusce posuere lacus aliquam erat molestie sed tincidunt elit placerat. Sed pulvinar varius neque. Nullam congue adipiscing quam egestas convallis. Sed molestie massa euismod dolor facilisis laoreet.

Cras sit amet nisi sapien, non fringilla arcu. Aenean euismod gravida sem. Donec eu luctus justo. Aliquam erat volutpat. Mauris vestibulum sagittis magna, eget bibendum dolor tempor nec. Nunc rhoncus suscipit felis eu imperdiet. Sed fermentum diam non turpis tempor sit amet adipiscing leo elementum. Donec aliquam consequat elit id auctor.

Praesent vehicula, nibh a elementum imperdiet, urna nulla iaculis leo, ac hendrerit sem massa ac tortor. Suspendisse viverra consectetur libero a luctus. Maecenas iaculis mi id urna fermentum condimentum viverra tellus vulputate. Suspendisse potenti. Aliquam fermentum nulla quis dolor commodo scelerisque. Donec cursus laoreet consectetur. Praesent ultricies arcu ut ante hendrerit imperdiet. Etiam at metus lectus. Aliquam ut ligula neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec auctor scelerisque purus non sollicitudin. Sed elementum facilisis nisl, eget commodo est congue in. Etiam tincidunt viverra felis, vel tincidunt nulla pretium vel. Phasellus commodo bibendum magna et imperdiet. Aenean euismod condimentum magna eget venenatis. Pellentesque lorem eros, ornare at egestas vel, tincidunt non nunc. Quisque non diam nisl, ut consectetur metus. Fusce ipsum tortor, viverra et lobortis et, ullamcorper non magna. Duis elementum molestie sem, et ullamcorper neque eleifend non. Nunc iaculis quam eros, in pellentesque nunc. Donec tincidunt faucibus est, porta cursus eros imperdiet volutpat.</div>
        </div>
    </div>
    
</div>
<body>

2
投票
  • 将固定高度和宽度 100% 添加到警报 + 位置：固定
  • 向内容添加 padding-top
  • 唯一的缺点当然是如果没有警报的话需要额外的填充......

参见 http://jsfiddle.net/aDdRS/5/

2
投票

警报随内容滚动，因为它位于具有 

overflow-y: auto
的内容区域内。

将其移出内容区域（将其放在副标题和内容区域之间），并从内容中删除 

position: absolute
（以及上/左/右/下）属性。在该示例中，我认为内容没有理由绝对定位，正常流程会将其放置在它想要的位置。

0
投票

我最终选择了使用 JavaScript 方法。我本来更喜欢纯 CSS 方法，但我对 IE8 支持的需求阻碍了我。迈尔斯·格雷的这个答案几乎就是我所做的 - https://stackoverflow.com/a/4933509/940517

0
投票

粘性+绝对无父级：

html,
body {
  height: 250vh;
  color: #fff;
  position: relative;
}

.child {
  margin: 100px auto -100px;
  height: 100px;
  width: 200px;
  background-color: firebrick;
  position: sticky;
  top: 50px;
  padding: 10px;
}
<div class="child">Hi, I'm sticky AND absolutely positioned!</div>

0
投票

您可以将位置保持为绝对，然后创建一个名为“background-attachment”的新属性，然后将其设置为“固定”。 这使您能够在同一父元素中拥有两个元素。

0
投票

将 Sticky 的高度设置为 0px 并溢出内部子元素。

<div class="sticky">
  <div class="contents"></div>
</div>

.sticky{
  position:sticky;
  height:0;
  overflow:visible;
}

.contents{
  position:relative; // Or absolute if you need.
  width:100px;
  height:100px;
  background:yellow;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.