高度なjQuery「Sticky Bottom」とスクロールサイドバーの問題

Question

この問題の解決策をどこからでも探し、jQueryウェイポイントのようないくつかのプラグインを使用しようとすると、成功しなくなりました。これに対する解決策を提示することができます。

ちょうどテキストで説明するのが少し複雑ですので、私はその動作の図を作成しました。

スパムフィルタとして、このリンクを参照してください。私はまだ投稿とイメージさせません。

すべての要素は、内容に応じて、高さが可変です。

1. ページのコンテンツよりもはるかに短いサイドバー、サイドバーのdivの底がビューポートに入ると

2. を有する

それは残りしばらくその位置に固定されます

3. のコンテンツは通常通りスクロールし続けます。

4. サイドバーがフッタに到達するまで、通常どおりフッタを上にスクロールします。

これは、ユーザーがページの上部と反対方向にスクロールすると、逆も同様に機能します。

Answer 1

Here私の解決策です。この例を使用して、問題に対する独自のソリューションを実装できます。

HTML：

<div id="header"> 
    header 
</div> 
<div id="left"> 
    Donec placerat. Nullam nibh dolor, blandit sed, fermentum id, imperdiet sit amet, neque. Nam mollis ultrices justo. Sed tempor. Sed vitae tellus. Etiam sem arcu, eleifend sit amet, gravida eget, porta at, wisi. Nam non lacus vitae ipsum viverra pretium. Phasellus massa. Fusce magna sem, gravida in, feugiat ac, molestie eget, wisi. Fusce consectetuer luctus ipsum. Vestibulum nunc. Suspendisse dignissim adipiscing libero. Integer leo. Sed pharetra ligula a dui. Quisque ipsum nibh, ullamcorper eget, pulvinar sed, posuere vitae, nulla. Sed varius nibh ut lacus. Curabitur fringilla. Nunc est ipsum, pretium quis, dapibus sed, varius non, lectus. Proin a quam. Praesent lacinia, eros quis aliquam porttitor, urna lacus volutpat urna, ut fermentum neque mi egestas dolor. 
    Donec placerat. Nullam nibh dolor, blandit sed, fermentum id, imperdiet sit amet, neque. Nam mollis ultrices justo. Sed tempor. Sed vitae tellus. Etiam sem arcu, eleifend sit amet, gravida eget, porta at, wisi. Nam non lacus vitae ipsum viverra pretium. Phasellus massa. Fusce magna sem, gravida in, feugiat ac, molestie eget, wisi. Fusce consectetuer luctus ipsum. Vestibulum nunc. Suspendisse dignissim adipiscing libero. Integer leo. Sed pharetra ligula a dui. Quisque ipsum nibh, ullamcorper eget, pulvinar sed, posuere vitae, nulla. Sed varius nibh ut lacus. Curabitur fringilla. Nunc est ipsum, pretium quis, dapibus sed, varius non, lectus. Proin a quam. Praesent lacinia, eros quis aliquam porttitor, urna lacus volutpat urna, ut fermentum neque mi egestas dolor.Donec placerat. Nullam nibh dolor, blandit sed, fermentum id, imperdiet sit amet, neque. Nam mollis ultrices justo. Sed tempor. Sed vitae tellus. Etiam sem arcu, eleifend sit amet, gravida eget, porta at, wisi. Nam non lacus vitae ipsum viverra pretium. Phasellus massa. Fusce magna sem, gravida in, feugiat ac, molestie eget, wisi. Fusce consectetuer luctus ipsum. Vestibulum nunc. Suspendisse dignissim adipiscing libero. Integer leo. Sed pharetra ligula a dui. Quisque ipsum nibh, ullamcorper eget, pulvinar sed, posuere vitae, nulla. Sed varius nibh ut lacus. Curabitur fringilla. Nunc est ipsum, pretium quis, dapibus sed, varius non, lectus. Proin a quam. Praesent lacinia, eros quis aliquam porttitor, urna lacus volutpat urna, ut fermentum neque mi egestas dolor.Donec placerat. Nullam nibh dolor, blandit sed, fermentum id, imperdiet sit amet, neque. Nam mollis ultrices justo. Sed tempor. Sed vitae tellus. Etiam sem arcu, eleifend sit amet, gravida eget, porta at, wisi. Nam non lacus vitae ipsum viverra pretium. Phasellus massa. Fusce magna sem, gravida in, feugiat ac, molestie eget, wisi. Fusce consectetuer luctus ipsum. Vestibulum nunc. Suspendisse dignissim adipiscing libero. Integer leo. Sed pharetra ligula a dui. Quisque ipsum nibh, ullamcorper eget, pulvinar sed, posuere vitae, nulla. Sed varius nibh ut lacus. Curabitur fringilla. Nunc est ipsum, pretium quis, dapibus sed, varius non, lectus. Proin a quam. Praesent lacinia, eros quis aliquam porttitor, urna lacus volutpat urna, ut fermentum neque mi egestas dolor.Donec placerat. Nullam nibh dolor, blandit sed, fermentum id, imperdiet sit amet, neque. Nam mollis ultrices justo. Sed tempor. Sed vitae tellus. Etiam sem arcu, eleifend sit amet, gravida eget, porta at, wisi. Nam non lacus vitae ipsum viverra pretium. Phasellus massa. Fusce magna sem, gravida in, feugiat ac, molestie eget, wisi. Fusce consectetuer luctus ipsum. Vestibulum nunc. Suspendisse dignissim adipiscing libero. Integer leo. Sed pharetra ligula a dui. Quisque ipsum nibh, ullamcorper eget, pulvinar sed, posuere vitae, nulla. Sed varius nibh ut lacus. Curabitur fringilla. Nunc est ipsum, pretium quis, dapibus sed, varius non, lectus. Proin a quam. Praesent lacinia, eros quis aliquam porttitor, urna lacus volutpat urna, ut fermentum neque mi egestas dolor. 
