Javascript 向下滚动时隐藏标题，向下滚动时显示

我有一个固定标题和固定横幅1页的网站。我的标题仅在我向上滚动“关于”页面时显示，但当我向下滚动“关于”页面时，标题将不再显示。

---

请查看我的网站

将jquery包含在您的文件中，并将此代码用于您的网页，我刚刚使用firebug在您的网站上进行了检查

$(window).scroll(function(e){ 
              var $el = $('header'); 

              if ($(this).scrollTop() > 200){ 
 $('header').css({'display': 'none'}); 
              }
              if ($(this).scrollTop() < 200)
              {
 $('header').css({'display': 'block'}); 
              } 
            });     

$（窗口）。滚动（函数（e）{
变量$el=$（'header'）；
如果（$（this.scrollTop（）>200）{
$（'header'）.css（{'display'：'none'}）；
}
if（$（this）.scrollTop（）<200）
{
$（'header'）.css（{'display'：'block'}）；
} 
});     

---

我不确定你到底在寻找什么，但我希望这能帮助你，祝你好运。如果没有，请尽量让它更清楚，我将再次尝试帮助您。

在您的文件中包含jquery并将此代码用于您的网页，我刚刚使用firebug在您的网站上检查了它

$(window).scroll(function(e){ 
              var $el = $('header'); 

              if ($(this).scrollTop() > 200){ 
 $('header').css({'display': 'none'}); 
              }
              if ($(this).scrollTop() < 200)
              {
 $('header').css({'display': 'block'}); 
              } 
            });     

$（窗口）。滚动（函数（e）{
变量$el=$（'header'）；
如果（$（this.scrollTop（）>200）{
$（'header'）.css（{'display'：'none'}）；
}
if（$（this）.scrollTop（）<200）
{
$（'header'）.css（{'display'：'block'}）；
} 
});     

---

我不确定你到底在寻找什么，但我希望这能帮助你，祝你好运。如果没有，请尽量说清楚，我会再次帮助您。

如果我理解了您的问题，那是因为您在向下滚动并从标题中删除

.nav down

类时添加了

.nav up

类。 您的

.nav up

具有

top:-125px

属性。这就是导致标题被“隐藏”的原因

编辑：

// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();

    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop){
       $('header').removeClass('nav-down').addClass('nav-up');
    } else {
      $('header').removeClass('nav-up').addClass('nav-down');
    }
    lastScrollTop = st;
}

因此，我去掉了delta，只需检查用户是向上还是向下滚动，就简化了

hasScrolled

函数，并在此基础上添加

.nav up

或

.nav down

---

希望有帮助！：）

如果我理解了你的问题，那是因为当你向下滚动并从标题中删除

.nav down

类时，你正在添加

.nav up

类。 您的

.nav up

具有

top:-125px

属性。这就是导致标题被“隐藏”的原因

编辑：

// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();

    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop){
       $('header').removeClass('nav-down').addClass('nav-up');
    } else {
      $('header').removeClass('nav-up').addClass('nav-down');
    }
    lastScrollTop = st;
}

因此，我去掉了delta，只需检查用户是向上还是向下滚动，就简化了

hasScrolled

函数，并在此基础上添加

.nav up

或

.nav down

---

希望有帮助！：）

我在寻找解决方案，并找到了两种方法

首先

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("header").style.top = "0";
  } else {
    document.getElementById("header").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}

秒

在js中：

---

我在寻找解决方案，找到了两种方法

首先

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("header").style.top = "0";
  } else {
    document.getElementById("header").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}

秒

在js中：

---

它可以工作，但当我在“关于”页面下方时，它不会显示。请查看此更新链接l.esy.es/CMENIANOT，它正在工作，但当我在“关于”页面下方时，它不会显示。请查看此更新链接l.esy.es/cmenianoyeah这是我的意图向下滚动隐藏导航，向上滚动显示导航。但是，当我在“关于页面”部分下，然后当我试图向上滚动导航栏时，却没有向下编辑答案时，请查看它！是的，这是我的意图向下滚动隐藏导航，向上滚动显示导航。但是，当我在“关于页面”部分下，然后当我试图向上滚动导航栏时，却没有向下编辑答案时，请查看它！