javascript - 当用户位于带有动画导航的页面顶部时应用 css

Question

我有当前代码可以在用户向上滚动时隐藏/显示我的导航。

$.fn.moveIt = function(){
  var $window = $(window);
  var instances = [];

 $(this).each(function(){
   instances.push(new moveItItem($(this)));
 });

window.onscroll = function(){
var scrollTop = $window.scrollTop();
instances.forEach(function(inst){
  inst.update(scrollTop);
});
}
}

var moveItItem = function(el){
  this.el = $(el);
  this.speed = parseInt(this.el.attr('data-scroll-speed'));
};

moveItItem.prototype.update = function(scrollTop){
 this.el.css('transform', 'translateY(' + -(scrollTop / this.speed) + 'px)');
 };

// Initialization
$(function(){
  $('[data-scroll-speed]').moveIt();
});

});

CSS

#s-nav {
position: fixed;
display: block;
z-index: 999;
width: 100%;
top: 0; left: 0;
}

#s-nav.nav-up { top: -80px; }

我想要包含的功能是在用户到达页面顶部(或非常接近页面顶部)时应用特定的 CSS。

基本上，当用户位于页面顶部时，我希望导航位于页面的下方，然后当用户滚动浏览页面时，让显示的代码将其“隐藏/显示”在页面顶部。

Answer 1

你可以这样使用:

$(document).scroll(function() { 
  //check if it is at the top of the page
   if($(window).scrollTop() === 0) {
     //do your code here or add css using jquery
   }
});