jQuery addClass example

Change class name on click in jQuery

by Noir Noir

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Множество фонов | WordSmall.ru</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="style/style.css">
    <link rel="stylesheet" href="style/media.css">

<link href="bootstrap/css/bootstrap-grid.css" rel="stylesheet">
</head>
<body>
  
    <div class="header">
     
        
      
      <div class="nav-container">
        <div class="nav">
      <ul class="nav__list">
            <li class="nav__item"><a class="nav__link" href="#main">About</a></li>
            <li class="nav__item"><a class="nav__link" href="#p">Portfolio</a></li>
            <li class="nav__item"><a class="nav__link" href="#portfolio">Advantages</a></li>
            <li class="nav__item"><a class="nav__link" href="#main">Feedback</a></li>
            <li class="nav__item"><a class="nav__link" href="#main">Contact</a></li>
            
          </ul>
          <div class="clear"></div>
        </div>
    </div>
    <div class="container">
   
        
        <div class="col-sm-8 col-8 col-md-6 col-lg-4 col-xl-4 hr"><h1>Fresh Life</h1>
          <a>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</a>
          </div>
        </div>

</div>
  
    </div>

    


    
     
        
      
      <div class="navq-container">
        <div class="navq">
    
          <a href="#" class="burger" id="burger-button">
        <span class="burger__icon"></span>
      </a>
      <ul class="navq__list">
        <li class="navq__item"><a class="navq__link" href="#main">About</a></li>
     
        <li class="navq__item"><a class="navq__link" href="#portfolio">Portfolio</a></li>
        
       ...

CSS

.ab{




}

.header{

  background: 
  url("../images/klub.png") no-repeat fixed ; 

 
  background-size: cover;
  



border-style: solid;
border-color: #e7e725;
border-width: 1px;

/* Style for "img" */









}


.hr{

margin: 100px 50px 60px;
border-style: solid;
border-color: #f11010;
border-width: 1px;
padding: 100px;

}



.about{

  background-color: #00c4c4; 
  
 
  background-size: cover;
 




/* Style for "img" */

}


.our_services{

  background-color: #c4a700; 
  
 
  background-size: cover;
 




/* Style for "img" */

}






.logo{



  
}





  .css-adaptive {
    display: block;
    max-width: 100%;
    height: auto;
    }




img {
    margin-top: 13px;
    margin-bottom: 10px;
   
  }



  a, a:hover {
    text-decoration: none!important;
    text-transform: uppercase;
	font-weight: 900;
  
	display: block;
	font-weight: bold;
	
	
}
a {
	color: #000000;
  text-decoration: none!important;
  font-size: 16px;
}


ul {
	margin: 0;
    padding: 0;
    list-style: none;
}
button {
	display: block;
	
}


.nav { 
  
  height: 62px;
  


}
	.nav ul { list-style: none; }
	.nav ul li{float: left; margin-top: 40px; padding: 6px;}
	.nav ul li:first-child{ padding-left: 0;}
	
	.nav ul li a:hover{ text-decoration: underline;}

  
  @-webkit-keyframes show-header {
    0% {
        top: -4em;
        opacity: 0;
    }
    100% {
        top: 0;
        opacity: 1;
    }
}

@keyframes show-header {
    0% {
        top: -4em;
        opacity: 0;
    }
    100% {
        top: 0;
        opacity: 1;
    }
}

.nav__list {
	width: 100%;
	display: flex;
	justify-content: center;
	align-content: center;
	
  text-align: center;
  
 
}

.nav__item {
	margin: 0 10px;

	
}
.nav__link {
	margin-top:  10px;
	position: relative;

}

.nav__link:hover{

  color: #79b2c9;


}

.burger__icon {
  position: relative;
  display: block;
  height: 2px;
  width: 35px;
	
  background: #222;
  transition: all .2s ease-in-out;
  top:...

JavaScript

jQuery(document).ready(function($) {
    $('.burger').click(function() {
        $(this).toggleClass('burger--active');
        $(this).siblings('.navq__list').toggleClass('navq__list--open');
        return false;
    });

    $(document).mouseup(function(e) {
        var $target = $(e.target);
        if ($target.closest(".navq__list").length == 0 && $target.closest(".burger").length == 0) {
            $(".navq__list").removeClass("navq__list--open");
            $(".burger").removeClass("burger--active");
        }
    });



    var nav = $('.nav-container');
    var navq = $('.navq-container');

    $(window).scroll(function() {
        if (widthWind > 968 && $(this).scrollTop() >= 1) {
            nav.addClass("f-nav");
            $(".nav ul li").css("margin-top", "6px");

        } else if (widthWind > 968 && $(this).scrollTop() <= 1) {
            nav.removeClass("f-nav");
            $(".nav ul li").css("margin-top", "40px");
        } else if ($(this).scrollTop() >= 1) {
            $(".burger").css("top", "0px");
            navq.addClass("f-nav");
            $(".burger").css("right", "4px");

        } else if ($(this).scrollTop() <= 1) {
            $(".burger").css("top", "24px");
            $(".burger").css("right", "24px");
            navq.removeClass("f-nav");
        }

    });
    $(".navq__list").on("click", "a", function(event) {
        event.preventDefault();
        var id = $(this).attr('href'),
            top = $(id).offset().top;
        $('body,html').animate({
            scrollTop: top
        }, 1500);
        $(".navq__list").removeClass("navq__list--open");
        $(".burger").removeClass("burger--active");
    });


    var widthWind = $(this).width();
    /* $(window).resize(function() {
        window.setTimeout('location.reload()', 5);
    }); */


});