Question

我正在为div实现粘性行为，就像这样当用户滚动页面时，右侧的侧边栏向上滚动直到它接近顶部然后在用户仍然向下滚动侧边栏时停止当用户靠近页面底部时再次开始向上滚动。

当用户靠近底部时，会发生什么变化我将侧边栏的位置从固定更改为绝对，并使其跳转。

有没有办法将位置从固定更改为绝对并且在我这样做时不要跳转但是从同一坐标继续向上滚动？

<div class="col-md-4" style="border: 0px dashed black; margin-left: 2.933%; height: 832px; osition: relative;">

    <div class="sticky" style="border: 1px dashed red;">
        <div id="map" style="min-height: 350px;"></div>
        <div style="padding: 20px">interesting</div>
        <div style="padding: 20px">interesting</div>
        <div style="padding: 20px">interesting</div>
        <div style="padding: 20px">interesting</div>
        <div style="padding: 20px">interesting</div>
        <div id="last-interesting">last-interesting</div>
    </div>

var stickyHeaderTop = $('.sticky').offset().top;
if( $(window).scrollTop() > stickyHeaderTop-10 ) {
    $('.sticky').css({position: 'fixed', zoom: '1', top: '10px', left:'925px'});
} else {
    $('.sticky').css({position: 'relative', zoom: '1', top: '0px', left: '0px', width:'330px'});
}

if ($('#content-last').visible(true)) {
    // alert('visible');
    console.log($('.sticky').offset().top);
    $('.sticky').css({position: 'absolute', zoom: 'auto', 'z-index': '1', left: '', height: ''});
}

我也试过这个

$('.sticky').css({position: 'absolute', top: '0' zoom: 'auto', 'z-index': '1', left: '', height: ''});

和这个

$('.sticky').css({position: 'absolute', top: $(window).scrollTop()+'px', zoom: 'auto', 'z-index': '1', left: '', height: ''});

但第一个就像没有设置顶部，就像在视频中一样，第二个跳到屏幕中间。

有什么想法可以解决这个问题吗？

你可以看到right here后的粘性效果。

Answer 1

我可以告诉你如何从position: static到position:fixed，我想你可以用它来做你想做的事情：

HTML：

<div class='container'>
  <div class='body'>

  </div>
  <div class='right'>
    <div class='box'>

    </div>
  </div>
</div>

抱歉SCSS

SCSS：

.container{
  div{
    display:inline-block;
    float:left;
  }
}
.body{
  background-color: #3fa142;
  height: 250vh;
  width: 65%;
}
.right{
  padding-top: 70px;
  height: 250vh;
  width: 34%;
  .box{
    height: 34vh;
    background-color: #f66a68;
    width: 150px;
  }
}

jQuery的：

boxPosition = $(".box").offset().top;
$(window).scroll(function(){
   var isFixed = $(".box").css("position") === "fixed";
   if($(window).scrollTop() > boxPosition && !isFixed){
            $(".box").css({position:"fixed", top: "0px"});
   }else if($(window).scrollTop() < boxPosition){
        $(".box").css({position:"static"});
   }
})

如果您对此解决方案有任何疑问，请与我们联系。

JSFiddle Link

Answer 2

我找到的最佳解决方案是使用仅在某些浏览器中实现的粘性位置

position: -webkit-sticky;  // required for Safari
position: sticky;
top: 0; // required as well.

在不支持polyfill的浏览器上，有插件 https://github.com/wilddeer/stickyfill

使用它只需

$('.sticky').Stickyfill();

效果很好，请在此处查看演示http://wd.dizaina.net/en/scripts/stickyfill/

Answer 3

您无法获得相同的平滑效果，将绝对值更改为固定值，反之亦然。您只能通过使用位置粘性来获得它。

如何将位置从固定更改为绝对并且没有div跳转

3 个答案: