Javascript hide（）滚动位置

我想在我的一页网站的第一部分隐藏我的引导导航栏，当滚动过第一部分时淡入淡出

我尝试使用jQuery.hide效果，告诉它在scrollTop小于300px时隐藏导航栏，并在下面淡入-这很好，但页面第一次加载导航栏时，导航栏并没有隐藏，就在我第一次向下滚动之后，我不知道为什么

这是我的密码：

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

这是你的电话号码

我该怎么做呢？

试试这个

HTML

我认为这是因为navbar元素最初并没有隐藏

只需使用css将其隐藏：

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

---

演示：

您应该在启动时将该栏设置为隐藏，可以使用CSS clean或HTML quick and dirty

如果我的判断正确，jQuery的.hide会将显示设置为无，因此请将页面加载时的显示设置为无，因为.fadeIn会将显示设置为阻止。

将显示添加到无：

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

---

上面的代码让您可以在文档准备就绪时看到隐藏的内容。

在加载时首先隐藏导航栏

$( document ).ready(function() {

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

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

---

每次包装器元素滚动超过300px时，这都会调用fadeIn。所以我想我的问题是，我只在滚动时使用了.hide，并且在加载文档时直接触发了您的操作-哇，这是一个简单的解决方案：D谢谢@user3037063很高兴帮助你，兄弟。。！！如果它有助于接受作为答案，请在删除演示一段时间后再投票？

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

$(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.
});

$( document ).ready(function() {

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

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