11

（スティッキー）スクロールサイドバーに取り組んでいます。問題は、ほとんどのスティッキー サイドバーが、サイドバーがビューポートよりも高くなる可能性があることを考慮していないことです (たとえば、多くのアイテムがバスケット (サイドバー) に追加された場合)。これは私が解決しようとしているものです。要件は次のとおりです。

  • サイドバーの高さがビューポートよりも高い場合は、コンテンツをスクロールし、さらに下にスクロールすると、div の下部がビューポートの下部にくっつく必要があります。

  • サイドバーの高さがビューポートよりも高い場合、その下の div は、ページの下部にいるときにのみ表示されます。

  • ユーザーが上にスクロールすると、サイドバーは上にスクロールして戻り、ビューポートの上部に戻ります。

  • サイドバーの高さがビューポートよりも小さい場合は、下にスクロールするときに上から固定する必要があります。

全体として、かなりの機能があり、それほど単純ではありません（私は思います）。私が達成しようとしていることに最も近いのは、次の例です: http://demo.techbrij.com/730/fix-sidebar-scrolling-jquery.phpしかし、コードの記述方法が適合しません私の中に。

これまでのところ、これは私が作ったものです: DEMO

そして、私が使用したjQueryコード：

jQuery(document).ready(function($) {

var $sidebar   = $('.sidebar'),
    $content   = $('.content');

if ($sidebar.length > 0 && $content.length > 0) {
    var $window    = $(window),
        offset     = $sidebar.offset(),
        timer;

    $window.scroll(function() {
        clearTimeout(timer);
        timer = setTimeout(function() {
            if ($content.height() > $sidebar.height()) {
                var new_margin = $window.scrollTop() - offset.top;
                if ($window.scrollTop() > offset.top && ($sidebar.height()+new_margin) <= $content.height()) {
                    // Following the scroll...
                    $sidebar.stop().animate({ marginTop: new_margin });
                } else if (($sidebar.height()+new_margin) > $content.height()) {
                    // Reached the bottom...
                    $sidebar.stop().animate({ marginTop: $content.height()-$sidebar.height() });
                } else if ($window.scrollTop() <= offset.top) {
                    // Initial position...
                    $sidebar.stop().animate({ marginTop: 0 });
                }
            }
        }, 100); 
    });
}

});
4

3 に答える 3

3

マージンを使用してスティッキーサイドバーを移動しています-これは、現在の質問を処理するためのトリッキーな方法であることがわかりました（そして、より重い方法になる可能性があります）。

一般に、サイドバーを「位置: 固定」にするクラスを単純に追加して、ブラウザーがロック状態を維持するという面倒な作業を行うようにするのが好きです。

現在の質問では、スクロールした位置に基づいて、その位置の固定 div (高さ 100% にもなります) をプログラムでスクロールするだけです。私の例を見て、これがあなたが求めている効果であるかどうかを確認してください：http://jsfiddle.net/ZHP52/1/

ここにjqueryがあります：

jQuery(document).ready(function($) {

var $sidebar   = $('.sidebar'),
    $content   = $('.content');

//Since our CSS is going to monkey with the height as you scroll, I need to know the initial height.
var sidebarHeight = $sidebar.height();

if ($sidebar.length > 0 && $content.length > 0) {
    var $window    = $(window),
        offset     = $sidebar.offset(),
        timer;

    $window.scroll(function() {

        if ($content.height() > sidebarHeight) {
            var new_margin = $window.scrollTop() - offset.top;
            if ($window.scrollTop() > offset.top) {
                // Fix sidebar
                $sidebar.addClass("fixed");
                // Scroll it the appropriate ammount
                $sidebar.scrollTop(new_margin);            
            }else{
                $sidebar.removeClass("fixed");
            }
        }
    });
}

});
于 2013-03-27T19:28:39.233 に答える
0

これはあなたが探している機能だと思います：http://jsfiddle.net/JVe8T/7/

乱雑なコードで申し訳ありませんが、最適化はかなり簡単なはずです。また、sidebar2 (粘着性のないもの) には高さが定義されていると仮定しました。そうでない場合は、jquery でそれを検出し、下のオフセットに .css セレクターを使用できます。

これが私のコードです：

jQuery(document).ready(function() {

    var tmpWindow = $(window),
        sidebar = $('.sidebar'),
        content = $('.content'),
        sidebar1 = $('.sidebar1'),
        sidebar2 = $('.sidebar2'),
        viewportHeight = $(window).height(),
        sidebarHeight = sidebar.height(),
        sidebar1Height = sidebar1.height(),
        sidebar2Height = sidebar2.height(),
        offsetBottom;


    tmpWindow.scroll(function(){

        offsetBottom = content.height() - sidebar2Height;

        //if sidebar height is less that viewport
        if (viewportHeight > sidebarHeight) {
            sidebar.addClass('fixed');
        } 

        //sticky sidebar1
        if ((tmpWindow.scrollTop() + viewportHeight) > sidebar1Height ) {
            sidebar1.addClass('bottom');
        } else {
            sidebar1.removeClass('bottom');
        }

        //end of content, visible sidebar2
        if ((tmpWindow.scrollTop() + viewportHeight) > offsetBottom) {
            sidebar1.removeClass('bottom');
            sidebar1.addClass('fixedBottom');
        } else {
            sidebar1.removeClass('fixedBottom');
        }

    });

});
于 2013-05-15T10:38:36.390 に答える