.addClass/.removeClass CSS Animations not working

Question

I've been trying to use Jquery Animate and CSS however I cannot seem to get it to work;

  $(function() {
    var navShrink = $("#nav-anim");
    $(window).scroll(function() {
      var scroll = $(window).scrollTop();

      if (scroll >= 500) {
        navShrink.removeClass("navigation").addClass("nav-shrink");
      } else {
        navShrink.removeClass("nav-shrink").addClass("navigation");
      }
    });
  });

css;

#nav-anim {
  transition: height 1s ease; 
}

.navigation {
  height: 12.5vh;
}

.nav-shrink {
  height: 7!important;
}

html but ive left out all my content

<div id="nav-anim" class="row navigation fixed-top no-gutters">

</div>

This code works, it shrinks the height of my navigation bar after 500px. However it has no transition. I just want to ease the height change. Each class it is changing to has a different "height" property set.

Wondering if there's a way to do this without jquery ui.

I've updated my question

Joshua
– Joshua

2020-08-04 15:29:56 +00:00
Commented Aug 4, 2020 at 15:29 — Joshua
– Joshua, Commented Aug 4, 2020 at 15:29

Miloš Miljković · Accepted Answer · 2020-08-05 05:13:09Z

2

Remove !important rule so you don't override styles. This should be best practice.

Update: Added the snippet without the use of jQuery.

const navShrink = document.querySelector('.navigation__container');
document.onscroll = shrinkNavigation => window.pageYOffset >= 500 ? navShrink.classList.add('nav-shrink') : navShrink.classList.remove('nav-shrink');

body {
  margin: 0;
}

.section {
  height: 3000px;
  background-color: lightgrey;
}

.navigation__container {
  position: sticky;
  top: 0;
  background-color: bisque;
  height: 12.5vh;
  display: flex;
  align-items: center;
  transition: all 0.4s ease;
}

.nav-shrink {
  height: 7vh;
}

.menu {
  list-style: none;
}

.nav-shrink.menu__item--anchor {
  color: white;
}

.menu {
  display: flex;
  flex: 1 1 auto;
  justify-content: space-around;
}

<div class="section">
  <nav class="navigation__container">
    <ul class="menu">
      <li class="menu__item"><a class="menu__item--anchor" href="#">link 1</a></li>
      <li class="menu__item"><a class="menu__item--anchor" href="#">link 1</a></li>
      <li class="menu__item"><a class="menu__item--anchor" href="#">link 1</a></li>
      <li class="menu__item"><a class="menu__item--anchor" href="#">link 1</a></li>
      <li class="menu__item"><a class="menu__item--anchor" href="#">link 1</a></li>
    </ul>
  </nav>
</div>

edited Aug 5, 2020 at 5:13

answered Aug 4, 2020 at 15:37

Miloš Miljković

4973 silver badges15 bronze badges

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

1 Comment

Joshua Over a year ago

Nice non jQuery solution!

Will · Accepted Answer · 2020-08-04 15:23:15Z

0

You can add the following lines to your CSS:

.navigation,
.nav-shrink {
    -webkit-transition: background-color 0.4s;
    -moz-transition: height 0.4s;
    -o-transition: height  0.4s;
    -ms-transition: height  0.4s;
    transition: height  0.4s;
}

answered Aug 4, 2020 at 15:23

Will

1,2031 gold badge10 silver badges26 bronze badges

4 Comments

Will Over a year ago

Can you share your HTML and CSS?

Miloš Miljković Over a year ago

Notes: 1. you don't need to remove a class, just add height in #nav-anim and toggle the class nav-shrink with the new height. 2. remove unessecary !important, as new height will be applied because the new class is lower in css. 3. concider that this functionality can be achieved without jQuery.

Joshua Over a year ago

@MilošMiljković my guy. It was this !important causing the issue. Fixed. Simply just removed important. My mind has been imploding, I've done this at least 10 times in the past and it's worked no issue, this time not! All because I've added an important for no reason!!!! Thank you very much.

Miloš Miljković Over a year ago

@Joshua Concider approving my answer. Also working example codepen.io/miljkovicmisa/pen/QWNLeey

Collectives™ on Stack Overflow

.addClass/.removeClass CSS Animations not working

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related