Question

我有一个导航栏，我希望以下列方式运行：

导航定位绝对，因此可以滚动其余内容。
当从顶部滚动300px时，它变得固定并从屏幕顶部向下转换
当向上滚动时，它会在屏幕外转换，并作为内容的一部分向下滚动

代码（在functions.php中）

$(document).ready(function() {

  $(window).scroll(function () {
    var bannerHeight = $('#s-nav').height();
    console.log(bannerHeight);
  if ($(window).scrollTop() > bannerHeight) {
    $('#s-nav').addClass('stick');
  }
  if ($(window).scrollTop() < bannerHeight) {
    $('#s-nav').removeClass('stick');
  }
  });
});

CSS

#s-nav {
  width: 100%;
  top: 0; right: 0; left: 0;
  position: absolute;
}

#s-nav.stick {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
}

HTML

<nav id="s-nav"> navigation links </div>

Answer 1

你不能有一个滚动的position: absolute元素，因为它需要相对于内容才能滚动。

在position: relative中检查您的比较时，只需确保使用300，并使用值scrollTop()：

＆＃13;

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(window).scrollTop() > 300) {
      $('#s-nav').addClass('stick');
    }
    if ($(window).scrollTop() < 300) {
      $('#s-nav').removeClass('stick');
    }
  });
});

＆＃13;

#s-nav {
  position: relative;
  background: cyan; /* For clarity */
}

#s-nav.stick {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="s-nav">
 Sticky
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec tellus justo. Phasellus sollicitudin nisl pellentesque tincidunt consequat. Cras pellentesque quis turpis ac ultricies. Curabitur tincidunt sapien eget elit faucibus vestibulum. Nulla feugiat tempor magna, vitae aliquet sapien pretium vel. Nullam dapibus sagittis diam, at mattis ipsum congue sit amet. Suspendisse pulvinar nulla in dui hendrerit, at porta turpis consectetur. Quisque fermentum augue a libero posuere, at commodo odio porttitor. Mauris a dui at augue sollicitudin mattis. Vestibulum luctus interdum nisi, ac aliquet enim tristique sed. Etiam blandit massa risus, vel semper ligula ultricies non. Vivamus suscipit augue vel congue ultricies. Donec ac ipsum lacinia, commodo enim vitae, dignissim sem. Proin scelerisque feugiat sem, eu elementum orci viverra nec. Proin tincidunt eleifend lorem scelerisque pulvinar.
Morbi varius lacinia lacinia. Vivamus facilisis ornare justo, in porttitor ipsum pulvinar id. Sed rutrum, ante et consequat scelerisque, nulla sem cursus lacus, non convallis massa justo in velit. Ut porttitor fermentum augue, non rhoncus sem semper eu. Curabitur id semper mauris. Pellentesque sit amet diam vel mauris blandit euismod sit amet ac magna. In sodales iaculis magna nec viverra.
Fusce congue urna sed nisi efficitur aliquet. Duis augue metus, aliquam lobortis ultrices laoreet, pulvinar in arcu. Suspendisse feugiat ex velit, ut elementum nisi luctus id. Cras condimentum sapien nec ante interdum, at tempus lorem gravida. Curabitur porttitor eros massa, vel varius turpis accumsan a. Sed porttitor convallis odio, vitae dapibus eros venenatis ut. Donec scelerisque metus molestie erat bibendum condimentum.
Nullam porttitor semper aliquam. Mauris volutpat augue ac diam tincidunt, at ullamcorper sapien laoreet. Nunc porta bibendum lacus imperdiet luctus. Proin ac massa commodo, egestas dui vehicula, bibendum arcu. Vivamus sed pulvinar nisi. Duis orci lectus, pulvinar sed consequat eget, vulputate at turpis. Praesent laoreet ligula nunc, id sollicitudin nisl volutpat sit amet. Vestibulum quis porttitor eros. Praesent in turpis justo. Vivamus pharetra porttitor neque quis maximus. Vestibulum ut euismod nisi. Aenean sit amet accumsan magna. Vestibulum dictum, augue quis commodo dapibus, nibh elit auctor arcu, id tempus libero diam non justo.
Maecenas urna leo, vehicula in turpis non, maximus mattis enim. Fusce sit amet est rutrum, posuere velit in, iaculis nunc. Fusce malesuada at felis a tincidunt. Nam maximus dictum vestibulum. Sed scelerisque eget nibh eget suscipit. Nulla lacus diam, tristique et justo quis, venenatis suscipit arcu. Etiam vestibulum at libero quis eleifend.
</p>

＆＃13;

希望这有帮助！：）

更改用户滚动的导航类/转换

1 个答案: