0

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

很难解释我的问题，所以这里有一个示例链接： 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);
});

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

我在标题元素中添加了一个 CSS 过渡，以修复它但使其他区域中断。

只是好奇是否有人对如何使这一切顺利进行有任何想法。

谢谢！

4

1 回答 1

0

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

$('.header-content').fadeOut(200, function(){
   $('.header').css({'position': 'fixed', 'top': '-85px'});
});
于 2013-05-30T15:50:02.020 回答