Question

我试图稍微取消我们大学网站上的固定标题，并提出了一种方法，我认为这对于那些屏幕较小的人来说非常有用，但仍然喜欢那些喜欢无论在哪里都可以使用标题的人他们在页面上。

很难解释我的问题所以这里是一个示例的链接： http://codepen.io/daless14/pen/smdou

代码：

$('body').prepend('<div class="show-menu">MENU</div>');

$(window).scroll(function(){  
  if ($('.header').is(':hover')) { 
    $('.header').css('top', '0px');
  }
  else if ($(this).scrollTop() < 85) { 
    $('.header').css({'position': 'absolute', 'top': '0px'}); 
    $('.header-content').fadeIn(100);
  }
  else if ($(this).scrollTop() > 85) {
    $('.header').css({'position': 'fixed', 'top': '-85px'});
    $('.header-content').fadeOut(100);
  }
});

$('.show-menu').click(function() {
  $('.header').animate({'top': '0px'},150);
  $('.header-content').fadeIn(400);
});

标题有一个绝对位置，直到窗口滚动超过85px然后它会粘到顶部并出现一个小菜单按钮。如果用户位于屏幕的下半部分，则可以单击“菜单”以使标题向下滑动以显示。我唯一的问题是，当用户再次滚动时（如果他们没有悬停在标题元素上），标题应该向上滑动。目前它只是“跳”回来。

我在CSS过渡中添加了一个修复它的标题元素，但是让其他区域破坏了。

如果有人对如何顺利地提出任何想法，那就好奇了。

谢谢！

Answer 1

当你调用标题内容的fadeOut时，它似乎毫无意义，因为标题已经在页面上不可见。所以我想你应该首先尝试fadeOut然后隐藏标题，就像这样。

$('.header-content').fadeOut(200, function(){
   $('.header').css({'position': 'fixed', 'top': '-85px'});
});

使用scrollTop（）获得平滑过渡

1 个答案: