Why doesn't my window scroll event fire up at all. Other answers did not solve

Question

Complete SSCCE on JSFiddle here!

I am trying to fire-up a JQuery event to add a class to a div, and add some inline style (i.e. a value for top location offset) when the user scrolls down the page to a certain value of scrollTop() (i.e. when the number of pixels scrolled down (i.e. scrollTop()) becomes greater than the viewport height)

But the JQuery event does not seem to fire-up at all.

$(window).bind('scroll', function() {
    ...
}); 

What I tried:

From my SO search, I gathered that the thing we bind the event to must not be set to not show overflow. My background image slideshow is position:fixed;. So I also tried $("div.firstPage").bind(... and $("div.header-menu-container-nav").bind(... but to no avail.

Note: I know that the example in the JSFiddle might look a little complex. But that is what shows complete CSS (and markup), so I did not try to simplify it further.

Answer 1

You have syntax errors in these locations: (The class names are not enclosed in quotes.)

if (currentPosition >= vph) {
        alert("Condition met!"); //check

        $('.header-menu-container-nav').addClass('sticky');
        --^                       ---^
        $('.header-menu-container-nav').css('top',(deltaMenuPosition)+'px');
        --^                       ---^
        $('.header-menu-container-nav').fadeIn()
        --^                       ---^
    }