jQuery addClass example

Change class name on click in jQuery

by tyminko

HTML

<body>

  <div class="white-space-on-top"></div>

  <header class="header sticky" id="navbar">
    <div class="big-wrapper-main">
      <a href="index.html" class="logo">My site</a>
      <input class="menu-btn" type="checkbox" id="menu-btn" />
      <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
      <ul class="menu">
        <li><a href="index.html">Work</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>
  </header>

  <div class="content">
    <div class="big-wrapper-main">

      <h1>Hi there</h1>
      <p class="col-md-10 lead-text">Cupcake ipsum dolor sit. Amet sweet roll bonbon icing cotton candy. Halvah cupcake dessert biscuit ice cream gummi bears danish biscuit. Icing macaroon gummies fruitcake. Gummi bears oat cake candy chocolate bar cotton candy macaroon. Candy topping soufflé cake. Jelly beans toffee pastry chupa chups cake. Gummi bears pastry sweet roll oat cake cupcake donut tart. Icing tootsie roll tiramisu chocolate cake. Bonbon oat cake toffee cake bear claw wafer apple pie chocolate cake caramels. Sesame snaps muffin danish. Macaroon topping dessert lemon drops topping tart candy canes. Dessert gingerbread sugar plum cake. Cotton candy tart bonbon sugar plum icing tiramisu bear claw cookie gummi bears.</p>
      <br>
      <p class="col-md-10 lead-text">Cupcake ipsum dolor sit. Amet sweet roll bonbon icing cotton candy. Halvah cupcake dessert biscuit ice cream gummi bears danish biscuit. Icing macaroon gummies fruitcake. Gummi bears oat cake candy chocolate bar cotton candy macaroon. Candy topping soufflé cake. Jelly beans toffee pastry chupa chups cake. Gummi bears pastry sweet roll oat cake cupcake donut tart. Icing tootsie roll tiramisu chocolate cake. Bonbon oat cake toffee cake bear claw wafer apple pie chocolate cake caramels. Sesame snaps muffin danish. Macaroon topping dessert lemon drops topping tart candy canes. Dessert...

CSS

/* THE PROBLEMATIC PART */

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
}

@media (max-width: 767px) {
  .sticky {
    /* position: fixed; */
  }
}

.sticky + .content {
  /* padding-top: 58px; */
}

/* ---With a 248px padding for the ".sticky + .content" the page content would not jump when the hamburger menu is opened and we start scrolling. It messes up the scrolling with the menu closed though.--- */

/* .sticky + .content {
  padding-top: 248px;
} */

@media (min-width: 48em) {
  .sticky + .content {
    padding-top: 0px;
  }
}











/* NAV BAR STYLING */

.header {
  background-color: var(--Bg-op);
  min-height: 58px;
  width: 100%;
  z-index: 99;
  transition: top 0.3s;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  text-align: center;
  font-size: 18px;
}

.header li a {
  color: var(--Low-emp);
  display: block;
  padding: 20px 20px;
  text-decoration: none;
  -webkit-transition-duration: 0.15s;
  transition-duration: 0.15s;
  transition-timing-function: ease-in-out;
}

.header li a:hover,
.header .menu-btn:hover {
  color: var(--High-emp);
}

.header li a .menu-separator-dot {
  padding: 5px 5px;
}

.header .logo {
  display: block;
  float: left;
  padding: 20px 0px;
  text-decoration: none;
  font-family: 'Hind', sans-serif;
  font-size: 18px;
  line-height: 22px;
  font-weight: 700;
  color: var(--High-emp);

}

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 0px 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: var(--High-emp);
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: var(--High-emp);
  content: '';
  display: block;
  height:...

JavaScript

(function($) { // Begin jQuery
  $(function() { // DOM ready
    // Toggle open and close nav styles on click
    $('#nav-toggle').click(function() {
      $('nav ul').slideToggle();
    });
    // Hamburger to X toggle
    $('#nav-toggle').on('click', function() {
      this.classList.toggle('active');
    });
  }); // end DOM ready
})(jQuery); // end jQuery

// window.onscroll = function () { myFunction() };

// Get the header
var header = document.getElementById("navbar");

// Get the offset position of the navbar
var sticky = header.offsetTop;

var prevScrollpos = window.pageYOffset;



function myFunction(x) {
  if (x.matches) { // If media query matches

    window.onscroll = function() {
      var currentScrollPos = window.pageYOffset;

      /* if (window.pageYOffset > sticky) {
        header.classList.add("sticky");
      } else {
        header.classList.remove("sticky");
      } */
    }

  } else {
    window.onscroll = function() {
      var currentScrollPos = window.pageYOffset;
      if (prevScrollpos > currentScrollPos) {
        document.getElementById("navbar").style.top = "0";
        if (window.pageYOffset > sticky) {
          header.classList.add("sticky");
        }
      } else {
        document.getElementById("navbar").style.top = "-58px";
        if (window.pageYOffset < sticky) {
          header.classList.remove("sticky");
        }
      }
      prevScrollpos = currentScrollPos;
    }
  }
}

var x = window.matchMedia("(max-width: 767px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes