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

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

1 个答案: