Question

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

希望这是有道理的。我认为jquery或greensock可能是一个不错的选择，但我不知道从哪里开始。我想也许我可以在它击中顶部的位置添加bootstrap的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

好的，既然你说你不知道怎么开始，你在找这样的东西吗？

＆＃13;

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

＆＃13;

* {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;}

＆＃13;

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

＆＃13;

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

这是以一种简单的方式完成的：

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

Answer 2

您可以使用jQuery执行此操作：

＆＃13;

$(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'}); 
  } 
});

＆＃13;

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;
}

＆＃13;

<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

＆＃13;

在滚动上捕获导航栏并将其固定到顶部

2 个答案: