JS | 滚动时未显示我的粘性菜单

Question

OK, LovableCodeGuy here, new to the JS world, although I doubt I'll be sticking to it long. I have a circular menu that is supposed to smoothly slide down into position onscroll by manipulating the top CSS attribute - going from top: -100px; when at the top of the page (out of sight) to top: 400px; when the user scrolls down with a transition: 0.5s; .

Pretty neat stuff.

Except it isn't, because I'm getting nothing in the way of JS functionality, but everything else is just peachy. The JS coding is inserted into the HTML document in between <script></script> & is placed above the div tags.

So I'll post the code down below and see if anyone can tell me what I am missing:

 $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scrollTop > 100) { $(".stickyMenu").addClass("scroll_reveal"); } else { $(".stickyMenu").removeClass("scroll_reveal"); } });

 .stickyMenu{ display: block; position: fixed; top: -100px; right: 20px; background-color: #0D0155; color: #fff; padding: 10px 15px; font-family: fontAwesome; z-index: 9999999; font-size: 18px; border-radius: 30px; }.scroll_reveal{ transition: 0.5s; top: 150px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="stickyMenu">Menu</div> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br> Text Text<br><br>

Thank you.

Answer 1

scrollTop is actually scroll so just change the variable

 var scroll = $(window).scrollTop();
if (scrollTop > 100) {

so should be

if (scroll > 100) {

By the way, when writing JS/CSS/HTML try to work with Dev Tools ON. those kind of errors would be there. you could easily fix it:)