web-dev-qa-db-ja.com

固定ヘッダーを水平方向にスクロールさせる

したがって、以下のコードをテストすると、ウィンドウのサイズを小さくした場合を除いて、すべてが正常であることがわかります。そのため、フラッシュメニュー（赤いdiv）がページの右側に表示されます。ウィンドウが900pxよりも小さい場合は、これまでのところ水平スクロールペインがありますが、ページのコンテンツをスクロールするだけです。上部もスクロールしたいのですが、水平にしておきたいので、固定したいです（常にサイトの上にとどまります）...

助言がありますか？私はグーグルからたくさんのことを試しました、しかしそれらのどれも正しいものではありませんでした4私...

thx＆g.r。エース

html：

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Titel</title>
    <link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="div_page" align="center">
        // page content goes here
    </div>
    <div id="div_menu">
        <img src="img/logo.png" alt="<Logo>" style="position:absolute; top:0px; left:20px; width:225px; height:150px;">
        <div id="div_flash"></div>
    </div>
</body>


</html>

css：

@charset "utf-8";

body {
    padding:0px;
    margin:0px;
}

#div_menu {
    position:fixed;
    top:0px; right:0px; left:0px;
    width:100%; height:40px;
    min-width:800px;
    overflow:visible;
    background-image:url(img/menu.png);
    background-position:top left;
    background-attachment:fixed;
    background-repeat:no-repeat;
    background-size:100% 40px;
    background-color:#333;
}

#div_flash {
    position:absolute;
    top:0px; left:250px;
    width:500px; height:150px;
    background-color:#F00;  
}

#div_page {
    position:absolute;
    top:40px; right:0px;left:0px;
    min-width:800px; min-height:500px;
}
cssscrollcss-position
16
Ace

私のように、純粋なCSSではこの問題を解決できません。ただし、JQueryを数行追加すると役立つ場合があります。

<script type="text/javascript">
    $(window).scroll(function() {
        $('#div_menu').css('top', $(this).scrollTop() + "px");
    });
</script>

#div_menuのCSS位置を絶対に変更する必要があります。

PD：純粋なJSでは次のようになります。

<script type="text/javascript">
    var div_menu = document.getElementById('div_menu'); 
    window.onscroll = function (e) {  
        if (div_menu)
            div_menu.style.top = window.pageYOffset + 'px';
    }  
</script>
6
BasTaller

これを参照してくださいFiddle： Link

$headerDiv = $('.header-wrapper');
$rowDiv = $('.row-wrapper');
$rowDiv.scroll(function(e) {
    $headerDiv.css({
        left: -$rowDiv[0].scrollLeft + 'px'
    });
});

役に立ちます。

3
Archna Rangrej

position:sticky , top:0で可能なCSSのみのソリューションがあります

3
Lakshminathan Laky

つまり、コンテンツボックス/ divの幅を修正したからです。ウィンドウサイズに応じて調整する場合は、次のような幅のパーセンテージを使用します。width：60％;これは実際にはレスポンシブデザインです。ただし、ページヘッダーのみをスクロールする場合は、divタグで必要なコンテンツをバインドしていることを確認してください。このタグの幅はページの幅によって決定され、そのタグにオーバーフロープロパティを適用する必要があります。水平方向のみが必要な場合は、overflow-x：scrollとoverflow-y hiddenを使用します（一方の方向が指定されている場合、もう一方は表示されますが、モードは無効になります）。

<div style="width:60%;overflow-x:scroll; overflow-y:hidden;">
   //your conetnt//including divs
</div>

ここで重要なのは、div/anyタグのコンテンツの幅がその外側のdivの幅よりも大きい場合は常に、オーバーフローが発生することです。この場合、overflowプロパティを使用して、hidden、show、scroll、autoなどのプロパティを設定できます。

ただし、レスポンシブデザインは次世代のマークアップ言語手法であり、幅（サイズ）はブラウザのサイズに依存する必要があるため、これは避けてください... :)

ハッピーコーディング.. :)

0
Vidhya Sagar Reddy