0

私たちのサイトには、スティッキー フッターを含む固定サイドバーがあります。これは、ブラウザの高さがサイドバー コンテンツの高さよりも大きいディスプレイでは問題なく機能しましたが、小さいディスプレイではフッターが「切り取られていました」。

これを改善するために、フッターを相対的にサイドバー内に配置し、サイドバーに設定するように変更するメディア クエリを追加しましたoverflow: auto。

/* sidebar padding + menu height + footer height */
@media screen and (max-height: 580px) {
    .sidebar .footer {
        position: relative;
    }
}

これにより、少なくともサイドバーのコンテンツ全体を小さなディスプレイで表示できるようになりますが、サイドバーに見栄えの悪いスクロールバーが表示されることにもなります。

私が実現したいのは、ブラウザのビューポートがサイドバー コンテンツの高さよりも小さい場合、通常のページ スクロールバーを使用してスクロールしてすべてのコンテンツを表示できるようにすることです。

これは、メディアクエリを使用しpositionてサイドバーを変更することで可能だと思いますが、理解できないようです。

4

2 に答える 2

2

あなたが説明しているのは、「ビューポートの高さが580px未満の場合、サイドバーの位置を特定のスクロール距離まで固定し、静的に配置する」を指定するメディアクエリであるため、これが純粋なCSSで実現できるかどうかはわかりません. スクロールは、メディア クエリの範囲を超えるプロパティです。

ブラッドの答えに基づいて構築-jQueryでそれを行う簡単な方法は次のとおりです

jsFiddle の例

$(document).scroll(function(){    
    if ($(window).height()<=580){
        var sidebarObj=$(".sidebar");
        var extraSidebar=sidebarObj.height()-$(window).height();        
        if ($(document).scrollTop()>extraSidebar){            
            if (sidebarObj.css("position")!="fixed"){
                sidebarObj.css({
                    "position": "fixed",
                    "top": -extraSidebar+"px"
                });
            }
        }
        else{
            sidebarObj.css({
                "position": "static",
                "top": 0+"px"
            });
        }
    }
});
于 2013-03-20T19:08:07.630 に答える
2

今すぐ理解してください。コメントの前にフィドルを見ていましたが、まだよくわかりませんでした:)

これがメディアクエリで探しているものだと思います：

/* sidebar padding + menu height + footer height */
@media screen and (max-height: 580px) {
    .sidebar .footer {
        position: relative;
    }
    .sidebar{position: static; overflow:visible; float:left;}
}

.sidebar のスタイルであるキー

于 2013-03-20T17:09:46.443 に答える