8

サイドバーの次の機能を開発しようとしています。簡単に言うと、サイドバーの高さは 100% で、絶対位置に配置されます。その中にはコンテンツがあり、ページと共にスクロールする必要がありますが、サイドバーは固定されています。さらに、ユーザーが下または上にスクロールできるかどうかを示すシャドウ効果/応答があります。たとえば、下/上にスクロールできるものがある場合はそこに影を表示し、そうでない場合は影を表示しません。簡単なモックアップを作成しました。ページがスクロールされた場合に何が起こるかを理解するのに役立つことを願っています:

ここに画像の説明を入力

コンテンツとサイドバーを使って簡単なjsfidleを作成しました。これは、現時点で入手できる範囲です。http://jsfiddle.net/cJGVJ/3/ これは css と html だけでは実現できず、クロスブラウザーで動作すると思いますので、jQuery ソリューションは大歓迎です。

HTML 

<div id="main"> <!-- Demo Content (Scroll down for sidebar) -->
    <!-- Demo content here -->
</div>

<aside id="sidebar">
    <div id="side-content-1"></div>
    <div id="side-content-2"></div>
 </aside>

CSS

body {
    background: #f3f3f3;
    margin: 0;
    padding: 0;
}

#page-wrapper {
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
}

#sidebar {
    width: 30%;
    float: left;
    background: #ffffff;
    padding: 10px;
    height: 100%;
    position: fixed;
}

#main {
    width: 60%;
    float: right;
}

#side-content-1, #side-content-2 {
    height: 400px;
}

#side-content-1 {
    background: red;
    opacity: 0.4;
}

#side-content-2 {
    background: green;
    opacity: 0.4;
    margin-top: 10px;
}

編集 サイドバーのコンテンツは合計するとページ コンテンツの 1 つに満たないので、下部に到達すると (下部の影が消えても) そこにとどまる必要がありますが、メイン コンテンツは下にスクロールできます。

4

2 に答える 2

2

これはまだ少し大雑把ですが、その始まりです：

私はそれを調べてもう少し洗練し、ウィンドウのサイズ変更の問題を処理しました.

これでうまくいくと思います:
更新された作業例

JS

$(window).scroll(function () {
    var y = $(window).scrollTop();
    var x = $(window).scrollTop() + $(window).height();
    var s = $('#sidebar').height();
    var o = $('#side-content-1').offset().top;
    var q = $('#side-content-1').offset().top + $('#side-content-1').height();
    var u = $('#side-content-2').offset().top;
    if (x > s) {
        $('#sidebar').css({
            'position': 'fixed',
                'bottom': '0',
                'width': '27%'
        });
        $('#bottomShadow').hide();
    }
    if (x < s) {
        $('#sidebar').css({
            'position': 'static',
                'width': '30%'
        });
        $('#bottomShadow').show();
    }
    if (y > o) {
        $('#topShadow').show().css({
            'position': 'fixed',
                'top': '-2px'
        });
    }
    if (y < o) {
        $('#topShadow').hide();
    }
    if (y > q - 4 && y < q + 10) {
        $('#topShadow').hide();
    }
    if (x > u - 10 && x < u + 4) {
        $('#bottomShadow').hide();
    }

});
var shadow = (function () {
    $('#topShadow, #bottomShadow').width($('#sidebar').width());
});

$(window).resize(shadow);
$(document).ready(shadow);

CSS

body {
    background: #f3f3f3;
    margin: 0;
    padding: 0;
}
#page-wrapper {
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
}
#sidebar {
    width: 30%;
    float:left;
    background: #ffffff;
    padding: 10px;
}
#main {
    width: 60%;
    float: right;
}
#side-content-1, #side-content-2 {
    height: 400px;
}
#side-content-1 {
    background: red;
    opacity: 0.4;
}
#side-content-2 {
    background: green;
    opacity: 0.4;
    margin-top: 10px;
}
#topShadow {
    display:none;
    height:2px;
    box-shadow:0px 5px 4px #000;
}
#bottomShadow {
    position:fixed;
    bottom:-3px;
    height:2px;
    width:99%;
    box-shadow:0px -5px 4px #000;
}
于 2013-06-01T17:50:21.063 に答える
0

CSS Tricks の Web サイトには、 Persistent Headersに関する記事があり、JQuery を少し使って同様のことを実現しています。

于 2013-06-01T22:35:11.250 に答える