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

时间:2014-03-28 20:49:57

标签: javascript jquery html css

我正在为响应式网站创建固定位置子导航菜单栏。我可以找到一个固定菜单的所有示例,它们在滚动后粘到顶部,基于顶部的一组像素。

然而,由于我正在处理一个响应式网站,我需要菜单进入的顶部的像素根据视口不同(在小屏幕上,菜单应该在更多区域向下滚动后出现,因为内容填充是更高的区域屏幕)。

我有一个工作示例,并使用以下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脚本?提前谢谢。

3 个答案:

答案 0 :(得分:4)

此修改将使其在通过静态导航

后淡入

DEMO

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

答案 1 :(得分:1)

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

答案 2 :(得分:0)

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

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

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