コンテナの終わりに固定サイドバーを停止する方法

Question

2つの列を持つコンテナがあり、そのうちの1つにサイドバーがあります。

JSFiddle

サイドバーが固定されており、それは底部付近になったとき、私はそれが大体容器の底に滞在持ってbottomを変更するjQueryのを使用。

コンテナの底に当たったときに完全に動くのを止めるにはどうすればいいですか（赤で囲まれています）？それは、任意の高さのサイドバーのために働く必要があります。

HTML

<div class="container"> 
    <div class="col-left"> 
    <div class="sidebar"> 
     fixed sidebar 
    </div> 
    </div> 

    <div class="col-right"> 
    <p>Paragraph</p> 
    <p>Paragraph</p> 
    <p>Paragraph</p> 
    </div> 
</div> 

<footer>Footer</footer> 

CSS

.container { 
    outline: 1px solid red; 
    position: relative; 
} 

.col-left { 
    width: 58%; 
    display: inline-block; 
    outline: 1px solid black; 
    vertical-align: top; 
    height: 100%; 
} 

.col-right { 
    width: 40%; 
    display: inline-block; 
    outline: 1px solid black; 
    vertical-align: top; 
} 

.sidebar { 
    position: fixed; 
    top: 50px; 
    left: 50px; 
    height: 200px; 
    width: 100px; 
    background: #fff; 
} 

footer { 
    background: #000; 
    width: 100%; 
    height: 300px; 
    margin-top: 100px; 
    color: #fff; 
} 

jQueryの（私はそれを再考する必要があると考えることが有用となります疑う）

jQuery(window).scroll(function(){ 
    var scrollBottom = jQuery(document).height() - jQuery(this).scrollTop() - jQuery(this).height(); 
    console.log(scrollBottom); 

    if (scrollBottom < 300){ 
     jQuery('.sidebar').css('bottom', Math.abs(scrollBottom - 420)); 
     jQuery('.sidebar').css('top', 'auto'); 
    } else { 
     jQuery('.sidebar').css('bottom', 'auto'); 
     jQuery('.sidebar').css('top', '50px'); 
    } 

Answer 1

関連要素の高さを計算し、ページの現在のスクロール位置を考慮に入れて、jQueryの解決策を説明します。サイドバーが通常コンテナの外側に移動すると、.lockクラスが追加され、CSSでそれを固定します。

以下の作業例：

var $sidebar = $('.sidebar'); 
 
var $container = $('.container'); 
 
var sideBottom = $sidebar.offset().top + $sidebar.height(); 
 
var contBottom = $container.offset().top + $container.height(); 
 

 
$(window).scroll(function() { 
 
    if (window.scrollY + sideBottom > contBottom) { 
 
    $sidebar.addClass('lock'); 
 
    } else if ($sidebar.hasClass('lock')) { 
 
    $sidebar.removeClass('lock'); 
 
    } 
 
});

body { 
 
    background: #eee; 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    outline: 1px solid red; 
 
    position: relative; 
 
} 
 

 
.col-left { 
 
    width: 58%; 
 
    display: inline-block; 
 
    outline: 1px solid black; 
 
    vertical-align: top; 
 
    height: 100%; 
 
} 
 

 
.col-right { 
 
    width: 40%; 
 
    display: inline-block; 
 
    outline: 1px solid black; 
 
    vertical-align: top; 
 
} 
 

 
.sidebar { 
 
    position: fixed; 
 
    top: 50px; 
 
    left: 50px; 
 
    height: 140px; 
 
    width: 100px; 
 
    background: #fff; 
 
} 
 

 
.sidebar.lock { 
 
    position: absolute; 
 
    bottom: 0; 
 
    top: auto; 
 
} 
 

 
footer { 
 
    background: #000; 
 
    width: 100%; 
 
    height: 400px; 
 
    margin-top: 100px; 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="col-left"> 
 
    <div class="sidebar"> 
 
     fixed sidebar 
 
    </div> 
 
    </div> 
 

 
    <div class="col-right"> 
 
    <p>Paragraph</p> 
 
    <p>Paragraph</p> 
 
    <p>Paragraph</p> 
 
    <p>Paragraph</p> 
 
    <p>Paragraph</p> 
 
    <p>Paragraph</p> 
 
    <p>Paragraph</p> 
 
    <p>Paragraph</p> 
 
    <p>Paragraph</p> 
 
    <p>Paragraph</p> 
 
    <p>Paragraph</p> 
 
    </div> 
 
</div> 
 

 
<footer>Footer</footer>