Wie eine dynamische Navigationsleiste erstellen, die Sie folgt, wenn Sie bestimmte erreichen Lage

Question

ich eine Navigationsleiste ähnlich wie diese Website erstellen möchten:

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

jemand kann mir sagen, wie man das Navigationsleiste erstellen, welches folgt dir beim scrollen der seite nach unten, dir folgt aber beim ersten laden der seite nicht?

Wenn Sie auf die given website zugreifen, versuchen Sie, nach unten zu scrollen und Sie werden verstehen, worüber ich spreche. Die Navigationsleiste, die aus MY SHOP, ANGEBOTE, IDEEN & LIFESTYLE, BÄCKEREI und so weiter besteht ...

Ich habe wirklich keine Ahnung, wie es heißt. Sag mir wenigstens, wie es heißt, also kann ich suchen.

Hier ist die Lösung, die ich

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; 
} 

Answer 1

Holding ein Element auf derselben Position erreicht werden kann durch fixed position Styling getan haben. Wenn Sie möchten, dass Ihre Navigationsleiste genau am selben Ort bleibt, reicht position:fixed;. (Zumindest nicht IE6)

Sie a working example finden und einige Details here

Wenn Sie jedoch Ihre Navigationsleiste wollen von ihm zu bewegen, ist Ausgangsort zum oberen Rand der Seite, wie Sie die Seite nach unten scrollen, Sie Sie müssen JavaScript implementieren, um das Seitenrollenereignis zu erfassen und die <div> entsprechend zu verschieben.

Ein Beispiel dafür finden Sie in this question.

Answer 2

Hinweis: Dies funktioniert nicht mit dem Android 2.3 Browser; position:fixed verhält sich nicht wie erwartet - es hängt seine Position vorübergehend an das Scroll-Element an, bevor es wieder nach oben springt.

Answer 3

Wenn Sie möchten, können Sie einfach den Z-Index auf eine bestimmte Nummer festlegen, und das sollte funktionieren.

Beispiel Z-Index: 100;