1

このサイトのようなナビゲーション バーを作成したい:

http://www.mysupermarket.co.uk/#/shelves/top_offers_in_asda.html

ページを下にスクロールすると追従するが、ページの最初の読み込み時には追従しないナビゲーションバーを作成する方法を誰か教えてもらえますか?

指定されたWeb サイトにアクセスしたら、下にスクロールしてみてください。私が話していることが理解できます。MY SHOP、OFFERS、IDEAS & LIFESTYLE、BAKERYなどで構成されるナビゲーションバー...

私はそれが何と呼ばれているのか本当にわかりません。せめて何という名前か教えてくれ。検索できるようになる。

これが私が行った解決策です

window.onscroll = function(){
    if(getScrollTop()>140) {
        document.getElementById("menu").style.position="fixed";
    } else {
        document.getElementById("menu").style.position="";
    }
}

function getScrollTop() {
    if (window.onscroll) {
        // Most browsers
        return window.pageYOffset;
    }

    var d = document.documentElement;
    if (d.clientHeight) {
        // IE in standards mode
        return d.scrollTop;
    }

    // IE in quirks mode
    return document.body.scrollTop;
}
4

3 に答える 3

3

要素を同じ位置に保持することは、固定位置スタイリングによって実現できます。ナビゲーション バーをまったく同じ場所に配置したい場合は、それでposition:fixed;十分です。(少なくとも IE6 以外)

ここで実際の例といくつかの詳細を見つけることができます

ただし、ページを下にスクロールするときにナビゲーション バーを最初の位置からページの上部境界線に移動する場合は、JavaScript を実装してページ スクロール イベントをキャッチし、<div>それに応じて移動する必要があります。

その方法の例については、この質問を参照してください。

于 2012-04-10T11:54:04.203 に答える
0

注: これは Android 2.3 ブラウザーでは機能しません。position:fixed期待どおりに動作しません-トップに戻る前に、その位置をスクロール要素に一時的にアタッチします。

于 2013-08-09T10:24:21.227 に答える
0

必要に応じて、z-index を特定の番号に設定するだけでうまくいくはずです。

例 z-index:100;

于 2015-08-03T18:42:13.593 に答える