jQuery Adding/Removing class according to page scroll

Question

I have a code snippet that I use in my websites to display a Call to Action btn when the user scrolls down a webpage. But its not working in one of my websites. I have researched and couldn't find an error. Here's the link to the page I am using this code. Why JS is not adding the class "atcbottomactive" to the element?

 $(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 1100) {
        $(".atcbottom").addClass("atcbottomactive");
    } else {
        $(".atcbottom").removeClass("atcbottomactive");
    }
});

@media only screen and (min-width:1000px) {
	
    .atcbottom {
        display: none!important
    }
    .btnn {
        margin-top: -60px!important
    }
}

@media only screen and (max-width:999px) {
    .atcbottomactivepopup {
        margin-bottom: 60px
    }
}


.atcbottom {
    height: 60px;
    width: 100vw;
    position: fixed;
    z-index: 102;
    background: #fff;
    bottom: -100px;
    transition: 2s;
    left: 0;
}

.atcbtn {
    height: 40px;
    background: #4cae4c;
    width: 90vw;
    margin-top: 10px;
    margin-left: 5vw;
    border: none;
    color: #fff;
    font-size: 20px;
}

.atcbottomactive {
    bottom: 0
}

<div style="height:1000px; width: 100%; background: blue">

<div class='atcbottom'>
      <div class="container">
		<div class="row">
          <a href="#ProductPrice-product-template">
          <button type="button" class="atcbtn">Call to action</button>
          </a>
        </div>
      </div>
  	</div>
  


  </div>

Adnane Ar · Accepted Answer · 2019-08-28 20:32:22Z

You can do it with pure Javascript, here is an example that I wrote it just for you. Hope that my code would be useful!

window.addEventListener("scroll", function(e){
  e=(e||window.event);
  e.preventDefault();
  
  const topOffset=window.scrollY;
  document.querySelector("#scrollOffset").innerHTML="ScrollTop: "+topOffset+"px";
  
  if(topOffset> 100 ){
    document.querySelector(".box").classList.add("scrollEffect");
  
  }else document.querySelector(".box").classList.remove("scrollEffect");
  
});

span#scrollOffset{
  position: fixed;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  padding: 4px 8px;
  padding-top: 6px;
  border-radius: 4px;
  background-color: rgba(0,0,0,.5);
  z-index: 10;
  color: white;
  font-size: 12px;
  font-family: Arial, sans-serif;
}

.box{

  width: 200px;
  height: 200px;
  background-color: #eee;
  padding: 20px;
  
}

.box.scrollEffect{
  background-color: yellow;
}

<body style="min-height: 200vh">
  <span id="scrollOffset">ScrollTop: 0px</span><br>
  <div class="box">This box class must change when scroll even fires !</div>
<body>

RobertAKARobin · Accepted Answer · 2019-08-28 19:51:39Z

1

When I look at your website, and open my developer console, I see these errors:

It seems jQuery is available on your site, but for some reason is not saved to the variable $. You have to access it with the jQuery variable.

answered Aug 28, 2019 at 19:51

RobertAKARobin

4,3044 gold badges29 silver badges49 bronze badges

6 Comments

Batman Over a year ago

Thanks for the help! I am just starting with JS and JQuery, how should I access with the JQuery variable?

RobertAKARobin Over a year ago

Use jQuery instead of $. For example, instead of $(".atcbottom").removeClass("atcbottomactive");, write jQuery(".atcbottom").removeClass("atcbottomactive");.

Batman Over a year ago

I made the changes but it didnt work: eyusatzpcq29rujb-9315549265.shopifypreview.com/collections/… , the same error keep appearing on console aswell

RobertAKARobin Over a year ago

$ shows up in several other places in your code, such as $(window).scroll(function() {. Make sure you get all of them.

Batman Over a year ago

I have replaced all $ to jQuery and now the console displays the error with jQuery

|

Aaron Teering · Accepted Answer · 2019-08-28 20:29:23Z

1

I looked at your site, in the dev console it says that it doesn't reconize the $ sign. You could change the $ sign to jQuery. but if you want to use the $ sign you'll need to load the slim.min version of jquery.

answered Aug 28, 2019 at 20:29

Aaron Teering

217 bronze badges

Collectives™ on Stack Overflow

jQuery Adding/Removing class according to page scroll

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related