这是buhehe.de右侧的一个简单的div元素，在<div class="adssec">和我写的CSS中.adssec {position: sticky !important;}但它在滚动过程中没有粘住。
我做错了什么？
您必须指定要使其具有粘性的阈值。 来自 CSS 技巧：
粘性定位是相对定位和固定定位的混合体。元素被视为相对定位，直到它超过指定的阈值，此时它被视为固定定位。
指定粘滞元素的top、bottom、left或bottom值。
您可以使用位置：固定。 或位置：粘性，如以下示例所示。
body
{
margin: 0 15%;
background-color: #ecf0f1;
}
div
{
border: solid #34495e 1px;
padding: 0 10px;
margin: 0 0 10px 0;
background-color: white;
}
.fixed, .sticky
{
font-size: 1.4em;
padding: 10px;
z-index: 1;
}
.fixed
{
position: fixed;
background-color: #34495e;
color: white;
width: 100%;
left: 0;
text-align: center;
z-index: 2;
}
.sticky
{
position: sticky;
top: 60px;
background-color: #2ecc71;
}
.container
{
height: 250px;
overflow: auto;
}
.out-container
{
top: 50px;
background-color: #9b59b6;
z-index: 2;
}<html>
<head>
</head>
<body>
<div class="fixed">
Fixed Position
</div>
<br/><br/><br/>
<div>
<h3>
Some random content for overflowing the entire content.
</h3>
<p>
There are three responses to a piece of design – yes, no, and WOW! Wow is the one to aim for.
</p>
<p>
Software testing is a sport like hunting, it's bughunting.
</p>
<p>
Java is to JavaScript what Car is to Carpet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur.
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation. eiusmod tempor incididunt ut labore
</p>
</div>
<div class="sticky out-container">
Sticky Positioning
</div>
<div class="container">
<h3>
Some random content for overflowing the content of this container.
</h3>
<p>
There are three responses to a piece of design – yes, no, and WOW! Wow is the one to aim for.
</p> <p>
Software testing is a sport like hunting, it's bughunting.
</p>
<p>
Java is to JavaScript what Car is to Carpet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur.
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation. eiusmod tempor incididunt ut labore
</p>
<p>
Lorem ipsum dolor sit amet, consectetur.
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation. eiusmod tempor incididunt ut labore
</p>
<p>
Lorem ipsum dolor sit amet, consectetur.
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation. eiusmod tempor incididunt ut labore
</p>
<p>
Lorem ipsum dolor sit amet, consectetur.
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation. eiusmod tempor incididunt ut labore
</p>
<div>
<h3>
Some random content for overflowing the entire content.
</h3>
<p>
There are three responses to a piece of design – yes, no, and WOW! Wow is the one to aim for.
</p>
<p>
Software testing is a sport like hunting, it's bughunting.
</p>
<p>
Java is to JavaScript what Car is to Carpet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur.
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation. eiusmod tempor incididunt ut labore
</p>
</div>
<div>
<h3>
Some random content for overflowing the entire content.
</h3>
<p>
There are three responses to a piece of design – yes, no, and WOW! Wow is the one to aim for.
</p>
<p>
Software testing is a sport like hunting, it's bughunting.
</p>
<p>
Java is to JavaScript what Car is to Carpet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur.
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation. eiusmod tempor incididunt ut labore
</p>
</div>
<div>
<h3>
Some random content for overflowing the entire content.
</h3>
<p>
There are three responses to a piece of design – yes, no, and WOW! Wow is the one to aim for.
</p>
<p>
Software testing is a sport like hunting, it's bughunting.
</p>
<p>
Java is to JavaScript what Car is to Carpet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur.
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation. eiusmod tempor incididunt ut labore
</p>
</div>
</body>
</html>您是否只想将元素保留在您给出的位置上？
在这种情况下，position: fixed会解决问题。
但是，如果您尝试通过滚动使元素在到达页面顶部后保留在页面顶部，则应使用position: sticky.
根据Mozilla开发人员文档
这是一个实验性 API，不应在生产代码中使用。
无需posistion: sticky的可能解决方案
在这里使用一些JavaScript将是一个更好的选择。当元素到达顶部时，向样式添加position: fixed。
window.onscroll = function() {myFunction()};
var div = document.getElementById("myDiv");
var sticky = div.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
div.classList.add("sticky")
} else {
div.classList.remove("sticky");
}
}