How to add and remove CSS classes using JS

Question

I can't understand why this code don't works correctly:

$(document).ready(function() {
  $(window).scroll(function() {
    console.log($(window).scrollTop())
    if ($(window).scrollTop() < 626) {
      $('#shop-cart').addClass('shopcart-hidden').removeClass('shopcart-fixed');
    }
    if ($(window).scrollTop() > 625) {
      $('#shop-cart').removeClass('shopcart-hidden').addClass('shopcart-fixed');
    }
  });
});

The idea is to hide shopping cart information when page loads and to show it only when user scrolls down a little bit. If user scrolls up the information should be hidden again. I've got div with id - shop-cart and some php code inside it, also I've got CSS class defined in style.css:

#shop-cart {
  background:#757575;
}
.shopcart-fixed {
  float:right;
  right:0;
  z-index:100;
  position:fixed;
}
.shopcart-hidden {
  display:none;
}

use toggleClass to switch from one class to another instead of add / remove. Then you only need one test. — scraaappy
– scraaappy, Commented Feb 10, 2017 at 21:27
The code works for me. Here's a fiddle: jsfiddle.net/f3pr4tjL/1 — bejado
– bejado, Commented Feb 10, 2017 at 21:29
bejado, there is nothing speciall in HTML, just some php code which calls shopping cart. The strange thing is that display:none property don't removes :( BTW this code works fine in online sandbox too, but don't works on localhost. I've checked this right now :( — St Pavel
– St Pavel, Commented Feb 11, 2017 at 7:35

Michael Coker · Accepted Answer · 2017-02-10 21:30:16Z

2

Hide the bar by default using CSS, then you only need a single class that you can toggle that will show it as fixed once you pass the scrollTop() you've specified.

$(document).ready(function() {
  $shopCart = $('#shop-cart');
  $(window).scroll(function() {
    var $scrollTop = $(window).scrollTop();
    if ($scrollTop < 626) {
      $shopCart.removeClass('shopcart-fixed');
    }
    if ($scrollTop > 625) {
      $shopCart.addClass('shopcart-fixed');
    }
  });
});

body {
  min-height: 500vh;
}
.shop-cart {
  background:#757575;
  display: none;
}
.shopcart-fixed {
  right:0;
  z-index:100;
  position:fixed;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="shop-cart" class="shop-cart">shop-cart</div>

answered Feb 10, 2017 at 21:30

Michael Coker

53.8k5 gold badges69 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

St Pavel Over a year ago

I've tryed this code in sandboxes online - everything worked fine, but when I paste it to my localhost, then it stops work. It makes everything, except removing display:none :-/ If I remove display:none from CSS - everything works fine. Maybe it is so because of jquery.min.js conflict with bootstrap.min.js?

St Pavel Over a year ago

It started to work normally, after I added display:block!important; in my CSS file. Thanks for answer

St Pavel Over a year ago

One more question, how to check in JS is it frontpage or no? I'd like to show this menu only on frontpage. Or maybe easier will be to check in php using is_frontpage ?

St Pavel Over a year ago

Thanx alot, I've decided to exclude JS in final version and simply call my cart form in header. But anyway, yours advices are very usefull and I will use them in future.

ibrahim mahrir · Accepted Answer · 2017-02-10 21:40:17Z

0

jQuery.toggleClass has a second parameter which tell wether to remove the class or to add it. You can use it like this:

$(document).ready(function() {
    $(window).scroll(function() {
        var scrollTest = ($(window).scrollTop() < 625); // will be true or false
        $('#shop-cart').toggleClass('shopcart-hidden', scrollTest); // will add if scrollTest is true, remove otherwise
        $('#shop-cart').toggleClass('shopcart-fixed', !scrollTest); // will add if scrollTest is false, remove otherwise
    });
});

Note: why are you using two classes to do something you can do with only one class? Just put the CSS of one class as the default and then override that CSS when the other class is set.

answered Feb 10, 2017 at 21:40

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

1 Comment

St Pavel Over a year ago

Thanks for advice, I'm quite new in JS, that's why making mistakes. The strange thing is that display:hidden don't removes :(

Collectives™ on Stack Overflow

How to add and remove CSS classes using JS

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related