html - スクロール時に div を追従させるにはどうすればよいですか?

Question

左側に、営業時間と天気を含む div があります。ユーザーのスクロール方法に応じて、その div を上下にスクロールしたいと思います。したがって、ページに合わせて上下に移動します。これをどのように試みますか？これは私のウェブサイトです。

ありがとう

score 86 · Accepted Answer

css プロパティ Fixed を使用するか、さらに微調整が必要な場合は、javascript を使用して、ユーザーエージェントのスクロールバーの位置を定義する scrollTop プロパティを追跡する必要があります (0 が一番上にあり、x が上にあります)。一番下）

.Fixed
{
    position: fixed;
    top: 20px;
}

またはjQueryを使用：

$('#ParentContainer').scroll(function() { 
    $('#FixedDiv').css('top', $(this).scrollTop());
});

score 16 · Accepted Answer

CSS のスタイリングを使用して、何かを配置する方法を定義できます。要素をfixedとして定義すると、常に画面上の同じ位置に留まります。

div
{
    position:fixed;
    top:20px;
}

score 13 · Accepted Answer

fixedCSS の position プロパティを使用してこれを実現できます。これに関する基本的なチュートリアルがここにあります。

編集: ただし、このアプローチは IE バージョン < IE7 ではサポートされておらず、標準モードの場合は IE7 でのみサポートされています。これについては、ここでもう少し詳しく説明します。

hereで説明されているハックもあります。これは、絶対配置に影響を与えずに IE6 で固定配置を実現する方法を示しています。Web サイトでターゲットにしている IE のバージョンを教えてください。

score 8 · Accepted Answer

より良い JQuery の回答は次のようになります。

$('#ParentContainer').scroll(function() { 
    $('#FixedDiv').animate({top:$(this).scrollTop()});
});

scrollTop の後に数字を追加することもできます。つまり、.scrollTop() + 5 を追加して、バフを与えることができます。

デュレーションを 100 に制限し、デフォルトのスイングから線形イージングに移行することもお勧めします。

$('#ParentContainer').scroll(function() { 
    $('#FixedDiv').animate({top:$(this).scrollTop()},100,"linear");
})

6 に答える 6