javascript - 滚动 300 像素后显示粘性标题

Question

我有一个脚本，用于在滚动后显示我的粘性标题。我想在 300px 之后显示它。我怎样才能做到这一点？

<script type="text/javascript">
 jQuery(function($){
  $(window).scroll(function() {
   if ($(this).scrollTop() > 1){
    $('header').addClass("sticky");
   }
   else {
    $('header').removeClass("sticky");
   }
  });
 });
</script>

标签： javascript

Answer 1

如果我理解正确，只需将$(this).scrollTop() > 1替换为 $(this).scrollTop() > 300

演示：https ://jsfiddle.net/VitFL/cgzr6k5t/

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

header {
  width: 100%;
  height: 40px;
  background-color: red;
}

.sticky {
  position: fixed;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  
</header>

<section class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus reiciendis ipsa, aliquam voluptatum qui et eos, omnis dolorum, iure dolores beatae modi, nihil aspernatur quibusdam nostrum dolor? Tenetur similique, nisi.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus reiciendis ipsa, aliquam voluptatum qui et eos, omnis dolorum, iure dolores beatae modi, nihil aspernatur quibusdam nostrum dolor? Tenetur similique, nisi.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam rem dolores ullam nostrum sint voluptas obcaecati amet aspernatur laudantium, necessitatibus ex deleniti. Accusantium fugit, natus maiores unde, quidem praesentium, laboriosam cumque cupiditate doloremque nulla quisquam pariatur consectetur accusamus dolores quas, itaque! Fuga expedita, maxime amet iste sequi quod delectus quaerat eligendi nisi similique, nemo sunt dignissimos repellendus dolorem laborum est vero quam, esse, culpa in soluta nesciunt. Soluta ipsa accusamus est placeat nostrum, nemo, nobis, et totam reprehenderit possimus eligendi! Suscipit vitae saepe quod eos aut magnam similique, voluptates, quibusdam debitis? Facere odio dicta dolore, enim rerum ex distinctio labore expedita! Assumenda doloribus quae repellat a, laboriosam, distinctio, rem repudiandae itaque, odio accusamus nisi repellendus deleniti explicabo ad facilis eum! Saepe magni necessitatibus obcaecati aspernatur! Dignissimos excepturi libero dolores nemo quia animi quas atque dolore sed optio beatae perspiciatis tempora impedit praesentium doloremque id ad doloribus reiciendis, recusandae itaque magni, reprehenderit? Explicabo cumque inventore tempore doloremque. Aliquam, consequatur animi soluta dolores expedita assumenda! Sit, maiores suscipit reiciendis dolor adipisci autem laudantium corporis quia excepturi. Animi consequuntur nostrum facilis ipsam sapiente, distinctio. Porro quisquam qui, praesentium aliquid, architecto magnam aliquam repellendus deleniti maiores ab ea illum necessitatibus dolorem. Architecto debitis, enim.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam rem dolores ullam nostrum sint voluptas obcaecati amet aspernatur laudantium, necessitatibus ex deleniti. Accusantium fugit, natus maiores unde, quidem praesentium, laboriosam cumque cupiditate doloremque nulla quisquam pariatur consectetur accusamus dolores quas, itaque! Fuga expedita, maxime amet iste sequi quod delectus quaerat eligendi nisi similique, nemo sunt dignissimos repellendus dolorem laborum est vero quam, esse, culpa in soluta nesciunt. Soluta ipsa accusamus est placeat nostrum, nemo, nobis, et totam reprehenderit possimus eligendi! Suscipit vitae saepe quod eos aut magnam similique, voluptates, quibusdam debitis? Facere odio dicta dolore, enim rerum ex distinctio labore expedita! Assumenda doloribus quae repellat a, laboriosam, distinctio, rem repudiandae itaque, odio accusamus nisi repellendus deleniti explicabo ad facilis eum! Saepe magni necessitatibus obcaecati aspernatur! Dignissimos excepturi libero dolores nemo quia animi quas atque dolore sed optio beatae perspiciatis tempora impedit praesentium doloremque id ad doloribus reiciendis, recusandae itaque magni, reprehenderit? Explicabo cumque inventore tempore doloremque. Aliquam, consequatur animi soluta dolores expedita assumenda! Sit, maiores suscipit reiciendis dolor adipisci autem laudantium corporis quia excepturi. Animi consequuntur nostrum facilis ipsam sapiente, distinctio. Porro quisquam qui, praesentium aliquid, architecto magnam aliquam repellendus deleniti maiores ab ea illum necessitatibus dolorem. Architecto debitis, enim.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste molestiae, sit assumenda quia temporibus qui vel ullam necessitatibus repellendus cupiditate tenetur beatae laudantium, eos voluptatem dolore quae, consequatur! Blanditiis esse ipsam impedit distinctio sequi quae praesentium deleniti doloremque repellat, temporibus tempora omnis labore enim assumenda voluptatem sapiente architecto incidunt neque aliquam corrupti fugiat facilis. Odit veniam illo magnam praesentium quasi quae maiores fuga eum. Accusamus aliquid tempora eum dolores eaque quasi omnis aut. Ea eos culpa dolorum, sint nobis suscipit quaerat harum, iure illo eligendi omnis nam dolorem itaque aliquam eaque voluptate praesentium possimus officia rerum mollitia nemo distinctio aperiam ratione quo. Optio assumenda cupiditate expedita quod aperiam illo blanditiis nisi, harum eos inventore nesciunt nobis tempora ipsum deleniti, accusantium suscipit deserunt voluptatibus porro in mollitia eum. Pariatur consequatur iste, veritatis quae maxime nisi magni dolores possimus quasi id. Inventore repellat reprehenderit fuga, eaque distinctio expedita fugiat. Facilis, repellendus, alias.</p>
</section>

如果您希望在滚动到 300px 之前隐藏标题，则将其设置为display: none，并添加到 .sticky display: block：

 header {
  display: none;
  width: 100%;
  height: 40px;
  background-color: red;
}

.sticky {
  position: fixed;
  display: block;
}