粘性浮动条:准确定位
Sticky floating bar : accurate position
我正在寻找解决粘滞栏问题的更好方法。
第二个和第三个框之间的“-----”是粘性条应该显示的阈值。当它显示时,它完全覆盖了第三个框。
在真正的解决方案中,我添加了 css (margin-top) 使用 jquery 将这个元素推到下面;但问题是它在 Firefox 中滞后。人们可以在 UI.
上看到这个 space 几分之一秒
实现输出(或避免 margin-top)的最佳解决方案是什么?
$(document).ready(function(){
function toggleDock() {
if($(window).scrollTop() >= $('.second').offset().top+$('.second').height()) {
$('.sticky').show();
}
else {
$('.sticky').hide();
}
}
$(window).bind('scroll',toggleDock);
});
.box {
border: 1px dotted red;
height: 100px;
width: auto;
margin: 20px 0;
}
.sticky {
height: 80px;
border: 1px dotted green;
margin: 20px 0;
display: none;
position: sticky;
top: 20px;
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class='page docked'>
<div class='sticky'>
</div>
<div class='box'>
First
</div>
<div class='box second' >
2nd
</div>
-------
<div class='box'>
3rd
</div>
<div class='box'>
4th
</div>
<div class='box'>
5th
</div>
<div class='box'>
6th
</div>
<div class='box'>
7th
</div>
<div class='box'>
8th
</div>
</body>
这是由于 position: sticky
。交替使用 position: fixed
会对您有所帮助。
.sticky {
height: 80px;
border: 1px dotted green;
margin: 20px 0;
display: none;
top: 20px;
background: green;
position: fixed;
width: calc(100% - 40px); /* subtract the 20px taken by the left and right margins */
}
更新的答案
我认为你需要保持你的 sticky
div 正常流动,position: sticky
在这里可能不是正确的选择。这是一个例子:
$(document).ready(function(){
function toggleDock() {
if($(window).scrollTop() >= $('.second').offset().top+$('.second').height()) {
$('.sticky').show();
}
else {
$('.sticky').hide();
}
}
$(window).bind('scroll',toggleDock);
});
.box {
border: 1px dotted red;
height: 100px;
width: auto;
margin: 20px 0;
}
.sticky {
height: 100px;
border: 1px dotted green;
margin: 20px 0;
top: 40px;
display: none;
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class='page docked'>
<div class='box'>
First
</div>
<div class='box second' >
2nd
</div>
-------
<div class='sticky'>
</div>
<div class='box'>
3rd
</div>
<div class='box'>
4th
</div>
<div class='box'>
5th
</div>
<div class='box'>
6th
</div>
<div class='box'>
7th
</div>
<div class='box'>
8th
</div>
</body>
一篇关于 CSS 流程的好文档:http://marksheet.io/css-the-flow.html
position: sticky
在那里没有详细说明,但是从 this document 中,您会看到 sticky
元素在可见时相对于其包含元素定位,并变为 fixed
(即脱离正常文档流)当其包含元素不可见时:
A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold, at which point it is treated as fixed.
希望对您有所帮助!
我正在寻找解决粘滞栏问题的更好方法。
第二个和第三个框之间的“-----”是粘性条应该显示的阈值。当它显示时,它完全覆盖了第三个框。
在真正的解决方案中,我添加了 css (margin-top) 使用 jquery 将这个元素推到下面;但问题是它在 Firefox 中滞后。人们可以在 UI.
上看到这个 space 几分之一秒实现输出(或避免 margin-top)的最佳解决方案是什么?
$(document).ready(function(){
function toggleDock() {
if($(window).scrollTop() >= $('.second').offset().top+$('.second').height()) {
$('.sticky').show();
}
else {
$('.sticky').hide();
}
}
$(window).bind('scroll',toggleDock);
});
.box {
border: 1px dotted red;
height: 100px;
width: auto;
margin: 20px 0;
}
.sticky {
height: 80px;
border: 1px dotted green;
margin: 20px 0;
display: none;
position: sticky;
top: 20px;
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class='page docked'>
<div class='sticky'>
</div>
<div class='box'>
First
</div>
<div class='box second' >
2nd
</div>
-------
<div class='box'>
3rd
</div>
<div class='box'>
4th
</div>
<div class='box'>
5th
</div>
<div class='box'>
6th
</div>
<div class='box'>
7th
</div>
<div class='box'>
8th
</div>
</body>
这是由于 position: sticky
。交替使用 position: fixed
会对您有所帮助。
.sticky {
height: 80px;
border: 1px dotted green;
margin: 20px 0;
display: none;
top: 20px;
background: green;
position: fixed;
width: calc(100% - 40px); /* subtract the 20px taken by the left and right margins */
}
更新的答案
我认为你需要保持你的 sticky
div 正常流动,position: sticky
在这里可能不是正确的选择。这是一个例子:
$(document).ready(function(){
function toggleDock() {
if($(window).scrollTop() >= $('.second').offset().top+$('.second').height()) {
$('.sticky').show();
}
else {
$('.sticky').hide();
}
}
$(window).bind('scroll',toggleDock);
});
.box {
border: 1px dotted red;
height: 100px;
width: auto;
margin: 20px 0;
}
.sticky {
height: 100px;
border: 1px dotted green;
margin: 20px 0;
top: 40px;
display: none;
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class='page docked'>
<div class='box'>
First
</div>
<div class='box second' >
2nd
</div>
-------
<div class='sticky'>
</div>
<div class='box'>
3rd
</div>
<div class='box'>
4th
</div>
<div class='box'>
5th
</div>
<div class='box'>
6th
</div>
<div class='box'>
7th
</div>
<div class='box'>
8th
</div>
</body>
一篇关于 CSS 流程的好文档:http://marksheet.io/css-the-flow.html
position: sticky
在那里没有详细说明,但是从 this document 中,您会看到 sticky
元素在可见时相对于其包含元素定位,并变为 fixed
(即脱离正常文档流)当其包含元素不可见时:
A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold, at which point it is treated as fixed.
希望对您有所帮助!