jQuery .hide（）滚动位置

我想在我的单页网站的第一部分隐藏Bootstrap-Navbar，并在滚动过去第一部分时将其淡入。jQuery .hide（）滚动位置

我试过使用jQuery .hide（）效果，告诉它在scrollTop为< 300px时隐藏导航栏，并在下面淡入淡出 - 此工作正常，但第一次页面加载导航栏时不会隐藏，我第一次向下滚动，我无法弄清楚为什么。

这里是我的代码：

$('#wrapper').scroll(function(){ 
if($(this).scrollTop() < 300) $('#navbar').hide('easing'); 
if($(this).scrollTop() > 300) $('#navbar').fadeIn('slow'); 
});

这里是jsfiddle

我怎样才能做到这一点？

来源

2014-03-19 MarcL

-1

尝试用这种

HTML

<div id="navbar" style="display:none">Teasers Div</div>

脚本

$(document).ready(function() { 
    $('#wrapper').scroll(function(){ 
    if($(this).scrollTop() > 300) 
    $('#navbar').fadeIn('slow'); 
    else 
    $('#navbar').hide('easing'); 
    }); 
});

DEMO

来源

2014-03-19 11:06:00

这将调用'每次'＃wrapper'元素滚过300像素时间fadeIn'。 –

所以我想我的问题是，我只使用.hide（）只有当我滚动和你的行动直接打开文档时加载 - 哇，这是一个简单的解决方案：D 谢谢！ – MarcL

@ user3037063很高兴帮助你.. !!如果它的帮助在一段时间后回复upvote –

我认为这是监守的#navbar元素最初没有隐藏。

只是隐藏它使用CSS：

#navbar { 
    height:50px; 
    background-color:green; 
    position:fixed; 
    top:20px; 
    width:100%; 
    display: none; 
}

演示：http://jsfiddle.net/Ub4xm/17/

来源

2014-03-19 11:07:24

你应该设置栏隐藏在启动时，无论是在CSS（清洁）或HTML（快速和肮脏的）。

如果我是正确的，jQuery的.hide（）会将显示设置为“none”，因此.fadeIn（）会将显示设置为“block”，因此将页面加载的显示设置为“none”。

来源

2014-03-19 11:07:40

是的，谢谢！ – MarcL

外接显示器无法比拟的：

#navbar { 
    height:50px; 
    background-color:green; 
    position:fixed; 
    top:20px; 
    width:100%; 
    display:none; /* <--add this*/ 
}

或在你的js可以触发在文档准备好您的.scroll()：

$(document).ready(function() { 
    $('#wrapper').scroll(function() { 
    if ($(this).scrollTop() < 300) { 
     $('#navbar').hide('easing'); 
    } else if ($(this).scrollTop() > 300) { 
     $('#navbar').fadeIn('slow'); 
    } 
    }).scroll(); // <-----trigger it here first. 
});

上面的代码让你看到隐藏与当文档是缓解准备。

来源

2014-03-19 11:09:11 Jai

第一次在加载时隐藏#navbar。

$(document).ready(function() { 

    $('#navbar').hide(); 

    $('#wrapper').scroll(function(){ 
     if($(this).scrollTop() < 300) $('#navbar').hide('easing'); 
     if($(this).scrollTop() > 300) $('#navbar').fadeIn('slow'); 
    }); 
});

demo

来源

2014-03-19 11:14:24

jQuery .hide（）滚动位置

回答

相关问题