时间戳

首页 > 解决方案 > 到达网站底部时如何使导航可见？

javascript - 到达网站底部时如何使导航可见？

问题描述

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

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

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

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

标签： javascriptscrollvisibility

解决方案

滚动事件方法：

 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>

推荐阅读