1

https://github.com/brandonaaron/jquery-mousewheelで水平スクロール プラグインを使用して水平にスクロールするサイトがあります。問題ありません。

私の質問は、画面の右側から 100 ピクセルで始まる高さ 100% の幅 250 ピクセルの div があることです。(水平方向に) スクロールすると、div が左にスクロールし、最終的に画面から消えます。div の Position は Absolute に設定されています。私が望むのは、divがブラウザウィンドウの左側に当たると、divが画面の左側に固定されることです。

画面の特定の場所 (左端) に到達したら、JS を使用して div の CSS を変更する必要があると思います。私はかなりの数のサイトが垂直スクロールでこれを実現しているのを見てきました.垂直スクロールでは、メニューバーが画面の上部に達すると固定されます. メニューがページの途中から始まり、スクロールで上に移動した可能性があります。水平面で同じ効果を達成したいだけです。

私は一般的にコードに比較的慣れておらず、Javascript も初めてです。噛めないほど噛んでいるかもしれませんが、挑戦するのが好きです。助けてくれてありがとう。

私が変更するCSSコードは

#header {
    width: 250px;
    background: rgba(22,22,22,.85);
    height: 100%;
    position: absolute;
    margin-left: calc(100% - 350px);
    z-index: 999;
}

次に変更します

#header {
    width: 250px;
    background: rgba(22,22,22,.85);
    height: 100%;
    position: fixed;
    margin-left: 0px;
    z-index: 999;
}
4

2 に答える 2

0

これを垂直に行う方法を説明する投稿がありますが、同じ概念があなたの場合にも適用されるはずです。

チュートリアル: http://jqueryfordesigners.com/fixed-floating-elements/

デモ: http://jqueryfordesigners.com/demo/fixedfloat.html

于 2013-07-31T15:29:55.340 に答える
0

これは、あなたの質問から理解したとおりに試したものです..nはい、ユーザーjavascriptがあります..

HTML:

<div id="headerSlideContainer">

    <div id="headerSlideContent">

        Header content goes here!

    </div>
    <div id="new">
        Other Contents
    </div>

</div>

CSS:

#headerSlideContainer {
    position: absolute;

    top:0px;
    width: 100%;

   height:1000px;
    background: black;
}
#headerSlideContent {
    width: 250px;
    background-color:red;
    height: 100%;
    position: fixed;
    margin-left: 0px;
    z-index: 999;
}

#new{
    top:60px;
    z-index:2;
    height:100px;
    background:Orange;
    position:absolute;
    color: white;

}

そしてjs：

$(function() {

    var bar = $('#headerSlideContainer');
    var top = bar.css('top');
    $(window).scroll(function() {

        if($(this).scrollright() > 100) {
            bar.stop().animate({'top' : '5px'}, 500);
        } else {
            bar.stop().animate({'top' : top}, 500);
        }
    });
});

必要に応じてスクロールライトの量を変更してください。スクロールライトが機能しない場合は、scrollleft() を試してください。

于 2013-07-31T13:02:47.410 に答える