Streaming live at 10am (PST)

Change Image On Page Scroll - custom JS

When the page scrolls, I change the background color of my nav bar, along with all of the elements inside of it. This works great, and was easy to implement. The last part of my navbar that I need to change is an image, but there is no interaction for changing an image on page scroll, so I am trying to use the custom JS editor. Unfortunately, my Jquery is not running at all, even though I can see it in Chrome Developer Tools:

<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript">
    $(window).scroll(function () {
      	console.log("Scroll")
        if ($(this).scrollTop() > 1) { 
            $('logo-icon').attr('src','...');
        }
        else { 
            $('logo-icon').attr('src','...');
        }
    })
</script>

There is no console log, and nothing changes. I have this set to be added at the end of the head tag. I assume I’m doing something very visibly wrong, so I didn’t go through and attach any public link. Any thoughts on what it could be?

Solution was to add the jquery before the script:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script type="text/javascript">
                $(window).scroll(function () {
                  	console.log("Scroll")
                    if ($(this).scrollTop() > 1) { 
                        $('logo-icon').attr('src','...');
                    }
                    else { 
                        $('logo-icon').attr('src','...');
                    }
                })
            </script>
1 Like