滚动过去 div 后固定的固定菜单答案

【问题标题】：fixed menu that is fixed after scrolling past a div滚动过去 div 后固定的固定菜单
【发布时间】：2014-03-28 20:49:57
【问题描述】：

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

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

我有一个工作示例，并且正在使用以下 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脚本的简单方法？提前致谢。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

DEMO

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

【讨论】：

【解决方案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);
    }
  });
});

【讨论】：

【解决方案3】：

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

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

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

【讨论】：