Почему я не могу заставить плагин jquery-visible работать вообще?

Complete SSCCE JSFiddle here!Почему я не могу заставить плагин jquery-visible работать вообще?

Что я хочу:

Когда страница прокручивается вниз до такой степени, что верхняя часть страницы (heightwise равна высоте окна просмотра) нет более подробно, a CSS class (sticky в примере) следует добавить в меню заголовка .header-menu-container-nav.
Затем, когда пользователь начинает прокрутку обратно вверх, как только тот часть страницы (самая верхняя часть страницы, которая является heightwise равна высоты окна просмотра), т.е. .firstpagediv от Например, Я считаю,, событие, снятое при прокрутке вниз, должно быть удалено , а класс sticky должен быть удален.

Как я пытаюсь сделать это:

Использование в jquery-visible plugin:

JQuery видимый плагин, кажется, не работает.

Я добавил Jquery видимый плагин в моем HTML <head> (после извлечения .zip скачанный отсюда в папке проекта), как это:

<script src="jquery-2.1.3.js"></script> 
    <script type="text/javascript" src="jquery-visible-master/jquery.visible.js"></script>

Пожалуйста скажите мне, что я делаю неправильно? И как заставить это работать?

Мой код:

/** 
* Function for the header's drama! 
**/ 
$(window).bind('scroll', function(){ 

    var lastScrollTop = 0; 
    var originalHeaderPosition = $(".header-menu-container-nav").offset().top; 

    var scrollTop = $(this).scrollTop(); 
    var vph = $(window).height(); 

    var currentHeaderPosition = $(document).scrollTop(); 
    var deltaHeaderPosition = currentHeaderPosition - originalHeaderPosition; 

    if (scrollTop > lastScrollTop){ // downscroll code 
     if (deltaHeaderPosition >= vph) { 
      $('.header-menu-container-nav').addClass('sticky'); 
      $('.header-menu-container-nav').fadeIn(); 
     } 
    } else {// upscroll code 
     if ($('firstPage').visible(true)) {//******************* 
      $('.header-menu-container-nav').fadeOut(function() { 
       $('.header-menu-container-nav').attr('style',''); 
       $('.header-menu-container-nav').removeClass('sticky'); 
      }); 
     } 
    } 
     lastScrollTop = scrollTop; 
});

источник

2015-04-08 Solace

Снимите минимальную ссылку видимого каркаса. Это один и тот же код, но в сжатом стиле, поэтому он может испортить ваши ссылки. – ElliotM

@ElliotM Средняя версия? Что вы имеете в виду? и рамки? Это плагин. Я новичок, поэтому, если вы можете сказать это более простым способом, я буду очень благодарен. – Solace

Удалите ссылку на '' jquery-visible-master/jquery.visible.min.js''. Прошу прощения, это библиотека. – ElliotM

У вас не хватает "" в следующих строках, которые должны упоминаться как класс.

$('firstPage').visible(true) 
$('sticky').css('top', 0+'px');

См here, я добавил сырец Jquery-видимую-мин в ваших JavaScript и редактировать код.

источник

2015-04-08 13:47:46 PAC

Во-первых, спасибо. Я исправил синтаксическую ошибку. Но все же результат не тот, который я ожидал. Из [данного учебника] (https://www.customd.com/articles/13/checking-if-an-element-is-visible-on-screen-using-jquery), _ «Передача истины« видимым », метод, скажет плагину вернуть true, если ЛЮБАЯ часть элемента виден на экране пользователя. "_. ** Я передаю 'true' функции' visible() ', но все же **, как вы можете видеть в [вашем JSFiddle] (http://jsfiddle.net/w7eowzcq/25/), это только ** кажется для возврата true, когда весь элемент '.firstPage' становится видимым **. = s – Solace

Почему я не могу заставить плагин jquery-visible работать вообще?

ответ

Смежные вопросы