如何將位置從固定更改為絕對位置並且沒有 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: ''});

但第一個就像沒有設置頂部一樣，就像在視頻中一樣，第二個跳到屏幕中間。

有什么想法可以解決這個問題嗎？

你可以在這里看到我所追求的粘性效果。

Answer 1

我可以告訴你如何從position: static到position:fixed ，我想你可以用它來做你想做的事：

HTML：

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

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

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

對不起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 鏈接

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

您無法獲得相同的平滑效果，將絕對更改為固定，反之亦然。 您只能通過使用位置粘性來獲得它。