滾動經過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);
}