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

Question

我正在为响应站点创建一个固定位置的子导航菜单栏。 我能找到的所有固定菜单示例在滚动后都固定在顶部，这些示例均基于从顶部开始的固定像素数。

但是，由于我正在工作一个响应站点，因此视口而定，需要进入菜单的顶部像素是不同的（在小屏幕上，由于内容填充是更高的屏幕区域，因此菜单应在向下滚动更多区域后出现） 。

我有一个有效的示例，正​​在使用以下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后出现。 这样，我知道它将在用户完全滚动经过介绍文本之后进入。

这是我的小提琴

我想做什么很好的例子？ 还是修改jquery脚本的简便方法？ 提前致谢。

Answer 1

通过静态导航后，此修改将使其淡入

演示

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

Answer 2

演示 http://jsfiddle.net/EHhQE/1/

当滚动分别到达导航栏的底部和顶部时，您需要淡出和淡入导航。

var topOfDiv = $('#navigation').position().top;
var bottomOfDiv = $('#navigation').position().top+$('#navigation').outerHeight(true);

并获取您的代码：

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

  $(window).on('scroll',function() {
    var scrolltop = $(this).scrollTop();
    var topOfDiv = $('#navigation').position().top;
    var bottomOfDiv = $('#navigation').position().top+$('#navigation').outerHeight(true);

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

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

Answer 3

$(document).ready(function ()
{
    slider();
});

$(window).scroll(function ()
{
    slider();
});

function slider()
{
    if (document.body.scrollTop > 208)
        $('#fixedMenu').fadeIn(0);
    else
        $('#fixedMenu').fadeOut(0);
}