</div> 
<div id="right"> 
Donec placerat. Nullam nibh dolor, blandit sed, fermentum id, imperdiet sit amet, neque. Nam mollis ultrices justo. Sed tempor. Sed vitae tellus. Etiam sem arcu, eleifend sit amet, gravida eget, porta at, wisi. Nam non lacus vitae ipsum viverra pretium. Phasellus massa. Fusce magna sem, gravida in, feugiat ac, molestie eget, wisi. Fusce consectetuer luctus ipsum. amet, gravida eget, porta at, wisi. Nam non 000000000 lacus vitae ipsum viverra pretium. Phasellus massa. Fusce magna sem, gravida in, feugiat ac, molestie eget, wisi. Fusce consectetuer luctus ipsum. 
</div> 
<div id="footer"> 
    footer 
</div> 

はCSS：

body { position: relative; } 
#header { width: 100%; height: 100px; background: #f00; margin-bottom: 10px; } 
#left { width: 75%; background: #f00; float: left; margin-bottom: 10px; } 
#right { width: 20%; background: #00f; float: right; position: relative; right: 0; } 
#footer { clear: both; width: 100%; height: 100px; background: #f00; } 

、最終的にはJavascriptを：

function scrollCheck() { 
    var $right = $('#right'), 
     scrollTop = $(window).scrollTop(), 
     windowHeight = $(window).height(), 
     docHeight = $(document).height(), 
     rightHeight = $right.height(), 
     distanceToTop = rightHeight + 110 - windowHeight, 
     distanceToBottom = scrollTop + windowHeight + 110 - docHeight; 
    if (scrollTop > distanceToTop) { 

     $right.css({ 
      'position': 'fixed', 
      'bottom': (scrollTop + windowHeight + 110 > docHeight ? distanceToBottom + 'px' : '0px') 
     }); 
    } 
    else { 
     $right.css({ 
      'position': 'relative', 
      'bottom': 'auto' 
     }); 
    } 
} 

$(window).bind('scroll', scrollCheck);