Resize NAVBAR size when scrolling the page

Question

I’m trying to get Navbar to slow down when I scroll the page, assigning the class .sticky in <nav>. But for some reason, the slider doesn’t decrease, it just changes color. I’ve tried assigning the class to another <div>, but the size does not change, only the color.

I’m wearing a bootstrap.

Check in the codepen: https://codepen.io/Caladan/pen/rwmjBb

Answer 1

I’ve made three small changes to your codepen, and it seemed to work as you want it to:

1- Navbar height is created in class ". navbar" and not in ". nagivation".

.navbar {

height: 100px;

  min-width: 100%;
  background-color: rgba(0, 255, 0, 0.5);
  display: table;
  table-layout: fixed;
   -webkit-transition: all 0.4s ease;
   transition: all 0.4s ease;
}

2- I created the ". Sticky" class separately (you can create it together with the others later, but I think it’s best to have it alone first).

.sticky{
  background-color: rgba(255, 0, 0, 0.8);
  visibility: visible;
  height: 40px !important;
}

3-In Js file I selected the class ". navbar", which is where the class ". Sticky" will be inserted

$(window).scroll(function() {
  if ($(document).scrollTop() > 50) {
    $('.navbar').addClass('sticky');
  } else {
    $('.navbar').removeClass('sticky');
  }
});

Obs: I changed the colors of the bars . Sticky and . navbar, to have a better perception of what was going on.

Answer 2

This is happening because your element . navigation is blocking the height of the content, try adding this css:

.sticky .navigation {
    min-height:80px;
    height:80px;
}

you need to treat the child elements so that your bar is correct.