当您到达网站底部时，如何使导航可见？

Question

我不知道为什么，但是当我到达网站底部时，导航应该再次出现。我该如何解决？

相反的作品=每次您到达网站顶部时，都会出现导航。如果在开始处向下滚动=导航消失+如果将鼠标悬停在导航上=它会再次出现并通过离开而消失。

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

$(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() {&nbsp; var navbar = $('.nav-visibility')&nbsp; $(window).on('scroll', function() {&nbsp; &nbsp; //Check for top and bottom&nbsp; &nbsp; if($(window).scrollTop() + $(window).height() >= $(document).height() || $(window).scrollTop() == 0) {&nbsp; &nbsp; &nbsp; &nbsp; navbar.css("opacity", "1");&nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; navbar.css("opacity", "0");&nbsp; &nbsp; }&nbsp; })})对于mouseout$('nav').mouseout(function() {&nbsp; var navbar = $('.nav-visibility')&nbsp; if($(window).scrollTop() + $(window).height() <= $(document).height() && window.scrollY > 0){&nbsp; &nbsp; navbar.css("opacity", "0");&nbsp; }});

Answer 2

再次感谢你们！该问题已修复，其工作方式与我预期的一样。$(document).ready(function() {&nbsp; var navbar = $('.nav-visibility')&nbsp; $(window).on('scroll', function() {&nbsp; &nbsp; //Check for top and bottom&nbsp; &nbsp; if ($(window).scrollTop() + $(window).height() >= $(document).height() || $(window).scrollTop() == 0) {&nbsp; &nbsp; &nbsp; navbar.css("opacity", "1");&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; navbar.css("opacity", "0");&nbsp; &nbsp; }&nbsp; })})$('nav').mouseover(function() {&nbsp; $('.nav-visibility').css("opacity", "1");});$('nav').mouseout(function() {&nbsp; var navbar = $('.nav-visibility')&nbsp; if ($(window).scrollTop() + $(window).height() < $(document).height() && window.scrollY > 0) {&nbsp; &nbsp; navbar.css("opacity", "0");&nbsp; } else if ($(window).scrollTop() + $(window).height() > $(document).height() && window.scrollY < 0) {&nbsp; &nbsp; navbar.css("opacity", "1");&nbsp; }});

Answer 3

滚动事件方法：&nbsp;document.addEventListener('scroll', function(e) {&nbsp; &nbsp; if((document.documentElement.scrollTop + window.innerHeight) >= document.documentElement.scrollHeight){&nbsp; &nbsp; &nbsp; &nbsp;// Do something!&nbsp; &nbsp; &nbsp; &nbsp;// document.getElementById('foo').setAttribute("style", "display: none");&nbsp; &nbsp; }&nbsp;}, true);例子：document.addEventListener('scroll', function(e) {&nbsp; &nbsp; &nbsp; &nbsp; if((document.documentElement.scrollTop + window.innerHeight) >= document.documentElement.scrollHeight){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('foo').innerHTML = "Reached Bottom";&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;document.getElementById('foo').setAttribute("style", "height: 100px;");&nbsp; &nbsp; &nbsp; &nbsp;}}, true);<div id="foo" style="height: 1800px">Scroll to Bottom</div>