jQuery addClass example

Change class name on click in jQuery

by Sampath_Madhuranga

HTML

<header class="pos-fixed" id="header">
<h1>My Logo</h1>
<button id="navbar-toggle">open/close</button>

<div id="overlay-nav">
  <div class="menu-wrap">
    <div class="menu1">One</div>
    <div class="menu2">Two</div>
  </div>
</div>

</header>

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias in asperiores, voluptas ratione, illo, veniam nihil eligendi deserunt, modi natus reprehenderit? Eaque at molestiae doloribus ex placeat sunt dolores laudantium neque odit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias in asperiores, voluptas ratione, illo, veniam nihil eligendi deserunt, modi natus reprehenderit? Eaque at molestiae doloribus ex placeat sunt dolores laudantium neque odit.</p> 
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias in asperiores, voluptas ratione, illo, veniam nihil eligendi deserunt, modi natus reprehenderit? Eaque at molestiae doloribus ex placeat sunt dolores laudantium neque odit.</p> 
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias in asperiores, voluptas ratione, illo, veniam nihil eligendi deserunt, modi natus reprehenderit? Eaque at molestiae doloribus ex placeat sunt dolores laudantium neque odit.</p> 
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias in asperiores, voluptas ratione, illo, veniam nihil eligendi deserunt, modi natus reprehenderit? Eaque at molestiae doloribus ex placeat sunt dolores laudantium neque odit.</p> 
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias in asperiores, voluptas ratione, illo, veniam nihil eligendi deserunt, modi natus reprehenderit? Eaque at molestiae doloribus ex placeat sunt dolores laudantium neque odit.</p> 
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias in asperiores, voluptas ratione, illo, veniam nihil eligendi deserunt, modi natus reprehenderit? Eaque at molestiae doloribus ex placeat sunt dolores laudantium neque odit.</p>...

SCSS

body {
  background: #eee;
  padding: 0px;
  font-family: Helvetica;
  margin:0px;
  
  &.noscroll {
    position: fixed;
    overflow-y: scroll;
  }
}

*{
  box-sizing:border-box;
}

header {
  background:white;
  width: 100%;
  padding: 40px;
  display: flex;
  transition: all 0.3s ease;
  
  h1 {
    font-size:18px;
    text-transform: uppercase;
  }
  
  button {
    margin-left:auto;
    position:relative;
    z-index:11;
  }
  
  #overlay-nav {
    width: 100vw;
    height: 100%;
    min-height: 100vh;
    overflow-y: scroll;
    position: fixed;
    left: 0;
    top: 0;
    visibility: hidden;
    overflow-x: hidden;
    // pointer-events: none;
    
    .menu-wrap {
      display:flex;
      height:100%;
      position:relative;
      
      .menu1 {
        position:absolute;
        width:50vw;
        background: #fff;
        height:100%;
        padding:30px;
        padding-top:120px;
        opacity:0;
        right: -100vw;
        transition: right 0.5s ease .2s;
      }
      .menu2 {
        position:absolute;
        width:50vw;
        background: #f5f5f5;
        height:100%;
        right: 0;
        padding:30px;
        padding-top:120px;
        opacity:0;
        right: -100vw;
        transition: right 0.7s ease;
      }
    }
    
    &.toggle {
      .menu-wrap {
        .menu1  {
          right: 50vw;
          opacity:1;
        }
        .menu2  {
          right: 0vw;
          opacity:1;
        }
      }
    }
 }
 
 &.suppress-scroll {
   #overlay-nav {
     visibility:visible;
   }
 }
 
 &#header {
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    margin: 0 auto;
    height: auto;
    z-index: 9996;
    position: fixed;
    background-color: #fff;
    transition: transform .3s ease,background-color .3s ease;
 }
 
 &.sticky {
    box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.08);
    position: fixed;
    top: 0;
    width: 100%;
    transition: all 0.3s ease;
 }
 
 &.header-up {
   /* transform: translate(0,...

JavaScript

$( document ).ready(function() {
    var scroll_pos = 0;
		var scroll_time;

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

      if (current_scroll >= $("#header").outerHeight()) {
        if (current_scroll <= scroll_pos) {
          $("#header").removeClass("header-up");
        } else {
          $("#header").addClass("header-up");
        }
      }

      scroll_time = setTimeout(function() {
        scroll_pos = $(window).scrollTop();
      }, 100);
    });
});

    
    
    $("#navbar-toggle").on("click", function(t) {
      var e = $(this).data("scroll-y"),
        i = $(window).scrollTop(),
        n = $("#navbar-toggle"),
        o = $("#overlay-nav"),
        s = $("#header"),
        r = $("body");
      o.hasClass("toggle")
        ? (r.css("top", "0px").removeClass("noscroll"),
          window.scrollTo(0, e),
          o.removeClass("toggle"),
          n.removeClass("open"),
          s.removeClass("overlay-nav-toggled"),
          s.removeClass("pos-fixed"),
          s.removeClass("header-up"),
          setTimeout(function() {
            s.removeClass("suppress-scroll");
          }, 700))
        : ($(this).data("scroll-y", i),
          o.addClass("toggle"),
          n.addClass("open"),
          s.addClass("overlay-nav-toggled suppress-scroll"),
          r.css("top", -i + "px").addClass("noscroll"));
    });