粘性浮动杆:准确位置

问题描述 投票:0回答:2

我正在寻找更好的粘杆问题解决方案。

第2和第3个框之间的'-----'是粘性条应显示的阈值。显示时,它完全重叠第3个框。

在真正的解决方案中,我使用jquery添加了css(margin-top)来推送下面的元素;但问题是它在Firefox中落后了。人们可以在UI上看到这个空间几秒钟。

实现输出的最佳解决方案是什么(或避免利润率最高)?

$(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>
javascript jquery html css sticky-footer
2个回答
0
投票

更新的答案

我认为你需要保持你的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(也就是说,它从正常文档流中取出)不可见:

粘性定位元素是其计算的位置值是粘性的元素。它被视为相对定位,直到其包含块超过指定的阈值,此时它被视为固定的。

希望这可以帮助!


0
投票

这是由于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 */

}

© www.soinside.com 2019 - 2024. All rights reserved.