Question

我有一个带固定标题和固定横幅的1页网站。我的标题只显示当我向上滚动页面时，但当我进一步向下页面时，标题将不再显示。请查看我的网站http://l.esy.es/cmeniano/

Answer 1

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

第一

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 lastKnownScrollY = 0;
var currentScrollY = 0;
var idOfHeader = 'header';
var eleHeader = null;
const classes = {
  pinned: 'header-pin',
  unpinned: 'header-unpin',
};
function onScroll() {
  currentScrollY = window.pageYOffset;
  if (currentScrollY < lastKnownScrollY) {
    pin();
  } else if (currentScrollY > lastKnownScrollY) {
    unpin();
  }
  lastKnownScrollY = currentScrollY;
}
function pin() {
  if (eleHeader.classList.contains(classes.unpinned)) {
    eleHeader.classList.remove(classes.unpinned);
    eleHeader.classList.add(classes.pinned);
  }
}
function unpin() {
  if (eleHeader.classList.contains(classes.pinned) || !eleHeader.classList.contains(classes.unpinned)) {
    eleHeader.classList.remove(classes.pinned);
    eleHeader.classList.add(classes.unpinned);
  }
}
window.onload = function() {
  eleHeader = document.getElementById(idOfHeader);
  document.addEventListener('scroll', onScroll, false);
}

在CSS中：

.header{
  transition: transform 0.25s ease-in-out;
}
.header-unpin{
  /* display: none; */
  transform: translateY(-50px);
}
.header-pin{
  /* display: block; */
  transform: translateY(0);
}

Answer 2

在您的文件中包含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'}); 
              } 
            });

我不确定你到底想要什么，但我希望这对你有所帮助，祝你好运。如果没有，请尽量让它更清楚，我会再次帮助你。

Answer 3

如果我理解了您的问题，那么当您向下滚动并从标题中删除.nav-up类时，您正在添加.nav-down类。您的.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或{{1} }。

希望它有所帮助！：）

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

3 个答案: