JSでスクロールするときに画面内にhtml div要素を保持する方法

Question

長いスクロール可能なページと、ページよりも短いが画面の高さよりも長い別のサイドブロックがあるとしましょう。

サイドバーを常に画面の内側の1つにしたいと考えています。

スクロールダウンすると、それを修正するまでスクロールサイドバーが画面の下部に下です：あなたが上向きにスクロールする場合は、トップで固定されるまで続いて、それがスクロールする

：

サイドバーは決して画面を離れません。 ブートストラップ付属と同様ですが、スクロール能力があります。 共通の機能であるように見えますが、このような動作をしているサイトはほとんど見当たりませんでした。 私はちょうどそれを正しくすることはできません、珍しい状況で常に新しいバグを見つける。 一部のライブラリには準備ができていますか？

Answer 1

今日、私は「固定」ポジションを必要とせず、各スクロールでオフセットを更新できることを知りました。 誰かが同じ質問を検索する場合は、ここに私のコードです。

HTML：

<div id="screen"> 
    <div id="page"> 
    </div> 

    <div id="sidebar"> 
    </div> 
</div> 

JS：

var margin = 0; 
var sidebarIsFixed = false; 
var lastScroll = 0; 
var topOffset = 0; 

var sidebar = document.getElementById('sidebar'); 
var screen = document.getElementById('screen'); 
var yPos = undefined; 

function OnBodyScroll() { 
    if (yPos == undefined) { 
     yPos = 0; 
     var parent = sidebar.offsetParent; 
     while (parent && parent != screen) { 
      yPos += parent.offsetTop; 
      parent = parent.offsetParent; 
     } 
     margin = sidebar.offsetTop; 
     topOffset = margin; 
    } 
    var windowHeight = screen.clientHeight; 
    var barHeight = sidebar.clientHeight; 
    var scroll = screen.scrollTop; 

    if (scroll >= lastScroll) { 
     if (scroll + windowHeight > yPos + topOffset + barHeight + margin) { 
      topOffset = scroll -yPos + windowHeight - barHeight - margin; 
      sidebar.style.marginTop = topOffset + "px"; 
     } 
    } else { 
     if (scroll < yPos + topOffset - margin) { 
      topOffset = scroll - yPos + margin; 
      if (topOffset < margin) { 
       topOffset = margin; 
      } 
      sidebar.style.marginTop = topOffset + "px"; 
     } 
    } 

    lastScroll = scroll; 
} 

screen.onscroll = OnBodyScroll; 
OnBodyScroll(); 

http://jsfiddle.net/ilyad/da543f40/3/