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

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.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 2

试试这个，我添加了条件来检测顶部和底部并相应地显示导航栏

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

对于 mouseout

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

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");
  }
});

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

How to make the nav visible while you reaching the bottom of the site?

javascript

scroll

visibility

滚动事件方法：

示例：