javascript - 滚动经过 div 后固定的固定菜单

Question

我正在为响应式网站创建固定位置的子导航菜单栏。我能找到的关于滚动后固定在顶部的固定菜单的所有示例都是基于距顶部的一组像素数。

但是，由于我在响应式网站上工作，因此我需要菜单进入的顶部像素因视口(viewport)而异(在小屏幕上，菜单应该在更多区域向下滚动后出现，因为内容填充的区域更高屏幕)。

我有一个工作示例并且正在使用以下 jquery 脚本:

$(document).ready(function(){
$('#navigation a, #fixedbar a').on('click', function(e) {
e.preventDefault();
});

$(window).on('scroll',function() {
var scrolltop = $(this).scrollTop();

if(scrolltop >= 215) {
  $('#fixedbar').fadeIn(250);
}

else if(scrolltop <= 210) {
  $('#fixedbar').fadeOut(250);
}
});
});

如您所见，如果从顶部滚动超过 215 像素，则固定栏会淡入。相反，我想让它在滚动经过某个 div 后出现。这样我就知道它会在用户完全滚动过介绍文本后出现。

Here's my fiddle

有什么好的例子可以说明我想做什么吗？或者修改 jquery 脚本的简单方法？提前致谢。

Answer 1

这个修改会让它在通过静态导航后淡入

DEMO

var $nav = $("#navigation");
if(scrolltop >= $nav.offset().top + $nav.height()) {
  $('#fixedbar').fadeIn(250);
}
else {
  $('#fixedbar').fadeOut(250);
}