web-dev-qa-db-ja.com

スクロール中に常に表示されるdiv

私のaspxページには、左と右の2つの部分があります。右側（ページの実際のコンテンツ）をスクロールしながら、常に左側（実際には「div」包含ツリービュー）を表示したい。ありがとう

htmlvisibility
20
M Usman Shafique

こんにちは私は最高の解決策を見つけました！いつものように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>

私はウェブサイトからそのコードを取得しました。それは機能し、理解するのは非常に簡単です。

19
Despertaweb

Div要素にposition: fixed;を配置する必要があります。これでビューポートに固定されます。

17
danbee

CSSでdivの位置をFixedに設定する必要があります。詳細は this link を参照してください。 CSSの上部と左を使用して位置を設定する必要があるので、修正する場所がわかります。

4
Daniel Casserly

問題は、ブロックが動くと、注意力と読書に集中できるようになることです。

この機能を使用してこれを修正します。

このコードは完璧です：

（必要に応じて「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",'' )             
        }
        });
3
user3609824

2020年まで早送りし、CSSでこれを実行できるようになりました。

<div style="position: sticky; top: 0;"> Tree view </div>

ユーザーnpasがこれを非常にうまく説明しています ：

topは、スクロールしたときにdivが留まるビューポートの上部までの距離です。 topの指定は必須です。 （…）

スティッキーdivは、スクロールした場合を除いて、通常のdivと同じように動作し、ブラウザーの上部に固定されます。

jsfiddle は、あなたにアイデアを与えるためのものです。

MDNドキュメント

すべての最新のブラウザでサポートされています

0
Grilse