私はこのトピックがすでにかなり頻繁に投稿されていることを知っていますが、提示された解決策のどれも私にはまったく役に立ちませんでした。ページの左側にサイドバーがありposition:fixed、CSSで割り当て、水平方向にスクロールしたいと思います（ページ上の他のすべてのコンテンツと一緒に）
ヘッダーとフッターについて、次のような問題を解決しました。
$(window).scroll(function ()
{
$("header,footer").css('margin-left', -($(window).scrollLeft()) + "px");
});
しかし、これは私のサイドバーでは適切に機能しません。これは私のサイドバーのhtmlです：
<div class="fullscreen_block hided">
<div class="left-sidebar-block">
およびCSS：
.left-sidebar-block {
position: fixed;
margin-left: 70px;
}
上記のJSコードを使用せずにこれを修正する方法を誰かに教えてもらえますか？（他のJS、CSS、jQueryは問題ありません）
ありがとう！
まず、のscrollTop代わりに使いたいと思いますscrollLeft。あなたの説明から、ユーザーが下にスクロールするときに要素を左にスライドさせたいように思えます。scrollTopユーザーがスクロールした距離が表示されます。
次に、ブラウザのサポート要件を満たしている限り、transformプロパティの代わりにプロパティを使用することをお勧めしmarginます。スクロールのトリックは、あなたのような高性能CSSプロパティを使用しようとする必要がありますので、多くの場合、パフォーマンスの集中しているtransformとopacity遅くなる性質が好きなのではなくmargin、leftとdisplay。
次のコードは、あなたがやろうとしていると私が思うことを実行します。（Codepenデモ：http：//codepen.io/regdoug/pen/yyYvaV ）：
$(window).scroll(function ()
{
var top = $(window).scrollTop();
$("left-sidebar-block").css('transform', 'translateX(' + (-top) + "px)")
.css('-ms-transform', 'translateX(' + (-top) + "px)")
.css('-webkit-transform', 'translateX(' + (-top) + "px)");
});
参考文献
http://www.html5rocks.com/en/tutorials/speed/scrolling/
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加