jQuery addClass example

Change class name on click in jQuery

by Burduja Serghei

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
<div class="container">
    <button class="btn">up</button>
    <ul class="menu">
        <li><a class="active" href="#first">First</a></li>
        <li><a href="#second">Second</a></li>
        <li><a href="#third">Third</a></li>
        <li><a href="#fourth">Fourth</a></li>
    </ul>

    <section class="first" id="first">
        <h2>First</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci at atque fuga hic iure magni odio quidem
            sit. Ad aliquid autem blanditiis consectetur cupiditate dolorum eaque est necessitatibus nesciunt, nostrum
            quaerat quam quidem quisquam quo recusandae repellat soluta! Ad adipisci aliquid blanditiis consequatur ea
            excepturi explicabo, fugiat, iste laboriosam nobis repellat sapiente sint ut! Adipisci consequatur iste
            laborum placeat rem. A ab atque deserunt esse exercitationem itaque laudantium officiis placeat
            reprehenderit voluptas. Ad asperiores commodi consectetur cum debitis enim excepturi exercitationem iure
            labore laboriosam minima nemo nobis obcaecati, quibusdam quidem ut vel vitae voluptas voluptatem voluptates.
            Ab alias aperiam atque consequuntur earum eveniet facilis fugiat nulla officia porro provident quae qui quis
            ratione rerum, tenetur vitae. Ad cum illum, impedit in labore laborum magnam maiores necessitatibus possimus
            ullam. Accusantium animi aperiam aspernatur consequuntur corporis cumque, delectus deserunt dignissimos
            dolore dolores eaque earum enim error explicabo illo labore magni molestias natus nemo nihil nisi non...

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  position: relative;
  margin: 0 auto;
  width: 900px;
}

body {
  background: #aaa;
}

.menu {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: #888;
}
.menu.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 900px;
}

.menu:hover {
  cursor: pointer;
}

.menu a {
  position: relative;
  display: block;
  margin: 0 10px;
  padding: 10px 0;
  font-size: 20px;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
}
.menu a::after {
  transition: all 0.9s;
}

.menu a.active::after,
.menu a:hover::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 8px;
  width: 100%;
  height: 2px;
  background: red;
}

section {
  padding: 30px;
  background: #fff;
}

.btn {
  position: fixed;
  bottom: 10%;
  right: 15%;
  width: 60px;
  height: 60px;
  text-transform: uppercase;
  font-size: 20px;
  color: #fff;
  background: #000;
  border-radius: 50%;
  border: 1px solid #ccc;
  transition: all 0.4s;
}
.btn:hover {
  color: #000;
  background: #fff;
  cursor: pointer;
}

/*# sourceMappingURL=style.css.map */

JavaScript

jQuery(document).ready(function($) {
    let menuScroll = function () {
        $('.btn').on('click', function () {
            $('body,html').animate({scrollTop: 0}, 800);
        });

        $(".menu").on("click","a", function (event) {
            event.preventDefault();

            let id = $(this).attr('href'),

                top = $(id).offset().top -  80 + 'px';

            $('body,html').animate({scrollTop: top}, 300);
        });
    };

    let fixedMenu = function(){
        let menu = $('.menu');
        let menuHeight = menu.innerHeight();
        $(window).on('scroll', function () {
            if($(window).scrollTop() > menuHeight){
               menu.addClass('fixed');
            } else {
                menu.removeClass('fixed');
            }

          });
    };

    let liveMenu = function(){
       $(window).on('scroll', function () {
           //выборка секций
           let $sections = $('section');
           //обработчик для каждой секции
           $sections.each(function(i,el){
               //расстоянии от начала документа до секции
               let top = $(el).offset().top-100;
               //расстоянии от начала документа до нижней границы секции
               let bottom = top +$(el).height();
               //расстояние при скроллинге
               let scroll = $(window).scrollTop();
               //получаем id секции
               let id = $(el).attr('id');
               //проверка расстояния при скроллинге
               if( scroll > top && scroll < bottom){
                   $('.menu a').removeClass('active');
                   $('.menu a[href="#'+id+'"]').addClass('active');
               }
           });

       });

    };

    menuScroll();
    fixedMenu();
    liveMenu();

});