在滚动时捕获导航栏并将其固定到顶部 [重复]

Question

我有一个导航栏，目前位于页面标题和子标题下方。我想在向下滚动时“捕捉”它，并在它到达窗口顶部时将其固定到顶部，以便您在滚动时可以看到它，然后在向上滚动时释放它。

希望这是有道理的。我认为 jquery 或 greensock 可能是一个不错的选择，但我不知道从哪里开始。我想也许我可以在它到达顶部的地方添加引导程序的 navbar-fixed-top 类？

.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
}
@media (min-width: 768px) {
.navbar-fixed-top,
.navbar-fixed-bottom {
  border-radius: 0;
}
}
.navbar-fixed-top {
  top: 0;
  border-width: 0 0 1px;
}

另一个问题是菜单在移动设备上折叠成汉堡包，我希望它也固定在移动设备滚动上，但它会从屏幕顶部开始，所以我不能只是在位置上硬编码，除非我根据媒体查询来做。

http://codepen.io/Kathrynwatts/pen/BjRvRe

Answer 1

好的，既然你说你不知道如何开始，你是在寻找这样的东西吗？

$(function () {
  h1Top = $("h1").position().top;
  $(window).scroll(function () {
    if ($(window).scrollTop() > h1Top)
      $("body").addClass("fixed");
    else
      $("body").removeClass("fixed");
  });
});

* {margin: 0; padding: 0;}
p {margin: 10px;}
h1 {background-color: #ccf; margin: 0; padding: 0; line-height: 1.5; text-align: center;}
.fixed h1 {position: fixed; top: 0; left: 0; right: 0;}

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id similique ipsum, non, natus omnis doloremque accusamus inventore reprehenderit adipisci totam. Hic vel doloremque minus at. Fugiat perferendis ut eum, excepturi.</p>
<p>Minima quas placeat eos veniam quo animi voluptatibus dolores, ipsa aliquam corporis tenetur corrupti eaque eveniet esse repellat dicta incidunt, sint ratione natus. Sequi fugiat officiis iure debitis facilis velit.</p>
<p>Delectus temporibus eos modi recusandae possimus quo tenetur eligendi quaerat assumenda officiis. Ipsum officiis hic sequi rem in neque architecto? Error accusantium doloribus labore minima, enim officiis quidem adipisci harum!</p>
<h1>This will be Fixed to Top</h1>
<p>Dolore natus ipsam eius, temporibus, mollitia quidem veniam illum ipsum. Architecto dolor minima quasi placeat, vero eos tempore voluptatem hic, tenetur cupiditate corrupti quae in id saepe optio nobis ducimus.</p>
<p>Veritatis reprehenderit et illum magni molestias incidunt adipisci ea asperiores tempore sapiente ipsa itaque nobis distinctio quia necessitatibus dolores vitae nemo maxime provident voluptatibus commodi, inventore saepe harum! Ab, unde.</p>
<p>Quod quia deleniti itaque vel a nostrum maxime et hic corporis architecto aperiam ex alias modi odio numquam nemo ipsam illum quis, veniam molestias delectus perferendis ad accusantium voluptatum! Sapiente.</p>
<p>Eum omnis molestias aut dolore, dolores mollitia corrupti perspiciatis repellat deleniti magni consequuntur voluptas nihil obcaecati quos, id, enim dignissimos facere quod quae quo dicta odio. Excepturi, sint amet odio.</p>
<p>Laudantium dolores obcaecati soluta, ut quasi dolore nesciunt. Eaque deleniti doloribus iure laborum nobis, pariatur optio blanditiis est dicta maxime, dolorem, dolores. Esse odit, accusamus quis asperiores totam consequuntur perferendis.</p>
<p>Rerum maiores minima odio quam, numquam modi ex repudiandae. Pariatur illo nemo vero enim totam ad corrupti reiciendis tenetur, voluptatem iure. Cumque optio impedit reiciendis? Maxime quaerat, nemo. Dicta, laboriosam.</p>
<p>Nostrum eligendi tempora ut amet quaerat et suscipit ipsam perferendis neque a omnis quis necessitatibus velit, mollitia sint eaque. Sunt velit esse minus dolore assumenda, beatae tempore voluptas dicta corporis.</p>
<p>Accusantium laborum architecto ab. Vel debitis, error illo delectus voluptate tempore provident nisi! Est beatae inventore velit amet! Ipsa obcaecati et sit. Neque vero amet aliquam minima quibusdam nulla laboriosam?</p>
<p>Dolor commodi dolores, maiores animi porro voluptas pariatur, nulla sit excepturi vel minus. Enim quaerat accusamus laboriosam dolor consequuntur iusto, mollitia nihil, ad numquam saepe ullam ducimus laborum. Veniam, beatae?</p>
<p>Cum inventore, ad qui vitae id pariatur, ipsam rem, quaerat quisquam sequi libero assumenda nobis distinctio aliquid cupiditate. Error dolorum tenetur nulla eius recusandae quo, repellendus distinctio voluptate deserunt officiis.</p>
<p>Minus eaque soluta in voluptas sequi illum architecto dignissimos nobis. Aspernatur culpa, voluptatum asperiores laborum, facere perspiciatis officia totam id quaerat? Aliquid voluptates repellat, quisquam aliquam, ex esse voluptatem architecto!</p>
<p>Porro, totam iure magni ab doloribus. Eum culpa quo qui dolorum vel, perspiciatis, eaque accusamus, cupiditate vero ad magni soluta quos facere quidem ipsum commodi. Rerum, alias architecto aliquid mollitia?</p>

我是怎么做到的？只是使用常识和 jQuery。

这很简单：

1. 获取固定元素的顶部偏移量。
2. 一旦窗口滚动顶部穿过它，将其固定。
3. 如果没有，请释放它。

Answer 2

你可以用 jQuery 做到这一点：

$(window).scroll(function(e){ 
  $el = $('.navbar'); 
  //if you scroll the navbar off-screen
  if ($(this).scrollTop() > 50 /*height when navbar is offscreen*/ && $el.css('position') != 'fixed'){ 
    //set it fixed to the top of the screen
    $('.navbar').css({'position': 'fixed', 'top': '0', 'left': '0'}); 
  }
  //if you scroll the navbar back on screen
  if ($(this).scrollTop() < 50 && $el.css('position') == 'fixed')
  {
    //return it back to its original position
    $('.navbar').css({'position': 'absolute', 'top': '50px'}); 
  } 
});

div.navbar {
  background-color: blue;
  height: 10px;
  width: 100%;
  position: absolute;
  top: 50px;
}
body {
  height: 3000px;
  background-color: black;
  color: white;
}
div#spacer {
  height: 50px;
  width: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Some text
<div id="navbar" class="navbar"></div>
<br><br><br><div id="spacer"></div>
other text<br><br>some more text
<div id="spacer"></div><div id="spacer"></div><div id="spacer"></div><div id="spacer"></div>
abc