Wie erstellt man eine Kopfzeile, die sich beim Scrollen der Seite ändert?

Question

ich eine Navigationsleiste erstellen möchten, wie die Seite ähnlich gescrollt ändert sich bis auf die, die sie auf techcrunch.com

habe ich nicht nur ein klebriges Header machen wollen, die oben bleibt, weiß ich, wie zu tun das in CSS. Aber ich möchte auch seine Höhe und das Styling von Objekten ändern, die darin eingebettet sind, nachdem ich zu einem bestimmten Punkt gescrollt habe.

Ich habe bereits einige Nachforschungen angestellt und die meisten Leute sagen, es sollte mit einer .scroll-Funktion oder so etwas in jQuery gemacht werden, aber ich habe keine vollständige Erklärung dafür gefunden. Ich bin nicht sehr vertraut mit jQuery oder Javascript um ehrlich zu sein.

Alle Antworten, die ich für ähnliche Fragen gefunden habe, erlauben es mir nicht, den verschachtelten Inhalt innerhalb der Kopfzeile zu bearbeiten oder zu ändern, sondern nur das Aussehen der Kopfzeile. Ich wäre dankbar, wenn jemand den Prozess für mich in einigen Details erklären kann. Ich möchte wirklich lernen, wie man es tun kann, nicht nur etwas Code kopieren und in meine Website einfügen.

Answer 1

Hier ist eine generische Lösung.

Hierbei handelt es sich um mehrere Header (die einen völlig unterschiedlichen Inhalt haben können), von denen Sie abhängig von der Bildlaufposition selektiv einen anzeigen. Jedes Kopfzeilenelement verfügt über ein data-visible-range-Attribut, das die minimalen und maximalen Bildlaufpositionen definiert, wenn es angezeigt werden soll.

Demo: http://jsfiddle.net/cydfh2s6/1/

HTML

<div class="header header-1" data-visible-range="0-100">Header 1</div> 
<div class="header header-2" data-visible-range="101-500">Header 2</div> 
<div class="header header-3" data-visible-range="501-">Header 3</div> 
<div class="body">BODY</div> 

CSS

.header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    display: none; 
} 
.header-1 { 
    background-color: yellow; 
    display: block; /* header 1 is visible by default */ 
} 
.header-2 { 
    background-color: red; 
} 
.header-3 { 
    background-color: green; 
} 
.body { 
    padding-top: 50px; 
    height: 2000px; 
} 

JS

$(window).scroll(function() { 
    var scrollTop = $(this).scrollTop(); 
    var headerToDisplay = false; 
    $('.header[data-visible-range]').each(function() { 
     var range = $(this).data('visible-range').split('-'); 
     range[0] = range[0] ? parseInt(range[0], 10) : 0; 
     range[1] = range[1] ? parseInt(range[1], 10) : $(document).height(); 
     if(scrollTop >= range[0] && scrollTop <= range[1]) { 
      headerToDisplay = $(this); 
      return false; 
     } 
    }); 
    if(headerToDisplay && !headerToDisplay.is(':visible')) { 
     $('.header[data-visible-range]').hide(); 
     headerToDisplay.show(); 
    } 
}); 

Answer 2

In diesem Beispiel i Klasse Hinzufügen bin auf scroll

dieses Beispiel Siehe: http://jsfiddle.net/kevalbhatt18/twn3gs75/

hören können wir Scroll-Ereignis wie dem Klicken hören, so, wenn Sie es bewegen gehen in $(window).scroll(function() { ----Call---- }); Jetzt in dieser Funktion() {} wird prüfen, wie viel es 1 oder 2 oder 3 scrollte ... usw. so abhängig davon, dass Bedingung in meinem Code gelten, ich überprüft, wenn Benutzer scrollte> 1, wenden Sie dann css an.

$(window).scroll(function() { 
if ($(this).scrollTop() > 1){ 
    $('header').addClass("sticky"); 
    } 
    else{ 
    $('header').removeClass("sticky"); 
    } 
});