0

こんにちは、単一ページの Web サイトの画面上部に固定されたフローティング メニューがあります。メニュー項目をクリックすると、jquery を使用してページが適切なセクションまでゆっくりとスクロールします。画面上部に固定メニューの次のコードがあります。

<style>
.fixed_elements{ position:fixed; top:100px; }
        #top-floating-bar{ background: none repeat scroll 0 0 #2D2D2D; height: 35px; position: fixed; top: 0; width: 100%; z-index: 100; }
        ul{ padding: 0; margin: 0; }
        .fixed-bar-buttons{ float: left;color: #fff; }
        .fixed-bar-buttons ul { height: 25px; padding-right: 10px; }
        .fixed-bar-buttons ul li{ display: block; float: left; font-family: sans-serif; font-size: 14px; font-weight: bold; height: 25px; padding-left: 10px; padding-right: 10px; padding-top: 10px; }
        .fixed-bar-buttons ul li:hover{ background-color: #605F5F; }
        #content-panel{ float: left;margin-top: 40px; }
</style>
</head>

<body>
 <div id="top-floating-bar">
        <div class="fixed-bar-buttons">
            <ul class="nav">
                <li><a href="#section2">REFERENCIE</a></li>
                <li><a href="#section3">KONTAKT</a></li>
            </ul>
        </div>
    </div>
<div id="section2"> Section2 content</div>
<div id="section3"> Section3 content</div>
...

コードは問題なく、すべて正常に動作します。私がする必要があるのは、メニューが section2 と section3 のみにあるときにメニューを変更し、「UP」ボタンを追加することです。

ページをロードするとき、「UP」ボタンは必要ありません。上に行くことができず、そこにいると混乱するため、下にスクロールする場合にのみ必要です。CSS(1,2,3)のみで可能ですか? ありがとうございました！

4

1 に答える 1

1

ユーザーがページの一番上にいるか、下にスクロールしたかを知るには、ドキュメントの垂直方向のオフセットを取得する必要があるため、不可能です。アップボタンを表示するかどうかを決定するには、垂直方向のオフセットが必要です。

JS でそれを行う方法はありますが、CSS のみのソリューションを求めている場合は、既に悪いニュースを伝えています:P

于 2013-03-03T21:01:56.680 に答える