固定菜单在滚动过去div后固定

我正在为响应站点创建固定位置子导航菜单栏。我所能找到的滚动后固定顶部的固定菜单的所有示例均基于顶部的一组像素。但是，由于我在工作一个响应站点，因此我需要菜单进入的顶部像素基于视口而不同（在小屏幕上，因为内容填充更高，因此应该在更多区域向下滚动时出现菜单）屏幕区域）。固定菜单在滚动过去div后固定

我有一个工作例子，现在用的是下面的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脚本？提前致谢。

来源

2014-03-28 tyler_lisa

此修改将使它淡入它通过静态NAV

DEMO

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

来源

2014-03-28 20:57:02 kei

演示后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); 
    } 
    }); 
});

来源

2014-03-28 20:58:56 Arbel

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

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

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

来源

2014-03-28 20:59:23

固定菜单在滚动过去div后固定

回答

相关问题