jquery - 使元素固定在页面中的某些 scrollY 值

Question

请将我页面中的元素固定为给定的 scrollY 值。代码

<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Goto</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#andriodlabel">Andriod Apps</a></li>
 <li><a href="#movielabel">Movies</a></li>
<li><a href="#musiclabel">Music</a></li>
<li><a href="#pclabel">Pc softwares</a></li>
<li><a href="#morecontents">More</a></li>
</ul>
</div>
</div>

CSS

.navbar {
  margin-bottom: 20px;
  overflow: visible;
}

请我需要 jquery 以便当它达到 scrollY 值 200 时它将变得固定...

Answer 1

试试这个

$(document).ready(function() {
  $(window).scroll(function () { 

    console.log($(window).scrollTop());

    if ($(window).scrollTop() > 200) {
      $('.navbar').addClass('navbar-fixed-top');
    }

    if ($(window).scrollTop() < 200) {
      $('.navbar').removeClass('navbar-fixed-top');
    }
  });
});