Trouble with Javascript in Wordpress

Vote count:

0

I'm trying to create an element in a Wordpress site where a piece of content begins partway down the screen, and sticks to the top of the screen when the user scrolls down.

I've tried various things, and none of them have worked. The most recent attempt uses Javascript to give and take away a class to the content I'm trying to move/fix.

The code is

jQuery( document ).ready(function($) {
    alert( "test1!" );

    var wrap = $("#wrap");

    wrap.on("scroll", function(e) {

        if (this.scrollTop > 147) {
            wrap.addClass("fix-search");
            alert("test2");
        } else {
            wrap.removeClass("fix-search");     
        }

    });

});

The file is enqueuing properly since the first test alert ("test1" fires, but "test2" doesn't fire as I scroll down the screen. I've had that same piece of code working in a modified version of the original code on codepen (http://ift.tt/1b1vJKM) so I can only assume this is something weird with Wordpress interacting with Javascript.

So yeah, anyone know a way to either do that I'm wanting to do in a way that will work with wordpress, or to get the above piece of code working properly?

asked 53 secs ago

user3201991

19

Trouble with Javascript in Wordpress