如何制作粘性元素 'float'
How to Make a sticky element 'float'
我 运行 遇到了一个奇怪的布局问题，想不出解决这个问题的方法。标题可能有点混乱，但让我展示一下代码。
#root-container {
display: flex;
}
#container1 {
width: 100px;
height: 500px;
background-color: grey;
}
#sticky-container {
width: 320px;
max-height: 500px;
position: relative;
background-color: lightgrey;
}
#sticky-container-header {
width: 320px;
height: 100px;
background-color: #2f4d92;
}
#full-height-content {
width: 100%;
height: 400px;
overflow-y: scroll;
background-color: #d67e23;
}
#sticky-content {
width: 80%;
height: 100px;
position: sticky;
bottom: 20px;
background-color: rgba(0,0,0,0.5);
}
#bottom {
width: 420px;
height: 100px;
background-color: purple;
}
<div id='root-container'>
<div id="container1"></div>
<div id="sticky-container">
<div id='sticky-container-header'></div>
<div id='full-height-content'>
Saw yet kindness too replying whatever marianne. Old sentiments resolution admiration unaffected its mrs literature. Behaviour new set existence dashwoods. It satisfied to mr commanded consisted disposing engrossed. Tall snug do of till on easy. Form not calm new fail.
His followed carriage proposal entrance directly had elegance. Greater for cottage gay parties natural. Remaining he furniture on he discourse suspected perpetual. Power dried her taken place day ought the. Four and our ham west miss. Education shameless who middleton agreement how. We in found world chief is at means weeks smile.
Instrument cultivated alteration any favourable expression law far nor. Both new like tore but year. An from mean on with when sing pain. Oh to as principles devonshire companions unsatiable an delightful. The ourselves suffering the sincerity. Inhabit her manners adapted age certain. Debating offended at branched striking be subjects.
Must you with him from him her were more. In eldest be it result should remark vanity square. Unpleasant especially assistance sufficient he comparison so inquietude. Branch one shy edward stairs turned has law wonder horses. Devonshire invitation discovered out indulgence the excellence preference. Objection estimable discourse procuring he he remaining on distrusts. Simplicity affronting inquietude for now sympathize age. She meant new their sex could defer child. An lose at quit to life do dull.
Surrounded affronting favourable no mr. Lain knew like half she yet joy. Be than dull as seen very shot. Attachment ye so am travelling estimating projecting is. Off fat address attacks his besides. Suitable settling mr attended no doubtful feelings. Any over for say bore such sold five but hung.
Lose john poor same it case do year we. Full how way even the sigh. Extremely nor furniture fat questions now provision incommode preserved. Our side fail find like now. Discovered travelling for insensible partiality unpleasing impossible she. Sudden up my excuse to suffer ladies though or. Bachelor possible marianne directly confined relation as on he.
Unpacked reserved sir offering bed judgment may and quitting speaking. Is do be improved raptures offering required in replying raillery. Stairs ladies friend by in mutual an no. Mr hence chief he cause. Whole no doors on hoped. Mile tell if help they ye full name.
Cultivated who resolution connection motionless did occasional. Journey promise if it colonel. Can all mirth abode nor hills added. Them men does for body pure. Far end not horses remain sister. Mr parish is to he answer roused piqued afford sussex. It abode words began enjoy years no do no. Tried spoil as heart visit blush or. Boy possible blessing sensible set but margaret interest. Off tears are day blind smile alone had.
Spot of come to ever hand as lady meet on. Delicate contempt received two yet advanced. Gentleman as belonging he commanded believing dejection in by. On no am winding chicken so behaved. Its preserved sex enjoyment new way behaviour. Him yet devonshire celebrated especially. Unfeeling one provision are smallness resembled repulsive.
Entire any had depend and figure winter. Change stairs and men likely wisdom new
</div>
<div id='sticky-content'></div>
</div>
</div>
<div id="bottom">
</div>
假设视口不够高，我们需要一直滚动到底部才能看到紫色块（bottom div）。
我想要的是：
当我们从上到下滚动时，紫色块还没有出现，t运行sparent 块粘在 o[=42 底部上方 20px =]ge块。这是用 position: sticky.
当紫色块开始出现时，阻止t运行sparent块向下移动，并保持在o[=42底部上方20px的位置=]ge 块，就好像它是一个浮动按钮。这失败了，因为粘性元素是 positioned according to the normal flow of the document。所以在这种情况下，当紫色块完全出现时，t运行sparent 块在 o运行ge 块底部下方 20px。
不知道有没有什么办法可以同时实现。如果我们能用 css 实现这一点就好了。但是简单的JS代码也是首选。谢谢！
一个想法是将粘性元素移动到容器的顶部而不是底部，并依靠负边距来避免它在顶部时的正常流动行为，然后在到达底部边缘时停止容器。
查看下面的评论以更好地理解。唯一的缺点是需要根据元素的高度手动设置一些值。您还会注意到顶部的值也需要根据屏幕尺寸手动设置以模拟底部粘性行为。
#root-container {
display: flex;
}
#container1 {
width: 100px;
height: 500px;
background-color: grey;
}
#sticky-container {
width: 320px;
max-height: 500px;
position: relative;
background-color: lightgrey;
}
#sticky-container-header {
width: 320px;
height: 100px;
background-color: #2f4d92;
}
#full-height-content {
width: 100%;
height: 400px;
overflow-y: scroll;
background-color: #d67e23;
margin-top:-20px; /*same as the margin-bottom*/
}
#sticky-content {
width: 80%;
height: 100px;
margin-top:-100px; /*same as height*/
margin-bottom:20px; /*to avoid going under the bottom:20px we want*/
position: sticky;
top:calc(100vh - 100px - 20px);
background-color: rgba(0,0,0,0.5);
}
#bottom {
width: 420px;
height: 100px;
background-color: purple;
}
body {
margin:0;
}
<div id='root-container'>
<div id="container1"></div>
<div id="sticky-container">
<div id='sticky-container-header'></div>
<div id='sticky-content'></div>
<div id='full-height-content'>
Saw yet kindness too replying whatever marianne. Old sentiments resolution admiration unaffected its mrs literature. Behaviour new set existence dashwoods. It satisfied to mr commanded consisted disposing engrossed. Tall snug do of till on easy. Form not calm new fail.
His followed carriage proposal entrance directly had elegance. Greater for cottage gay parties natural. Remaining he furniture on he discourse suspected perpetual. Power dried her taken place day ought the. Four and our ham west miss. Education shameless who middleton agreement how. We in found world chief is at means weeks smile.
Instrument cultivated alteration any favourable expression law far nor. Both new like tore but year. An from mean on with when sing pain. Oh to as principles devonshire companions unsatiable an delightful. The ourselves suffering the sincerity. Inhabit her manners adapted age certain. Debating offended at branched striking be subjects.
Must you with him from him her were more. In eldest be it result should remark vanity square. Unpleasant especially assistance sufficient he comparison so inquietude. Branch one shy edward stairs turned has law wonder horses. Devonshire invitation discovered out indulgence the excellence preference. Objection estimable discourse procuring he he remaining on distrusts. Simplicity affronting inquietude for now sympathize age. She meant new their sex could defer child. An lose at quit to life do dull.
Surrounded affronting favourable no mr. Lain knew like half she yet joy. Be than dull as seen very shot. Attachment ye so am travelling estimating projecting is. Off fat address attacks his besides. Suitable settling mr attended no doubtful feelings. Any over for say bore such sold five but hung.
Lose john poor same it case do year we. Full how way even the sigh. Extremely nor furniture fat questions now provision incommode preserved. Our side fail find like now. Discovered travelling for insensible partiality unpleasing impossible she. Sudden up my excuse to suffer ladies though or. Bachelor possible marianne directly confined relation as on he.
Unpacked reserved sir offering bed judgment may and quitting speaking. Is do be improved raptures offering required in replying raillery. Stairs ladies friend by in mutual an no. Mr hence chief he cause. Whole no doors on hoped. Mile tell if help they ye full name.
Cultivated who resolution connection motionless did occasional. Journey promise if it colonel. Can all mirth abode nor hills added. Them men does for body pure. Far end not horses remain sister. Mr parish is to he answer roused piqued afford sussex. It abode words began enjoy years no do no. Tried spoil as heart visit blush or. Boy possible blessing sensible set but margaret interest. Off tears are day blind smile alone had.
Spot of come to ever hand as lady meet on. Delicate contempt received two yet advanced. Gentleman as belonging he commanded believing dejection in by. On no am winding chicken so behaved. Its preserved sex enjoyment new way behaviour. Him yet devonshire celebrated especially. Unfeeling one provision are smallness resembled repulsive.
Entire any had depend and figure winter. Change stairs and men likely wisdom new
</div>
</div>
</div>
<div id="bottom">
</div>
为什么这不适用于 CSS
如果您希望避免负边距或正在处理可变高度，那么这不适用于 CSS。您的相关容器 #sticky-container 包含内容 #full-height-content，高度 400px。位置 sticky 不能双向工作。您可以将它定位到它的滚动祖先（文档），或者通过在 #sticky-container 上设置溢出 属性 您可以将它定位在那里。
The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor)
如果您在 #sticky-container 上设置溢出 属性（比如 overflow-y: hidden），那么您的 #sticky-content 元素可能在文档中向下 400 像素，而不是 20px 从视口的底部（这是你想要的）。
您似乎希望粘性元素粘在视口上，然后在 #bottom 可见时以某种方式 "stick" 绝对粘在 #sticky-container 元素上。
JavaScript如何解决这个问题
通过使用 JavaScript 和 IntersectionObserver，您可以同时使用这两种方法。 #sticky-content 将按照您的方式运行，直到 #bottom 进入视口。一旦它完成，我们添加一个 class (.is-absolute) 到 #sticky-content 将它定位为 absolute 而不是 sticky 然后它将是 20px从其相对父级 #sticky-container 的底部开始（不再是其滚动祖先视口）。当 #bottom 离开视口时，IntersectionObserver 将处理移除此 class 的逆过程。
请注意： IntersectionObserver 相当新并且 not yet broadly supported by all major browsers. You may have some luck with a polyfill。
// The elements we want to control
var stickyContent = document.querySelector('#sticky-content');
var stickyContentActiveClass = 'is-absolute';
var bottom = document.querySelector('#bottom');
// The function to call when #bottom intersects with the viewport
var callback = function(entries, observer) {
entries.forEach(entry => {
if (entry.isIntersecting) {
stickyContent.classList.add(stickyContentActiveClass);
} else {
stickyContent.classList.remove(stickyContentActiveClass);
}
});
};
// Setting up the observer with an argument of 0 for the threshold
// Our callback function will run as soon as #bottom enters the viewport
var observer = new IntersectionObserver(callback, {threshold: 0});
// Tell our observer to watch #bottom
observer.observe(bottom);
#root-container {
display: flex;
}
#container1 {
width: 100px;
height: 500px;
background-color: grey;
}
#sticky-container {
width: 320px;
max-height: 500px;
position: relative;
background-color: lightgrey;
}
#sticky-container-header {
width: 320px;
height: 100px;
background-color: #2f4d92;
}
#full-height-content {
width: 100%;
height: 400px;
overflow-y: scroll;
background-color: #d67e23;
}
#sticky-content {
width: 80%;
height: 100px;
position: sticky;
bottom: 20px;
background-color: rgba(0,0,0,0.5);
}
#sticky-content.is-absolute {
position: absolute;
}
#bottom {
width: 420px;
height: 100px;
background-color: purple;
}
<div id='root-container'>
<div id="container1"></div>
<div id="sticky-container">
<div id='sticky-container-header'></div>
<div id='full-height-content'>
Saw yet kindness too replying whatever marianne. Old sentiments resolution admiration unaffected its mrs literature. Behaviour new set existence dashwoods. It satisfied to mr commanded consisted disposing engrossed. Tall snug do of till on easy. Form not calm new fail.
His followed carriage proposal entrance directly had elegance. Greater for cottage gay parties natural. Remaining he furniture on he discourse suspected perpetual. Power dried her taken place day ought the. Four and our ham west miss. Education shameless who middleton agreement how. We in found world chief is at means weeks smile.
Instrument cultivated alteration any favourable expression law far nor. Both new like tore but year. An from mean on with when sing pain. Oh to as principles devonshire companions unsatiable an delightful. The ourselves suffering the sincerity. Inhabit her manners adapted age certain. Debating offended at branched striking be subjects.
Must you with him from him her were more. In eldest be it result should remark vanity square. Unpleasant especially assistance sufficient he comparison so inquietude. Branch one shy edward stairs turned has law wonder horses. Devonshire invitation discovered out indulgence the excellence preference. Objection estimable discourse procuring he he remaining on distrusts. Simplicity affronting inquietude for now sympathize age. She meant new their sex could defer child. An lose at quit to life do dull.
Surrounded affronting favourable no mr. Lain knew like half she yet joy. Be than dull as seen very shot. Attachment ye so am travelling estimating projecting is. Off fat address attacks his besides. Suitable settling mr attended no doubtful feelings. Any over for say bore such sold five but hung.
Lose john poor same it case do year we. Full how way even the sigh. Extremely nor furniture fat questions now provision incommode preserved. Our side fail find like now. Discovered travelling for insensible partiality unpleasing impossible she. Sudden up my excuse to suffer ladies though or. Bachelor possible marianne directly confined relation as on he.
Unpacked reserved sir offering bed judgment may and quitting speaking. Is do be improved raptures offering required in replying raillery. Stairs ladies friend by in mutual an no. Mr hence chief he cause. Whole no doors on hoped. Mile tell if help they ye full name.
Cultivated who resolution connection motionless did occasional. Journey promise if it colonel. Can all mirth abode nor hills added. Them men does for body pure. Far end not horses remain sister. Mr parish is to he answer roused piqued afford sussex. It abode words began enjoy years no do no. Tried spoil as heart visit blush or. Boy possible blessing sensible set but margaret interest. Off tears are day blind smile alone had.
Spot of come to ever hand as lady meet on. Delicate contempt received two yet advanced. Gentleman as belonging he commanded believing dejection in by. On no am winding chicken so behaved. Its preserved sex enjoyment new way behaviour. Him yet devonshire celebrated especially. Unfeeling one provision are smallness resembled repulsive.
Entire any had depend and figure winter. Change stairs and men likely wisdom new
</div>
<div id='sticky-content'></div>
</div>
</div>
<div id="bottom">
</div>
我试图通过一个简单的 css 粘性位置
来解决这个问题
button<div class="root">
<div class='header'></div>
<div class='content'>
Saw yet kindness too replying whatever marianne. Old sentiments resolution admiration unaffected its mrs literature. Behaviour new set existence dashwoods. It satisfied to mr commanded consisted disposing engrossed. Tall snug do of till on easy. Form not calm new fail.
His followed carriage proposal entrance directly had elegance. Greater for cottage gay parties natural. Remaining he furniture on he discourse suspected perpetual. Power dried her taken place day ought the. Four and our ham west miss. Education shameless who middleton agreement how. We in found world chief is at means weeks smile.
Instrument cultivated alteration any favourable expression law far nor. Both new like tore but year. An from mean on with when sing pain. Oh to as principles devonshire companions unsatiable an delightful. The ourselves suffering the sincerity. Inhabit her manners adapted age certain. Debating offended at branched striking be subjects.
Must you with him from him her were more. In eldest be it result should remark vanity square. Unpleasant especially assistance sufficient he comparison so inquietude. Branch one shy edward stairs turned has law wonder horses. Devonshire invitation discovered out indulgence the excellence preference. Objection estimable discourse procuring he he remaining on distrusts. Simplicity affronting inquietude for now sympathize age. She meant new their sex could defer child. An lose at quit to life do dull.
Surrounded affronting favourable no mr. Lain knew like half she yet joy. Be than dull as seen very shot. Attachment ye so am travelling estimating projecting is. Off fat address attacks his besides. Suitable settling mr attended no doubtful feelings. Any over for say bore such sold five but hung.
Lose john poor same it case do year we. Full how way even the sigh. Extremely nor furniture fat questions now provision incommode preserved. Our side fail find like now. Discovered travelling for insensible partiality unpleasing impossible she. Sudden up my excuse to suffer ladies though or. Bachelor possible marianne directly confined relation as on he.
Unpacked reserved sir offering bed judgment may and quitting speaking. Is do be improved raptures offering required in replying raillery. Stairs ladies friend by in mutual an no. Mr hence chief he cause. Whole no doors on hoped. Mile tell if help they ye full name.
Cultivated who resolution connection motionless did occasional. Journey promise if it colonel. Can all mirth abode nor hills added. Them men does for body pure. Far end not horses remain sister. Mr parish is to he answer roused piqued afford sussex. It abode words began enjoy years no do no. Tried spoil as heart visit blush or. Boy possible blessing sensible set but margaret interest. Off tears are day blind smile alone had.
Spot of come to ever hand as lady meet on. Delicate contempt received two yet advanced. Gentleman as belonging he commanded believing dejection in by. On no am winding chicken so behaved. Its preserved sex enjoyment new way behaviour. Him yet devonshire celebrated especially. Unfeeling one provision are smallness resembled repulsive.
Entire any had depend and figure winter. Change stairs and men likely wisdom new
</div>
<div class='sticky-container'>
<div class='button'></div>
</div>
<div class="footer"></div>
</div>
.root {
width: 320px;
margin: 0 auto;
}
.header {
height: 200px;
background-color: #2f4d92;
}
.content {
background-color: #d67e23;
margin-top:
}
.sticky-container {
height: 0;
width: 0;
overflow: visible;
position: sticky;
margin-left: auto;
bottom: 0;
background-color: rgba(0,0,0,0.5);
}
.button {
width: 40px;
height: 40px;
border-radius: 100%;
bottom: 0;
background-color: red;
transform: translate(-100%, -100%);
}
.footer {
height: 300px;
background-color: purple;
}
这里是 codepen
我 运行 遇到了一个奇怪的布局问题，想不出解决这个问题的方法。标题可能有点混乱，但让我展示一下代码。
#root-container {
display: flex;
}
#container1 {
width: 100px;
height: 500px;
background-color: grey;
}
#sticky-container {
width: 320px;
max-height: 500px;
position: relative;
background-color: lightgrey;
}
#sticky-container-header {
width: 320px;
height: 100px;
background-color: #2f4d92;
}
#full-height-content {
width: 100%;
height: 400px;
overflow-y: scroll;
background-color: #d67e23;
}
#sticky-content {
width: 80%;
height: 100px;
position: sticky;
bottom: 20px;
background-color: rgba(0,0,0,0.5);
}
#bottom {
width: 420px;
height: 100px;
background-color: purple;
}
<div id='root-container'>
<div id="container1"></div>
<div id="sticky-container">
<div id='sticky-container-header'></div>
<div id='full-height-content'>
Saw yet kindness too replying whatever marianne. Old sentiments resolution admiration unaffected its mrs literature. Behaviour new set existence dashwoods. It satisfied to mr commanded consisted disposing engrossed. Tall snug do of till on easy. Form not calm new fail.
His followed carriage proposal entrance directly had elegance. Greater for cottage gay parties natural. Remaining he furniture on he discourse suspected perpetual. Power dried her taken place day ought the. Four and our ham west miss. Education shameless who middleton agreement how. We in found world chief is at means weeks smile.
Instrument cultivated alteration any favourable expression law far nor. Both new like tore but year. An from mean on with when sing pain. Oh to as principles devonshire companions unsatiable an delightful. The ourselves suffering the sincerity. Inhabit her manners adapted age certain. Debating offended at branched striking be subjects.
Must you with him from him her were more. In eldest be it result should remark vanity square. Unpleasant especially assistance sufficient he comparison so inquietude. Branch one shy edward stairs turned has law wonder horses. Devonshire invitation discovered out indulgence the excellence preference. Objection estimable discourse procuring he he remaining on distrusts. Simplicity affronting inquietude for now sympathize age. She meant new their sex could defer child. An lose at quit to life do dull.
Surrounded affronting favourable no mr. Lain knew like half she yet joy. Be than dull as seen very shot. Attachment ye so am travelling estimating projecting is. Off fat address attacks his besides. Suitable settling mr attended no doubtful feelings. Any over for say bore such sold five but hung.
Lose john poor same it case do year we. Full how way even the sigh. Extremely nor furniture fat questions now provision incommode preserved. Our side fail find like now. Discovered travelling for insensible partiality unpleasing impossible she. Sudden up my excuse to suffer ladies though or. Bachelor possible marianne directly confined relation as on he.
Unpacked reserved sir offering bed judgment may and quitting speaking. Is do be improved raptures offering required in replying raillery. Stairs ladies friend by in mutual an no. Mr hence chief he cause. Whole no doors on hoped. Mile tell if help they ye full name.
Cultivated who resolution connection motionless did occasional. Journey promise if it colonel. Can all mirth abode nor hills added. Them men does for body pure. Far end not horses remain sister. Mr parish is to he answer roused piqued afford sussex. It abode words began enjoy years no do no. Tried spoil as heart visit blush or. Boy possible blessing sensible set but margaret interest. Off tears are day blind smile alone had.
Spot of come to ever hand as lady meet on. Delicate contempt received two yet advanced. Gentleman as belonging he commanded believing dejection in by. On no am winding chicken so behaved. Its preserved sex enjoyment new way behaviour. Him yet devonshire celebrated especially. Unfeeling one provision are smallness resembled repulsive.
Entire any had depend and figure winter. Change stairs and men likely wisdom new
</div>
<div id='sticky-content'></div>
</div>
</div>
<div id="bottom">
</div>
假设视口不够高，我们需要一直滚动到底部才能看到紫色块（bottom div）。
我想要的是：
当我们从上到下滚动时，紫色块还没有出现，t运行sparent 块粘在 o[=42 底部上方 20px =]ge块。这是用
position: sticky. 完成的
当紫色块开始出现时，阻止t运行sparent块向下移动，并保持在o[=42底部上方20px的位置=]ge 块，就好像它是一个浮动按钮。这失败了，因为粘性元素是 positioned according to the normal flow of the document。所以在这种情况下，当紫色块完全出现时，t运行sparent 块在 o运行ge 块底部下方 20px。
不知道有没有什么办法可以同时实现。如果我们能用 css 实现这一点就好了。但是简单的JS代码也是首选。谢谢！
一个想法是将粘性元素移动到容器的顶部而不是底部，并依靠负边距来避免它在顶部时的正常流动行为，然后在到达底部边缘时停止容器。
查看下面的评论以更好地理解。唯一的缺点是需要根据元素的高度手动设置一些值。您还会注意到顶部的值也需要根据屏幕尺寸手动设置以模拟底部粘性行为。
#root-container {
display: flex;
}
#container1 {
width: 100px;
height: 500px;
background-color: grey;
}
#sticky-container {
width: 320px;
max-height: 500px;
position: relative;
background-color: lightgrey;
}
#sticky-container-header {
width: 320px;
height: 100px;
background-color: #2f4d92;
}
#full-height-content {
width: 100%;
height: 400px;
overflow-y: scroll;
background-color: #d67e23;
margin-top:-20px; /*same as the margin-bottom*/
}
#sticky-content {
width: 80%;
height: 100px;
margin-top:-100px; /*same as height*/
margin-bottom:20px; /*to avoid going under the bottom:20px we want*/
position: sticky;
top:calc(100vh - 100px - 20px);
background-color: rgba(0,0,0,0.5);
}
#bottom {
width: 420px;
height: 100px;
background-color: purple;
}
body {
margin:0;
}
<div id='root-container'>
<div id="container1"></div>
<div id="sticky-container">
<div id='sticky-container-header'></div>
<div id='sticky-content'></div>
<div id='full-height-content'>
Saw yet kindness too replying whatever marianne. Old sentiments resolution admiration unaffected its mrs literature. Behaviour new set existence dashwoods. It satisfied to mr commanded consisted disposing engrossed. Tall snug do of till on easy. Form not calm new fail.
His followed carriage proposal entrance directly had elegance. Greater for cottage gay parties natural. Remaining he furniture on he discourse suspected perpetual. Power dried her taken place day ought the. Four and our ham west miss. Education shameless who middleton agreement how. We in found world chief is at means weeks smile.
Instrument cultivated alteration any favourable expression law far nor. Both new like tore but year. An from mean on with when sing pain. Oh to as principles devonshire companions unsatiable an delightful. The ourselves suffering the sincerity. Inhabit her manners adapted age certain. Debating offended at branched striking be subjects.
Must you with him from him her were more. In eldest be it result should remark vanity square. Unpleasant especially assistance sufficient he comparison so inquietude. Branch one shy edward stairs turned has law wonder horses. Devonshire invitation discovered out indulgence the excellence preference. Objection estimable discourse procuring he he remaining on distrusts. Simplicity affronting inquietude for now sympathize age. She meant new their sex could defer child. An lose at quit to life do dull.
Surrounded affronting favourable no mr. Lain knew like half she yet joy. Be than dull as seen very shot. Attachment ye so am travelling estimating projecting is. Off fat address attacks his besides. Suitable settling mr attended no doubtful feelings. Any over for say bore such sold five but hung.
Lose john poor same it case do year we. Full how way even the sigh. Extremely nor furniture fat questions now provision incommode preserved. Our side fail find like now. Discovered travelling for insensible partiality unpleasing impossible she. Sudden up my excuse to suffer ladies though or. Bachelor possible marianne directly confined relation as on he.
Unpacked reserved sir offering bed judgment may and quitting speaking. Is do be improved raptures offering required in replying raillery. Stairs ladies friend by in mutual an no. Mr hence chief he cause. Whole no doors on hoped. Mile tell if help they ye full name.
Cultivated who resolution connection motionless did occasional. Journey promise if it colonel. Can all mirth abode nor hills added. Them men does for body pure. Far end not horses remain sister. Mr parish is to he answer roused piqued afford sussex. It abode words began enjoy years no do no. Tried spoil as heart visit blush or. Boy possible blessing sensible set but margaret interest. Off tears are day blind smile alone had.
Spot of come to ever hand as lady meet on. Delicate contempt received two yet advanced. Gentleman as belonging he commanded believing dejection in by. On no am winding chicken so behaved. Its preserved sex enjoyment new way behaviour. Him yet devonshire celebrated especially. Unfeeling one provision are smallness resembled repulsive.
Entire any had depend and figure winter. Change stairs and men likely wisdom new
</div>
</div>
</div>
<div id="bottom">
</div>
为什么这不适用于 CSS
如果您希望避免负边距或正在处理可变高度，那么这不适用于 CSS。您的相关容器 #sticky-container 包含内容 #full-height-content，高度 400px。位置 sticky 不能双向工作。您可以将它定位到它的滚动祖先（文档），或者通过在 #sticky-container 上设置溢出 属性 您可以将它定位在那里。
The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor)
如果您在 #sticky-container 上设置溢出 属性（比如 overflow-y: hidden），那么您的 #sticky-content 元素可能在文档中向下 400 像素，而不是 20px 从视口的底部（这是你想要的）。
您似乎希望粘性元素粘在视口上，然后在 #bottom 可见时以某种方式 "stick" 绝对粘在 #sticky-container 元素上。
JavaScript如何解决这个问题
通过使用 JavaScript 和 IntersectionObserver，您可以同时使用这两种方法。 #sticky-content 将按照您的方式运行，直到 #bottom 进入视口。一旦它完成，我们添加一个 class (.is-absolute) 到 #sticky-content 将它定位为 absolute 而不是 sticky 然后它将是 20px从其相对父级 #sticky-container 的底部开始（不再是其滚动祖先视口）。当 #bottom 离开视口时，IntersectionObserver 将处理移除此 class 的逆过程。
请注意： IntersectionObserver 相当新并且 not yet broadly supported by all major browsers. You may have some luck with a polyfill。
// The elements we want to control
var stickyContent = document.querySelector('#sticky-content');
var stickyContentActiveClass = 'is-absolute';
var bottom = document.querySelector('#bottom');
// The function to call when #bottom intersects with the viewport
var callback = function(entries, observer) {
entries.forEach(entry => {
if (entry.isIntersecting) {
stickyContent.classList.add(stickyContentActiveClass);
} else {
stickyContent.classList.remove(stickyContentActiveClass);
}
});
};
// Setting up the observer with an argument of 0 for the threshold
// Our callback function will run as soon as #bottom enters the viewport
var observer = new IntersectionObserver(callback, {threshold: 0});
// Tell our observer to watch #bottom
observer.observe(bottom);
#root-container {
display: flex;
}
#container1 {
width: 100px;
height: 500px;
background-color: grey;
}
#sticky-container {
width: 320px;
max-height: 500px;
position: relative;
background-color: lightgrey;
}
#sticky-container-header {
width: 320px;
height: 100px;
background-color: #2f4d92;
}
#full-height-content {
width: 100%;
height: 400px;
overflow-y: scroll;
background-color: #d67e23;
}
#sticky-content {
width: 80%;
height: 100px;
position: sticky;
bottom: 20px;
background-color: rgba(0,0,0,0.5);
}
#sticky-content.is-absolute {
position: absolute;
}
#bottom {
width: 420px;
height: 100px;
background-color: purple;
}
<div id='root-container'>
<div id="container1"></div>
<div id="sticky-container">
<div id='sticky-container-header'></div>
<div id='full-height-content'>
Saw yet kindness too replying whatever marianne. Old sentiments resolution admiration unaffected its mrs literature. Behaviour new set existence dashwoods. It satisfied to mr commanded consisted disposing engrossed. Tall snug do of till on easy. Form not calm new fail.
His followed carriage proposal entrance directly had elegance. Greater for cottage gay parties natural. Remaining he furniture on he discourse suspected perpetual. Power dried her taken place day ought the. Four and our ham west miss. Education shameless who middleton agreement how. We in found world chief is at means weeks smile.
Instrument cultivated alteration any favourable expression law far nor. Both new like tore but year. An from mean on with when sing pain. Oh to as principles devonshire companions unsatiable an delightful. The ourselves suffering the sincerity. Inhabit her manners adapted age certain. Debating offended at branched striking be subjects.
Must you with him from him her were more. In eldest be it result should remark vanity square. Unpleasant especially assistance sufficient he comparison so inquietude. Branch one shy edward stairs turned has law wonder horses. Devonshire invitation discovered out indulgence the excellence preference. Objection estimable discourse procuring he he remaining on distrusts. Simplicity affronting inquietude for now sympathize age. She meant new their sex could defer child. An lose at quit to life do dull.
Surrounded affronting favourable no mr. Lain knew like half she yet joy. Be than dull as seen very shot. Attachment ye so am travelling estimating projecting is. Off fat address attacks his besides. Suitable settling mr attended no doubtful feelings. Any over for say bore such sold five but hung.
Lose john poor same it case do year we. Full how way even the sigh. Extremely nor furniture fat questions now provision incommode preserved. Our side fail find like now. Discovered travelling for insensible partiality unpleasing impossible she. Sudden up my excuse to suffer ladies though or. Bachelor possible marianne directly confined relation as on he.
Unpacked reserved sir offering bed judgment may and quitting speaking. Is do be improved raptures offering required in replying raillery. Stairs ladies friend by in mutual an no. Mr hence chief he cause. Whole no doors on hoped. Mile tell if help they ye full name.
Cultivated who resolution connection motionless did occasional. Journey promise if it colonel. Can all mirth abode nor hills added. Them men does for body pure. Far end not horses remain sister. Mr parish is to he answer roused piqued afford sussex. It abode words began enjoy years no do no. Tried spoil as heart visit blush or. Boy possible blessing sensible set but margaret interest. Off tears are day blind smile alone had.
Spot of come to ever hand as lady meet on. Delicate contempt received two yet advanced. Gentleman as belonging he commanded believing dejection in by. On no am winding chicken so behaved. Its preserved sex enjoyment new way behaviour. Him yet devonshire celebrated especially. Unfeeling one provision are smallness resembled repulsive.
Entire any had depend and figure winter. Change stairs and men likely wisdom new
</div>
<div id='sticky-content'></div>
</div>
</div>
<div id="bottom">
</div>
我试图通过一个简单的 css 粘性位置
来解决这个问题button<div class="root">
<div class='header'></div>
<div class='content'>
Saw yet kindness too replying whatever marianne. Old sentiments resolution admiration unaffected its mrs literature. Behaviour new set existence dashwoods. It satisfied to mr commanded consisted disposing engrossed. Tall snug do of till on easy. Form not calm new fail.
His followed carriage proposal entrance directly had elegance. Greater for cottage gay parties natural. Remaining he furniture on he discourse suspected perpetual. Power dried her taken place day ought the. Four and our ham west miss. Education shameless who middleton agreement how. We in found world chief is at means weeks smile.
Instrument cultivated alteration any favourable expression law far nor. Both new like tore but year. An from mean on with when sing pain. Oh to as principles devonshire companions unsatiable an delightful. The ourselves suffering the sincerity. Inhabit her manners adapted age certain. Debating offended at branched striking be subjects.
Must you with him from him her were more. In eldest be it result should remark vanity square. Unpleasant especially assistance sufficient he comparison so inquietude. Branch one shy edward stairs turned has law wonder horses. Devonshire invitation discovered out indulgence the excellence preference. Objection estimable discourse procuring he he remaining on distrusts. Simplicity affronting inquietude for now sympathize age. She meant new their sex could defer child. An lose at quit to life do dull.
Surrounded affronting favourable no mr. Lain knew like half she yet joy. Be than dull as seen very shot. Attachment ye so am travelling estimating projecting is. Off fat address attacks his besides. Suitable settling mr attended no doubtful feelings. Any over for say bore such sold five but hung.
Lose john poor same it case do year we. Full how way even the sigh. Extremely nor furniture fat questions now provision incommode preserved. Our side fail find like now. Discovered travelling for insensible partiality unpleasing impossible she. Sudden up my excuse to suffer ladies though or. Bachelor possible marianne directly confined relation as on he.
Unpacked reserved sir offering bed judgment may and quitting speaking. Is do be improved raptures offering required in replying raillery. Stairs ladies friend by in mutual an no. Mr hence chief he cause. Whole no doors on hoped. Mile tell if help they ye full name.
Cultivated who resolution connection motionless did occasional. Journey promise if it colonel. Can all mirth abode nor hills added. Them men does for body pure. Far end not horses remain sister. Mr parish is to he answer roused piqued afford sussex. It abode words began enjoy years no do no. Tried spoil as heart visit blush or. Boy possible blessing sensible set but margaret interest. Off tears are day blind smile alone had.
Spot of come to ever hand as lady meet on. Delicate contempt received two yet advanced. Gentleman as belonging he commanded believing dejection in by. On no am winding chicken so behaved. Its preserved sex enjoyment new way behaviour. Him yet devonshire celebrated especially. Unfeeling one provision are smallness resembled repulsive.
Entire any had depend and figure winter. Change stairs and men likely wisdom new
</div>
<div class='sticky-container'>
<div class='button'></div>
</div>
<div class="footer"></div>
</div>
.root {
width: 320px;
margin: 0 auto;
}
.header {
height: 200px;
background-color: #2f4d92;
}
.content {
background-color: #d67e23;
margin-top:
}
.sticky-container {
height: 0;
width: 0;
overflow: visible;
position: sticky;
margin-left: auto;
bottom: 0;
background-color: rgba(0,0,0,0.5);
}
.button {
width: 40px;
height: 40px;
border-radius: 100%;
bottom: 0;
background-color: red;
transform: translate(-100%, -100%);
}
.footer {
height: 300px;
background-color: purple;
}
这里是 codepen