Показать div на scrollDown после 800px

Я хочу показать скрытый div при прокрутке вниз после 800px в верхней части страницы. К настоящему моменту у меня есть этот пример, но я думаю, он нуждается в модификации, чтобы добиться того, что я ищу.

EDIT:

[И если scrollUp и высота меньше 800px, этот div должен скрывать]

HTML:

<div class="bottomMenu">
  <!-- content -->
</div>

CSS

.bottomMenu {
    width: 100%;
    height: 60px;
    border-top: 1px solid #000;
    position: fixed;
    bottom: 0px;
    z-index: 100;
    opacity: 0;
}

JQuery

$(document).ready(function() {
    $(window).scroll( function(){
        $('.bottomMenu').each( function(i){
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            if( bottom_of_window > bottom_of_object ){
                $(this).animate({'opacity':'1'},500);
            }
        }); 
    });
});

Вот Fiddle моего текущего кода.

Ответ 1

Если вы хотите показать div после прокрутки нескольких пикселей:

Рабочий пример

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});

body {
  height: 1600px;
}
.bottomMenu {
  display: none;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  border-top: 1px solid #000;
  background: red;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Scroll down... </p>
<div class="bottomMenu"></div>

Ответ 2

У вас есть кое-что, что происходит там. Один, почему класс? На самом деле у вас их несколько на странице? CSS подсказывает, что вы не можете. Если нет, вы должны использовать идентификатор - быстрее выбрать как в CSS, так и в jQuery:

<div id=bottomMenu>You read it all.</div>

Во-вторых, у вас есть несколько сумасшедших вещей в этом CSS - в частности, z-index должен быть просто числом, а не измеренным в пикселях. Он указывает, на каком слое находится этот тег, где каждое большее число ближе к пользователю (или другим способом, поверх/окклюзирующих тегов с более низкими z-индексами).

Анимация, которую вы пытаетесь сделать, это в основном .fadeIn(), поэтому просто установите div для отображения: none; изначально и использовать .fadeIn() для его анимации:

$('#bottomMenu').fadeIn(2000);

.fadeIn() работает, сначала делая отображение: (независимо от правильного свойства отображения для тега), opacity: 0, затем постепенно увеличивая непрозрачность.

Полный рабочий пример:

http://jsfiddle.net/b9chris/sMyfT/

CSS

#bottomMenu {
    display: none;
    position: fixed;
    left: 0; bottom: 0;
    width: 100%; height: 60px;
    border-top: 1px solid #000;
    background: #fff;
    z-index: 1;
}

JS:

var $win = $(window);

function checkScroll() {
    if ($win.scrollTop() > 100) {
        $win.off('scroll', checkScroll);
        $('#bottomMenu').fadeIn(2000);
    }
}

$win.scroll(checkScroll);

Ответ 3

SCROLLBARS и $(window).scrollTop()

То, что я обнаружил, заключается в том, что вызов такой функциональности, как в приведенном выше решении, есть много других примеров этого на этом форуме, которые все работают хорошо) только успешно, когда полосы прокрутки действительно видны и работают.

Если (как я, пожалуй, глупо пытался), вы хотите реализовать такую функциональность, и вы также хотите, чтобы мы сказали, чтобы реализовать минималистский "чистый экран", свободный от полос прокрутки, например, это обсуждение, тогда $(window).scrollTop() не будет работать.

Это может быть фундаментальное программирование, но я подумал, что предлагаю руководителям любых новичков-новичков, поскольку я долго размышлял об этом.

Если кто-то может предложить некоторые советы о том, как преодолеть это или немного более глубокое понимание, не стесняйтесь отвечать, поскольку мне приходилось прибегать к показу/скрытию onmouseover/mouseleave вместо здесь

Live long и программа, CollyG.

Ответ 4

Вы также можете сделать это.

$(window).on("scroll", function () {
   if ($(this).scrollTop() > 800) {
      #code here
   } else {
      #code here
   }
});