0

このサイドバーを再現しようとしています:

http://www.fastcodesign.com/3020546/innovation-by-design/would-steve-jobs-have-become-steve-jobs-using-a-computer-designed-by-st

ページを下にスクロールしているように見えますが、サイドバーの一番下に到達すると (メイン コンテナーに表示するコンテンツがまだある限り)、サイドバーは Web ページの一番下に固定されます。ただし、上にスクロールすると、サイドバーが上にスクロールします..

これをどのように再現できますか？

乾杯！

4

2 に答える 2

3

私の答えのほとんどは、この質問から借りています。

これは、JavaScript/jQuery で使用する sidebarAnchor を使用した基本的な body/sidebar レイアウトです。

<div class="container">
  <div class="body">
  <!-- Body content -->
  </div>
  <div id="sidebarAnchor"></div>
  <div class="sidebar" id="sidebar">
  <!-- Sidebar Content -->
  </div>
</div>

CSS。ここで最も重要なのは、jQuery で追加する .sticky クラスです。残りはデモ レイアウト用です。

div.container {
    overflow: hidden;
    width: 100%;
}

div.body {
    width: 45%;
    float: left;
}

div.sidebar {
    width: 45%;
    float: right;
}

.stick {
    position: fixed;
    bottom: 0;
    right: 0;
}

そしてjQuery/JS。説明についてはコメントを参照してください。

$(document).ready(function() {
    // Cache selectors for faster performance.
    var $window = $(window),
        $sidebar = $('#sidebar'),
        $sidebarAnchor = $('#sidebarAnchor');

    // Run this on scroll events.
    $window.scroll(function() {
        var window_top = $window.scrollTop();
        var div_top = $sidebarAnchor.offset().top;
        if (window_top > div_top) {
         // Make the div sticky.
         $sidebar.addClass('stick');
         $sidebarAnchor.height($sidebar.height());
        }
        else {
            // Unstick the div.
            $sidebar.removeClass('stick');
            $sidebarAnchor.height(0);
        }
    });
});
于 2013-10-28T15:08:32.683 に答える
0

document.body.scrollTop + window.innerHeightがサイドバーの高さ以上かどうかを確認します。

http://jsbin.com/AjagUzi/1/edit?html,css,js,output

于 2013-10-28T15:09:17.397 に答える