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

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() {

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

    }

  })

})

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

  }

});

Answer 3

滚动事件方法：

 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>