在某些滾動後讓側邊div跟着

現在右邊的div始終跟着滾動。如果我希望它在頁面滾動到div頂部時開始跟隨滾動，並在滾動時保持它在那裏，那我還需要做些什麼？在某些滾動後讓側邊div跟着

$(window).scroll(function(){ 
    var scrollTop = $(window).scrollTop(); 
     $('.mSidebar').css("top", scrollTop + 400); 
    console.log(scrollTop); 
});

來源

2016-08-18 jake

如果我理解正確，you'd喜歡固定股利如果滾動在屏幕的上方，對不對？ div應該留在那裏，或者，如果用戶再次移動滾動條，那麼div也應該移動。只有當用戶從頁面的頂部到頂部滾動或者有其他情況時，de div才能被修復。你能否更詳細地解釋你的要求？ –

請說明您的具體問題或添加其他詳細信息，以確切地突出顯示您的需求。正如目前所寫，很難確切地說出你在問什麼。 –

使用這樣的：

$(document).ready(function(){ 

    $(window).scroll(function(){ 

     if($(document).scrollTop() > 400) { 
      var newPos = $(document).scrollTop() + 400 ; 
      $('.mSidebar').css({top:newPos}); 
     } 

     else { 
      $('.mSidebar').css({top:400}); 
     } 
    }) 
})

來源

2016-08-18 19:54:01 Ehsan

非常感謝！你的工作很完美。除了我需要更換top：newPos + 400之外：newPos – jake

不客氣。 – Ehsan

使用position: fixed當你想要的東西粘在頂部（或底部）。

//you can do it in initial layout, no need to set up css in js 
    $('.mSidebar').css("position", 'fixed'); 


    //if user scrolled down more then 400 px we make div to stick to the top 
    if (scrollTop>400) { 
     $('.mSidebar').css("top", 0); 
    } else { 
     //otherwise it stays in the middle of the screen 
     $('.mSidebar').css("top", '400px'); 
    }

https://jsfiddle.net/4zreh4ek/6/

來源

2016-08-18 19:41:51

您使用位置：當滾動來爲您選擇的位置固定。這是由滾動事件觸發的。

但是！確保div回到< 400滾動時重置。這是我制定的一個例子。

希望這有助於！

$(window).scroll(function() { 
 
\t var scroll = $(window).scrollTop(); 
 
\t if (scroll > 400) { 
 
    \t $('.mSidebar').css("position", "fixed"); 
 
    $('.mSidebar').css("top", 5); 
 
    } else { 
 
    \t $('.mSidebar').css("position", "absolute"); 
 
    $('.mSidebar').css("top", 400); 
 
    } 
 
});

.mSidebar { 
 
    height: 300px; 
 
    width: 200px; 
 
    background-color: black; 
 
    position: absolute; 
 
    top: 400px; 
 
    right: 20px; 
 
} 
 

 
body { 
 
    width: 1000px; 
 
    height: 10000px; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<body> 
 
    <div class="mSidebar"></div> 
 
</body>

來源

2016-08-18 19:59:31 Sequential

在某些滾動後讓側邊div跟着

回答

相關問題