如何在到达站点底部时使导航可见？

Question

我不知道为什么，但当我到达网站底部时，导航应该会再次出现。我怎么才能修复它呢？

相反的效果=每次你到达网站的顶端，导航就会出现。如果你在开始时向下滚动= nav消失+如果你悬停在nav上=它再次出现，并通过离开它而消失。

在滚动??时，导航出现在顶部+消失

$(document).ready(function() {
  $(window).on('scroll', function() {
$('.nav-visibility').css("opacity", $(window).scrollTop() > 0 ? "0" : "1")
  })
})

在悬停??时显示和隐藏导航

$('nav').mouseover(function() {
  $('.nav-visibility').css("opacity", "1");
});

$('nav').mouseout(function() {
  if ($(window).scrollTop() > 0) {
    $('.nav-visibility').css("opacity", "0");
  }
});

导航应该在到达底部时出现/不起作用？！??

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
  $('.nav-visibility').css("opacity", "1");
   }
});

Answer 1

尝试一下，我已经添加了检测顶部和底部的条件，并相应地显示导航栏

$(document).ready(function() {
  var navbar = $('.nav-visibility')
  $(window).on('scroll', function() {
    //Check for top and bottom
    if($(window).scrollTop() + $(window).height() >= $(document).height() || $(window).scrollTop() == 0) {
        navbar.css("opacity", "1");
    }else{
      navbar.css("opacity", "0");
    }
  })
})

对于鼠标输出

$('nav').mouseout(function() {
  var navbar = $('.nav-visibility')
  if($(window).scrollTop() + $(window).height() <= $(document).height() && window.scrollY > 0){
    navbar.css("opacity", "0");
  }
});

Answer 2

Scroll事件方法：

 document.addEventListener('scroll', function(e) {
    if((document.documentElement.scrollTop + window.innerHeight) >= document.documentElement.scrollHeight){
       // Do something!
       // document.getElementById('foo').setAttribute("style", "display: none");
    }
 }, true);

示例：

​

document.addEventListener('scroll', function(e) {
        if((document.documentElement.scrollTop + window.innerHeight) >= document.documentElement.scrollHeight){
          document.getElementById('foo').innerHTML = "Reached Bottom";     
           document.getElementById('foo').setAttribute("style", "height: 100px;");
       }
}, true);

<div id="foo" style="height: 1800px">Scroll to Bottom</div>

​

Answer 3

再次感谢你们！这个问题已经解决了，它的工作方式和我预期的一样。

$(document).ready(function() {
  var navbar = $('.nav-visibility')
  $(window).on('scroll', function() {
    //Check for top and bottom
    if ($(window).scrollTop() + $(window).height() >= $(document).height() || $(window).scrollTop() == 0) {
      navbar.css("opacity", "1");
    } else {
      navbar.css("opacity", "0");
    }
  })
})

$('nav').mouseover(function() {
  $('.nav-visibility').css("opacity", "1");

});

$('nav').mouseout(function() {
  var navbar = $('.nav-visibility')
  if ($(window).scrollTop() + $(window).height() < $(document).height() && window.scrollY > 0) {
    navbar.css("opacity", "0");
  } else if ($(window).scrollTop() + $(window).height() > $(document).height() && window.scrollY < 0) {
    navbar.css("opacity", "1");
  }
});