jQuery addClass example

Change class name on click in jQuery

by Burduja Serghei

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis maxime earum quis, aperiam nisi molestias nobis libero, ipsam dignissimos eius ex praesentium laboriosam velit aspernatur labore nam nulla est fugiat. Facilis, ex sapiente iusto doloribus consequuntur temporibus repellat, beatae quis, tempore provident ducimus quod hic cumque nisi optio facere odio reiciendis enim. Nisi, facere ea aut illo iusto velit rem nulla id voluptatibus nemo ducimus reiciendis eligendi molestias tempora libero similique pariatur porro, mollitia natus perferendis quam explicabo suscipit beatae maiores. Repudiandae temporibus quos laudantium eos tenetur! Ad asperiores iusto voluptate saepe, aspernatur consectetur expedita non quae voluptatum autem velit laboriosam incidunt soluta, quo. Dolorem alias omnis sint voluptate aut minima incidunt dolorum neque, impedit! Voluptatem quia dolores perferendis aperiam, fugiat, adipisci iste inventore. Alias accusamus, voluptates. Voluptatibus explicabo cupiditate ex deleniti, autem libero repudiandae optio in voluptas a velit exercitationem tenetur iste saepe nostrum, dicta necessitatibus dignissimos omnis temporibus doloremque ut quia magni. Incidunt beatae magni unde praesentium, dolorum deserunt ipsa distinctio deleniti, dicta repellat dolores enim ad reprehenderit similique rerum consequuntur! Nobis facere ex tempore, necessitatibus doloremque repudiandae aspernatur. Officiis nam ut, tempore eum, nihil incidunt modi! Magnam similique cum maxime culpa laborum totam cupiditate mollitia suscipit pariatur hic nostrum doloremque labore, quae aspernatur reprehenderit deserunt nobis. Iusto cum voluptates maxime minima sapiente ratione alias id repellat modi obcaecati, ullam quis eius dignissimos porro excepturi, doloribus molestias consequuntur rem deleniti...

CSS

.container {
	margin: 0 auto;
	width: 800px;
}
.box {
	position: fixed;
	top: 40%;
	left: 40%;
	width: 100px;
	height: 100px;
	background: green;
}

JavaScript

jQuery(document).ready(function($) {
    let documentHeight = $(document).innerHeight();
    let box = $('.box');

    let changeBoxColor = function(){
        $(document).on('scroll', function () {
            console.log($(document).scrollTop());
            if($(document).scrollTop() > documentHeight / 2){
                box.css('background', 'red');
            }else{
                box.css('background', 'green');
            }
        });
    };

    changeBoxColor();

});