Search code examples
javascriptjqueryjquery-pluginsvisible

Why can't I get the jquery-visible plugin to work at all?

Complete SSCCE JSFiddle here!

What I want:

  1. When the page is scrolled down to the extent that the top part of page (heightwise equal to the viewport's height) is no more visible, a CSS class (sticky in the example) should be added to the header menu .header-menu-container-nav.

  2. Then when the user starts scrolling back up, as soon as the that part of the page (the topmost part of page which is heightwise equal to the viewport's height), i.e. the .firstpage div from the example I believe, the event fired when scrolling down should be removed and the class sticky should be removed.

How I am trying to do this:

Using the jquery-visible plugin:

The jquery-visible plugin does not seem to work at all.

I added the jquery-visible plugin in my HTML <head> (after extracting the .zip downloaded from here in the project's folder) like this:

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

Please tell me what I am doing wrong? And how to get this to work?

My Code:

/**
* 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;
});
Solution

  • You are missing "." in the following lines which have to be mentioned as class.

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

    See here, I added raw Jquery-visible-min in your javascript and edited your code.