0

ページがスクロールされ、上限と下限があるときにページ内をスクロールする要素について、より多くの情報を見つけようとしています。

具体的には、ページがスクロールするときに、ヘッダーとフッターの境界内でセカンダリコンテンツセクション（サイドバー）をスクロールする機能を追加しようとしています。

例として、Appleは、含める製品機能を選択するときに、ストアでそれを使用します-http://store.apple.com/us/configure/MD093LL/A。

この機能を再現することはできますが、stackoverflowの助けを借りて、より徹底的にテストされた、クロスブラウザーに準拠したコードなどを見つけることができると確信しています。

理想的には、jQueryのようなはるかに大きなライブラリの一部としてではなく、それ自体で機能するものを見つけたいと思います。これは単なる好みですが、jQueryタイプのライブラリを含む潜在的なソリューションを受け入れています...

4

1 に答える 1

1

CSSだけが必要ですposition: fixed：

body
{
    margin-top: 150px; /* header height */
    margin-bottom: 250px; /* footer height */
}
.header, .footer
{
    position: fixed;
    left: 0;
    right: 0;
}
.header
{
    top: 0;
}
.footer
{
    bottom: 0;
}

これは、関連するすべてのデスクトップ ブラウザーで機能します。IE6 では機能しませんが、IE6 はほとんど機能しなくなりました。また、どのモバイル ブラウザーでも機能しません。実際、メディア クエリを使用して、モバイル ブラウザーのこれらのスタイルをオーバーライドする必要があります。このようなものがうまくいくかもしれません：

@media screen and (max-device-width: 500px)
{
    body
    {
        margin-top: 8px;
        margin-bottom: 8px;
    }
    .header, .footer
    {
        position: static;  /* or maybe relative */
    }
}
于 2013-01-10T18:53:01.137 に答える