Wie verschiebe ich den Header zurück und fixiere ihn nach dem Scrollen von der Seite nach oben?

Question

Zunächst scrollt meine Kopfzeile mit der Seite und ich möchte, dass sie von oben mit verschiedenen Stilen zurückrutscht und sie an den oberen Rand der Seite fixiert, nachdem sie von der Seite gerollt ist. Nachdem die Seite zurück zur Anfangsposition des Headers geblättert hat, sollte sie nicht mehr fixiert werden und von der Seite abrollen und mit den ursprünglichen Stilen zurückgleiten. Ich bin nicht wirklich gut mit Jquery, also kann mir jemand sagen, wie ich das erreichen kann?

<header class="header"> 
    <a href="index.html" class="home-link"> 
    <imgclass="logo" src="img/logo.png" alt="logo"> 
    </a> 
    <a href="#our-team" class="contact-link">CONTACT</a> 
    <div class="menu"> 
    <button class="hamburger hamburger--squeeze" type="button"> 
     <span class="hamburger-box"> 
     <span class="hamburger-inner"></span> 
     </span> 
    </button> 
    <nav class="menu-nav"> 
     <a class="menu-nav-link active" href="#">Link 1</a> 
     <a class="menu-nav-link" href="#">Link 2</a> 
     <a class="menu-nav-link" href="#">Link 3</a> 
     <a class="menu-nav-link" href="#">Link 4</a> 
     <a class="menu-nav-link" href="#">Link 5</a> 
    </nav> 
    </div> 
</header> 

Answer 1

Ich Anpassung eines Modells ich Ihre aus dem Internet bekam für, weil es Informationen genug, um Ihre Anfrage zu simulieren, aber dies ist die grundlegende Informationen, die Sie in Ihrer Arbeit verwenden müssen. Die Idee hier ist, dass das Skript nach dem Scrollen eine bestimmte Anzahl von Pixeln aktiviert (In diesem Fall 100) und schaltet eine Klasse auf die header. Aber Sie können das so manipulieren, wie Sie wollen.

$(document).on("scroll", function() { 
 
    if ($(document).scrollTop() > 100) { 
 
    $("header").removeClass("large").addClass("small"); 
 
    } else { 
 
    $("header").removeClass("small").addClass("large"); 
 
    } 
 
});

header, 
 
a, 
 
img, 
 
li { 
 
    transition: all 1s; 
 
    -moz-transition: all 1s; 
 
    /* Firefox 4 */ 
 
    -webkit-transition: all 1s; 
 
    /* Safari and Chrome */ 
 
    -o-transition: all 1s; 
 
    /* Opera */ 
 
} 
 

 

 
/* Basic layout */ 
 

 
body { 
 
    background-color: #ebebeb; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    float: right; 
 
} 
 

 
li { 
 
    display: inline; 
 
    float: left; 
 
} 
 

 
img.logo { 
 
    float: left; 
 
} 
 

 
nav { 
 
    width: 960px; 
 
    margin: 0 auto; 
 
} 
 

 
section.stretch { 
 
    float: left; 
 
    height: 1500px; 
 
    width: 100%; 
 
} 
 

 
section.stretch p { 
 
    font-family: 'Amaranth', sans-serif; 
 
    font-size: 30px; 
 
    color: #969696; 
 
    text-align: center; 
 
    position: relative; 
 
    margin-top: 250px; 
 
} 
 

 
section.stretch p.bottom { 
 
    top: 100%; 
 
} 
 

 
header { 
 
    background: #C7C7C7; 
 
    border-bottom: 1px solid #aaaaaa; 
 
    float: left; 
 
    width: 100%; 
 
    position: fixed; 
 
    z-index: 10; 
 
} 
 

 
header a { 
 
    color: #969696; 
 
    text-decoration: none; 
 
    font-family: 'Amaranth', sans-serif; 
 
    text-transform: uppercase; 
 
} 
 

 
header a.active, 
 
header a:hover { 
 
    color: #3d3d3d; 
 
} 
 

 
header li { 
 
    margin-right: 30px; 
 
} 
 

 

 
/* Sizes for the bigger menu */ 
 

 
header.large { 
 
    height: 120px; 
 
} 
 

 
header.large img { 
 
    width: 489px; 
 
    height: 113px; 
 
} 
 

 
header.large li { 
 
    margin-top: 45px; 
 
} 
 

 

 
/* Sizes for the smaller menu */ 
 

 
header.small { 
 
    height: 50px; 
 
} 
 

 
header.small img { 
 
    width: 287px; 
 
    height: 69px; 
 
    margin-top: -10px; 
 
} 
 

 
header.small li { 
 
    margin-top: 17px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header class="large"> 
 
    <nav> 
 
    <img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/1/1d/Comedy_Central_Logo_2011_horizontal.png" /> 
 
    <ul> 
 
     <li><a class="active" href="#">Home</a></li> 
 
     <li><a href="#">Posts</a></li> 
 
     <li><a href="#">Awesome Freebies</a></li> 
 
    </ul> 
 
    </nav> 
 
</header> 
 

 
<section class="stretch"> 
 
    <p>Descrese the Menu</p> 
 
    <p class="bottom">End.</p> 
 
</section>