私のaspxページには、左と右の2つの部分があります。右側(ページの実際のコンテンツ)をスクロールしながら、常に左側(実際には「div」包含ツリービュー)を表示したい。ありがとう
こんにちは私は最高の解決策を見つけました!いつものようにJQUERYは私の命を救います!!
必要に応じてDivという名前を付けてください。以下の例では同じものを選択しました。#scrollingDiv。
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script>
$().ready(function() {
var $scrollingDiv = $("#scrollingDiv");
$(window).scroll(function(){
$scrollingDiv
.stop()
.animate({"marginTop": ($(window).scrollTop() )}, "slow" );
});
});
</script>
私はウェブサイトからそのコードを取得しました。それは機能し、理解するのは非常に簡単です。
Div要素にposition: fixed;
を配置する必要があります。これでビューポートに固定されます。
CSSでdivの位置をFixedに設定する必要があります。詳細は this link を参照してください。 CSSの上部と左を使用して位置を設定する必要があるので、修正する場所がわかります。
問題は、ブロックが動くと、注意力と読書に集中できるようになることです。
この機能を使用してこれを修正します。
このコードは完璧です:
(必要に応じて「220」と「46px」を変更してください)
var $scrollingDiv = $("#scrollingDiv");
$(window).scroll(function(){
if ($(window).scrollTop()>220) {
$scrollingDiv
.css("position",'fixed' )
.css("top",'46px' )
} else {
$scrollingDiv
.css("position",'' )
.css("top",'' )
}
});
2020年まで早送りし、CSSでこれを実行できるようになりました。
<div style="position: sticky; top: 0;"> Tree view </div>
top
は、スクロールしたときにdivが留まるビューポートの上部までの距離です。top
の指定は必須です。 (…)スティッキーdivは、スクロールした場合を除いて、通常のdivと同じように動作し、ブラウザーの上部に固定されます。
jsfiddle は、あなたにアイデアを与えるためのものです。