web-dev-qa-db-ja.com

スクロールしながらdivをどのようにフォローしますか？

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

ありがとう

htmlscroll
49
user1165861

CssプロパティFixedを使用するか、より細かく調整する必要がある場合は、javascriptを使用して、ユーザーエージェントのスクロールバーの位置（0が最上位...およびxが0である場所を定義するscrollTopプロパティを追跡する必要があります下部に）

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

またはjQueryを使用：

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

これを行うには、fixed CSS位置プロパティを使用できます。これに関する基本的なチュートリアルがあります here 。

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

here で説明されているハックもあります。これは、絶対位置に影響を与えずにIE6で固定位置を達成する方法を示しています。ウェブサイトをターゲットにしているIEのバージョンは何ですか？

12
SuperTron

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

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

JQueryのより良い答えは次のとおりです。

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

ScrollTopの後に数字を追加することもできます（つまり、scrollTop（）+ 5）。

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

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

position：fixed;プロパティが動作するはずです。ウェブサイトで使用し、正常に動作しました。 http://www.w3schools.com/css/css_positioning.asp

4
droidDEXTER