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

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

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