jQueryのは - div要素内のページあなたとダウン要素のスクロールを持って

Question

私がこれまでに次のコードを持っている：

HTML

<div id="header"></div> 
<div id="content"> 
    <div class="sidebar-wrapper"></div> 
</div> 
<div class="session-wrapper"></div> 
<div id="footer"></div> 

CSS

#header { 
    height: 600px; 
    width: 100%; 
    background: black; 
} 
#content { 
    height: 2000px; 
    width: 100%; 
    background: #eeeeee; 
} 

.sidebar-wrapper { 
    width: 350px; 
    height: 350px; /*depends on content*/ 
    background: rgba(0,0,0,0.2); 
    border-radius: 20px; 
    padding: 20px; 
    margin-top: 50px; 
} 

.session-wrapper { 
    height: 200px; 
    width: 100%; 
    background: #000000; 
} 

#footer { 
    width: 100%; 
    height: 500px; 
    background: #888; 
} 

をjQuery

jQuery(window).scroll(function(e){ 

var sidebar = jQuery('.sidebar-wrapper'); 
var sessions = jQuery('.session-wrapper'); 

var scrollTop  = jQuery(window).scrollTop(), 
    elementOffset = sidebar.offset().top, 
    distance  = (elementOffset - scrollTop), 
    sessionOffset = sessions.offset().top; 

var isPositionFixed = (sidebar.css('position') == 'fixed'); 

    if(distance < 60 && (sessionOffset - elementOffset) > 800 && !isPositionFixed) { 
      sidebar.css({'position': 'fixed', 'top': '100px', 'width': '350px'}); 
    } 
    if((sessionOffset - elementOffset) < 800 && isPositionFixed || scrollTop > 1900) { 
      sidebar.css({'position': 'static', 'top': '0px', 'width': '100%'}); 
    } 

}); 

SEE JSFIDDLE

それは私が取得しようとしています20ピクセル離れしたら、それは、離れて.sessions-wrapperから20ピクセル程度になるまで基本的に、私が達成しようとしていることはあなたとページダウンその灰色のボックス（sidebar-wrapper）スクロールですそれが元の位置になるまで、スクロールして元の位置に戻るまでスクロールバックするまで、この位置に留まります。私はほぼそこにいると思いますが、私は仕事にこれを得るためにいくつかの助けが必要です...

ありがとうございます！

Answer 1

これをアーカイブするには、さまざまな手法を使用できます。ここを参照してください

#sidebar-wrapper{ 
    position: -webkit-sticky; 
    position: -moz-sticky; 
    position: -o-sticky; 
    position: -ms-sticky; 
    position: sticky; 
    bottom: 0px; 
    line-height: 30px; 
    background: gray; 
} 

：新しいposition:stickyプロパティは、同様の結果を達成するためにhttp://jsfiddle.net/4hznD/

をしかし、私は、あなたが探していることはこれに似ていると思います：

ます：http://jsfiddle.net/FDv2J/4/は（jQuery scrolling DIV: stop scrolling when DIV reaches footerから抽出します）同様のコードを使用することができます（それを適用する必要があります）：

$(function() { 
    $.fn.scrollBottom = function() { 
     return $(document).height() - this.scrollTop() - this.height(); 
    }; 

    var $el = $('#sidebar>div'); 
    var $window = $(window); 

    $window.bind("scroll resize", function() { 
     var gap = $window.height() - $el.height() - 10; 
     var visibleFoot = 172 - $window.scrollBottom(); 
     var scrollTop = $window.scrollTop() 

     if(scrollTop < 172 + 10){ 
      $el.css({ 
       top: (172 - scrollTop) + "px", 
       bottom: "auto" 
      }); 
     }else if (visibleFoot > gap) { 
      $el.css({ 
       top: "auto", 
       bottom: visibleFoot + "px" 
      }); 
     } else { 
      $el.css({ 
       top: 0, 
       bottom: "auto" 
      }); 
     } 
    }); 
}); 

希望します！