So I have a question that may seem silly, but it's worth asking. I'm attempting to create a sticky div element that stays in place when you scroll past a certain point on the page. This is the script I have:
<script type="text/javascript">
$(document).ready(function() {
var s = $("#sticker");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top + 335) {
s.addClass("stick");
} else {
s.removeClass("stick");
}
});
});
</script>
It works perfectly fine on one of my websites. But now, when I try to implement it on a new site, I keep getting an error in my console log that says: TypeError: $ is not a function. It highlights the $(document).ready(function() { part as the issue.
If I take out the $(document).ready and the closing });, it then tells me that var s = $("#sticker"); is causing the $ is not a function error.
I attempted
<script type="text/javascript>
jQuery(document).ready(function() {
var s = $("#sticker");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top + 335) {
s.addClass("stick");
} else {
s.removeClass("stick");
}
});
});
</script>
With this, it ignores the (document).ready part, but still complains about the var section not being a function.
When I remove the script entirely, there are no console log messages. What could be causing the problem? I've tried placing the code in the header, footer, even right before the
<div id="sticker">...</div>