5

ユーザーが垂直方向にスクロールすると、サイドバーがユーザーと一緒に垂直方向にスクロールする左側の垂直サイドバーがあります。ただし、ウィンドウが小さすぎる場合にユーザーが水平方向にスクロールすると、垂直サイドバーがウィンドウと一緒にスライドします。サイドバーが水平方向にスクロールしないようにするだけでなく、サイドバーをユーザーと一緒に垂直方向にスクロールできるようにするにはどうすればよいですか。

そして、私はこれをしたくありません。

overflow: hidden;

ユーザーに水平方向にスクロールできるようにしたいのですが、サイドバーを一緒に表示したくないだけです。

これは私のJavaScriptです：

$(document).ready(function(){
    var top = $("#sidebar").offset().top;
    $(window).scroll(function(){
        var y = $(window).scrollTop();
        if (y >= top) {
            $("#sidebar").addClass('fixed');
        } else {
            $("#sidebar").removeClass('fixed');
        }
    });
});

そして私のCSSは：

#sidebar {
    position: absolute;
    height: 100%;
    min-width: 100px;
    width: 100px;
    overflow: hidden;
    background-color: #ededed;
    border-right: 1px solid #aaa
    }
#sidebar.fixed {
    position: fixed;
    height:100%;
    top: 0%;
    z-index: 1;
}
4

1 に答える 1

4

その後、おそらく間違ったアプローチが修正されました。

理論的には、この.scroll機能を使用して、上が変更された場合に要素の絶対上の位置を更新できますが、左のプロパティが変更された場合はスクロール イベントを無視できます。

この小さくて非常に単純な例を見てください。http://jsfiddle.net/Hbkdt/

注意: これをアニメーション機能と組み合わせて、ウィンドウ イベントをデバウンスして、30 ～ 50 ミリ秒ごとにのみ起動して値を更新するようにすることができます。

アニメーションとデバウンスの例: http://jsfiddle.net/Hbkdt/1/

于 2012-09-22T15:26:55.657 に答える