Custom Javascript to show and hide header bottom element on scroll

[mattkutz]

I gave the element (button) a class: .headercall

Then in the global css I had it initially hidden by:

.headercall{
  display:none;
}

And finally I added this javascript into the global javascript: (Depending on when you want to show the button, you can change the percentage. Also you can change the number in the show and hide functions for different intervals to your liking)

var available;
var percentage_of_page;
var half_screen;
var height;

$(window).scroll(function (e) {
    available = $(document).height();
    percentage_of_page = 0.05;
    half_screen = available * percentage_of_page;
    height = $(window).scrollTop();
    if ( height > half_screen ) {
        $('.headercall').show(400);
    } else {
        $('.headercall').hide(400);
    }
});

The only problem, is that this works only on the homepage. Every other page gives an “Uncaught TypeError: $ is not a function” Which does not make sense. How is the script code functioning on one page but not another?

[mattkutz]

I figured out that if I encapsulated the javascript in a jQuery call it doesn’t cause conflicts. Happy coding!

jQuery(function($) {

var available;
var percentage_of_page;
var half_screen;
var height;

$(window).scroll(function (e) {
    available = $(document).height();
    percentage_of_page = 0.05;
    half_screen = available * percentage_of_page;
    height = $(window).scrollTop();
    if ( height > half_screen ) {
        $('.headercall').show(400);
    } else {
        $('.headercall').hide(400);
    }
});

});