2

説明に役立つ例を作成しました。http://jsfiddle.net/9AUbj/1/

<style>
div#one {}
div#two {
    height: 50px;
    background-color: blue;
    width: 1000px;
}
div#three {
    height: 1000px;
}
</style>
...
<div id="one">Hello World!</div>
<div id="two"></div>
<div id="three"></div>

「Hello World!」をお願いします。ユーザーが水平方向にスクロールすると、ウィンドウとともに水平方向に移動します。しかし、ユーザーが垂直にスクロールしたときに、ウィンドウと一緒に垂直に移動したくありません。これを行う最善の方法は何ですか？Bootstrap と jQuery UI を使用しています。これらが役立つ場合があります。ただし、純粋な CSS ソリューションにも興味があります。

前もって感謝します:-) ktm

4

3 に答える 3

2

ウィンドウをスクロールするたびに、#one 要素を再配置して、常に画面上に表示されるようにします。また、#one は position: absolute にする必要があります。

$(window).scroll(function () {
    $("#one").css({
        left: $(this).scrollLeft()
    });
});

これが新しいコードのフィドルです: http://jsfiddle.net/9AUbj/15/

于 2013-02-27T00:27:05.897 に答える
2

CSS のみのソリューションが優れていることは認めますが、軸に基づいて配置を適用することはできません。固定配置の仕組みでは、固定配置要素が外側にはみ出している場合でも、ドキュメントを水平方向にスクロールすることはできません。

ただし、これはjQueryで行うのは非常に簡単です

$(document).on('scroll', function () {
    $("#two").css('top', $(this).scrollTop());
});

これは#two絶対に配置する必要があります。

http://jsfiddle.net/9AUbj/16/

于 2013-02-27T00:29:35.970 に答える