jquery - 如何在页眉滚出页面后将页眉滑回并固定到顶部？

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>