如何将标题重新滑入页面并在页面滚动后将其修复到顶部？

Question

最初，我的页眉随着页面一起滚动，我想让它从不同风格的顶部向后滑动，并在页面滚动后将其修复到页面的顶部。页面滚动回页眉的初始位置后，它应该停止修复，并滚动页面并用初始样式滑回。我对jQuery不太擅长，所以有人可以告诉我如何实现这个目标？

<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

我适应的模型我得到了你从互联网，因为它有足够的信息来模拟你的要求，但是这是你需要在你的工作中使用的基本信息。这里的想法是脚本在滚动一定数量的像素（在这种情况下为100）之后激活并且将类切换到header。但是，你可以操纵这个，但是你想要的。

$(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>