Show element when scroll down - Uncaught TypeError: $ is not a function

[kazooi]

Hi Friends!

I am trying to create a sticky button which shows up when scrolling down for 100px, but I have problems to figure out whats wrong with the code. First I thought it is because of Wordpress and I need to fix something there because I use a custom html element and additional css, but I got back an error from the console.

HTML:

<div id="sticky-cta" class="sticky-cta hide">
    <button>Click here</button>
     <p><i>Some text here</i></p>
</div>

CSS:

.sticky-cta {
    position: fixed;
    display: inline;
    right: 20px;
    top: 20px;
    z-index: 10000;
    
    transition: all 1s;
}

.hide {
    opacity:0;
}
.show {
    opacity:1;
}

.sticky-cta button {
    font-family: 'Proxima Nova Bold - OTF';
    background-color: #C79C60;
    border: none;
    padding: 18px 32px 18px 32px;
}

.sticky-cta p {
    font-family: 'Proxima Nova Light - OTF';
    background-color: #047FC7;
    color: #fff;
    border: none;
    padding: 5px 32px 5px 32px;
}

JAVASCRIPT:

<script>
    $(document).scroll(function() {

        myID = document.getElementById("sticky-cta");

        var myScrollFunc = function () {
            var y = window.scrollY;
            if (y >= 100) {
                myID.className = "sticky-cta show"
            } else {
                myID.className = "sticky-cta hide"
            }
        };

        window.addEventListener("scroll", myScrollFunc);
    });
</script>

This is the error message from the console:

Can anyone help?

[snowmonkey]

It doesn’t like the $ - is this a copy-paste from somewhere? The dollar sign is normally an indicator of the jQuery library. Are you calling that in?

[kazooi]

@snowmonkey No I am not calling JQuery and yes it is an example copy and paste code.

I miss the understanding for the right syntax, so I can just try and error until I go crazy. I can also searching for another code example which works, but I think it is just a tiny little syntax error

[snowmonkey]

$(...).scroll() is a jQuery specific function, used to scroll the viewport to a particular page position.

Seems to me there are two possible fixes: short-term, add a script tag to add the jQuery library, or long-term learn to code the scrolling effect in plain javascript, removing the jQuery $ reference.

Each has pros and cons, and depends on your intent: are you trying to make this work asap, or are you trying to learn javascript?

[kazooi]

Oh I did not know that $(...).scroll() is a jQuery specific function, thanks for letting me know. Actually I never worked with jQuery and there are a lot of opinions around the web that it is not worth learning jQuery anymore… I love CSS and I like to style everything individual by myself if this makes sense…

I am learning JavaScript from the ground on, but it takes time and I need the solution as soon as possible, so it would be great if you have a hint for me how to solve this. In my opinion the code below the first line is correct, so I guess I just need to change the first line which declares a function?

Edit: Maybe I dont even need the first line, I already declared a function var myScrollFunc = function () and I grab the html elements by .getElementById, so what is missing here?

[snowmonkey]

Try simply removing the opening $.scroll line, and the closing parenthesis. See what happens.

[kazooi]

Awesome that helps!! Thanks

The code looks like this now:

<script>
 
        myID = document.getElementById("sticky-cta");

        var myScrollFunc = function () {
            var y = window.scrollY;
            if (y >= 800) {
                myID.className = "sticky-cta show"
            } else {
                myID.className = "sticky-cta hide"
            }
        };

        window.addEventListener("scroll", myScrollFunc);

</script>

But the problem now is that when I first open the website then the element is visible, when I scroll down and up again the element disappears. The element should not be visible when I first open the website, it should just be visible when someone scrolls down.

When I look at the code I dont understand why the element also shows up when the website opens the first time, because Y needs to be greater then 800px to show the element and when the website opens the first time Y is less then 800px.

I thought this happened because the <script> tag is not in the header, but when I put it in the header then it is not working…

Do you maybe know why that is?

[ilenia]

Does it have the hide class when the page load?

[snowmonkey]

@kazooi

myID.className = "sticky-cta show"

So is sticky-cta the class, or the id? Or both? And do you need an explicit show class? I might simply:

myID.classList.add("hide");

// or
myID.classList.remove("hide");

Doing that, you’re simply toggling the one class you need, leaving the rest untouched.