Как сделать навигацию видимой, когда вы достигаете нижней части сайта? - PullRequest
Новая
       35

Как сделать навигацию видимой, когда вы достигаете нижней части сайта?

0 голосов
/ 25 апреля 2019

Не знаю почему, но навигация должна появиться снова, когда я достигну нижней части сайта.Как я могу это исправить?

Противоположные работы = каждый раз, когда вы достигаете вершины сайта, появляется навигация.Если вы прокручиваете вниз в начале = навигация исчезает +, если вы наводите на навигационную кнопку =, она появляется снова и исчезает, оставляя ее.

навигация появляется, когда вверху + исчезает при прокрутке ?? 

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

навигация должна появляться при достижении дна / не работает ?!101 

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

Ответы [ 3 ]

0 голосов
/ 25 апреля 2019

Попробуйте, я добавил условие для определения верха и низа и соответственно отобразил навигационную панель 

$(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");
  }
});
0 голосов
/ 25 апреля 2019

Еще раз спасибо, ребята! Проблема исправлена ​​и работает так, как я ожидал. 

$(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");
  }
});
0 голосов
/ 25 апреля 2019

Метод события прокрутки: 

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