We Keep Coding

How to use jquery to slide to a designated area when clicking on an item?

I have a project that needs to be clicked on ABOUT and SERVICE to move to the specified article area, js-box1 and js-box2,
but I don’t know which part of the logic is wrong, and it fails to achieve the effect of sliding to the target area. So I would like to ask everyone to help, thank you.
Supplement
I've just been out on his own research can slide to a specified location, but I want to slide blocks are below the black line at about 20px!
But now when I click SERVICE, it will be some distance away from the black line. I don't know how to rewrite the code to meet my needs?
$(document).ready(function(){
$('.item').click(function(e){
e.preventDefault();
let target = $(this).attr('href');
// console.log(target);
let position = $(target).offset().top - 300;
// console.log(target,position)
$('.content').animate({scrollTop: position}, 1000);
})
})
.wrap {
width: 500px;
background-color: #ffc20e;
border-radius: 20px;
padding: 20px;
margin: 60px auto;
}
.wrap .header {
display: flex;
border-bottom: 2px solid #222;
padding: 10px;
}
.wrap .header .item {
margin-right: 60px;
text-decoration: none;
font-weight: 600;
}
.wrap .content {
height: 500px;
overflow-y: scroll;
}
.wrap .content .box1, .wrap .content .box2 {
margin: 30px;
}
.wrap .content h2 {
display: inline-block;
font-weight: 900;
font-size: 36px;
background-color: #222;
color: #fff;
padding: 10px;
}
.wrap .content p {
font-size: 16px;
line-height: 1.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<ul class="header">
ABOUT
SERVICE
</ul>
<div class="content">
<section class="box1" id="js-box1">
<h2 class="about">about</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,</p>
</section>
<section class="box2" id="js-box2">
<h2 class="service">service</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla .
uptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla .</p>
</section>
</div>
</div>

Just add height: 490px; to .wrap .content .box2 class in css and you good to go!
$(document).ready(function(){
$('.item').click(function(e){
e.preventDefault();
let target = $(this).attr('href');
// console.log(target);
let position = $(target).offset().top +400;
// console.log(target,position)
$('.content').animate({scrollTop: position}, 1000);
});
})
.wrap {
width: 500px;
background-color: #ffc20e;
border-radius: 20px;
padding: 20px;
margin: 60px auto;
}
.wrap .header {
display: flex;
border-bottom: 2px solid #222;
padding: 10px;
}
.wrap .header .item {
margin-right: 60px;
text-decoration: none;
font-weight: 600;
}
.wrap .content {
height: 500px;
overflow-y: scroll;
}
.wrap .content .box1, .wrap .content .box2 {
margin: 30px;
height: 490px
}
.wrap .content h2 {
display: inline-block;
font-weight: 900;
font-size: 36px;
background-color: #222;
color: #fff;
padding: 10px;
}
.wrap .content p {
font-size: 16px;
line-height: 1.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<ul class="header">
ABOUT
SERVICE
</ul>
<div class="content">
<section class="box1" id="js-box1">
<h2 class="about">about</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,</p>
</section>
<section class="box2" id="js-box2">
<h2 class="service">service</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla .
uptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla .</p>
</section>
</div>
</div>

How fix the last p element goes below an element container with position fixed?

i have a problem.i want the last paragraph to be clear.in my code the last paragraph goes in below of div with position fixed and it's never shown.
div with class btn__container have position of fixed and bottom=0.so this element always stick to the bottom of the page.i want some how i can see the last element in my page.
this is my html & css
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: Roboto, sans-serif;
background-color: #eee;
direction: ltr;
}
main {
padding: 15px;
}
h1 {
text-align: center;
}
p {
margin-top: 20px;
text-align: justify;
}
.card__container {
display: flex;
}
.card {
background-color: deepskyblue;
color: #eee;
padding: 15px;
border-radius: 10px;
flex: 0 0 40%;
margin-top: 20px;
margin-left: 10px;
}
.card > p {
text-align: start;
}
.btn__container {
width: 100%;
position: fixed;
bottom: 0;
right: 0;
display: flex;
justify-content: space-around;
background-color: lightgrey;
padding: 10px 0;
}
button{
border: 0;
outline: none;
color: #eee;
background-color: deepskyblue;
padding: 10px 0;
flex: 0 0 30%;
border-radius: 10px;
}
<!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>
<main>
<h1>This is a test page</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda doloremque enim nulla perferendis praesentium
quos temporibus voluptas voluptatem? Error, illum.</p>
<div class="card__container">
<div class="card">
<h2>Card Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque error est porro, ratione recusandae
similique!</p>
</div>
<div class="card">
<h2>Card Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque error est porro, ratione recusandae
similique!</p>
</div>
<div class="card">
<h2>Card Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque error est porro, ratione recusandae
similique!</p>
</div>
<div class="card">
<h2>Card Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque error est porro, ratione recusandae
similique!</p>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda aut dignissimos doloremque esse impedit ipsam
itaque molestias obcaecati officia pariatur placeat praesentium quis rem rerum sit unde, vel vero?
Similique.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, expedita?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque eius enim impedit laboriosam officiis
possimus repellendus sed tempore, voluptates voluptatibus. Adipisci at ea possimus? Architecto autem,
consequatur culpa cumque earum eligendi illo in maxime, minus nam neque perferendis placeat quasi rerum
voluptas? Alias est facilis natus quis tempora totam ut!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi facere unde. Eaque est quidem
quisquam quos repellendus tempora ut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex hic ipsa laudantium omnis reiciendis repellendus
repudiandae sed sit! Ad animi maiores nulla tempora ullam voluptas?</p>
<div class="btn__container">
<button>Cancel</button>
<button>More</button>
</div>
</main>
</body>
</html>

u have to use padding bottom for how much fixed div height that much u have to mention for main tag it will work its simple code try below code i have used 70px u can give ur fixed div height
main{
padding-bottom:70px
}

Animate mobile navigation and background-color without lag on mobile devices

As can be seen in the running code; the navbar, on page scroll, is fixed at the top, changes its logo to a blue one and also has a white background.
On mobile, the menu should either slide down or appear smoothly without any lag on top of the content on mobile screens nicely.
I have been struggling to seamlessly animate the mobile menu slide-down and background-color smoothly without any lag on mobile devices. I have tried max-height to set the height of the navbar. Everything I have tried has resulted in lag on all mobile devices I have tested it with.
Honestly speaking, I have been unable to achieve that for two days. I have exhausted all methods and I am now frustrated. I don't know why it runs smoothly on desktops but heavily lags on mobile devices.
What can I do?
const logo = document.getElementById("pageLogo");
const pageBurgerIcon = document.getElementById("pageBurgerIcon");
const pageCloseMenu = document.getElementById("pageCloseMenu");
const pageMainNav = document.getElementById("pageMainNav");
const fixedNavbar = document.querySelector(".page__navigation");
document.addEventListener('scroll', () => {
if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
fixedNavbar.classList.add('scrolled');
pageBurgerIcon.classList.add("active");
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
} else {
fixedNavbar.classList.remove('scrolled');
pageBurgerIcon.classList.remove("active");
if (!pageMainNav.classList.contains("opened")) {
if (logo.classList.contains("logo-white")) {
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo_qtqmny.svg";
} else {
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
}
}
}
})
pageBurgerIcon.addEventListener("click", () => {
pageMainNav.classList.add("opened");
pageBurgerIcon.classList.remove("show");
pageCloseMenu.classList.add("show");
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
document.body.style.overflow = "hidden";
})
pageCloseMenu.addEventListener("click", () => {
pageMainNav.classList.remove("opened");
pageBurgerIcon.classList.add("show");
pageCloseMenu.classList.remove("show");
document.body.style.overflow = "";
if (logo.classList.contains("logo-white")) {
if(!fixedNavbar.classList.contains("scrolled")) {
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo_qtqmny.svg";
} else {
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
}
} else {
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
}
})
*,
*::before,
*::after {
margin: 0;
padding: 0;
}
html {
box-sizing: border-box;
font-size: 62.5%;
}
body {
box-sizing: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
font-family: sans-serif;
font-size: 1.8rem;
line-height: 2.5rem;
color: #12213c;
}
/* Page container to make it centered across all screens */
.container {
max-width: 1400px;
margin: 0 auto;
position: relative;
}
/* Header Styles */
.page__header {
position: relative;
background-color: #00aeef;
}
/* Navbar Container Styles */
.page__navigation {
position: fixed !important;
top: 0;
left: 0;
z-index: 10000 !important;
width: 100%;
transition: all 0.2s;
}
/* Navbar Styles*/
.page__nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1400px;
margin: 0 auto;
padding: 2rem 0 5rem 0;
}
/* Logo */
.page__logo {
padding-left: 6rem;
}
.page__logo-img {
width: 30px;
height: 30px;
}
/* Navbar menu list */
.page__menu {
padding-right: 6rem;
}
.page__menu-icon {
display: none;
fill: #fff;
}
.page__menu-icon.blue {
fill: #0066a1;
}
.page__menu a {
text-decoration: none;
cursor: pointer;
font-weight: bold;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.03em;
color: #0066a1;
}
.page__menu a.active {
color: #3ab449 !important;
}
.page__menu a:not(:first-of-type) {
padding-left: 4rem;
}
/* Navigation Container on scroll settings */
.page__navigation.scrolled {
height: 80px;
background: #fff !important;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.08);
}
/* On scroll styling for the navbar which is a direct child of the navigation container */
.page__navigation.scrolled > nav.page__nav {
padding-top: 2.5rem;
}
.page__navigation.scrolled > nav.page__nav .page__menu-icon {
padding-top: 5px;
}
.page__navigation.scrolled > nav.page__nav .page__menu a {
color: #0066a1;
}
.page__navigation.scrolled > nav.page__nav .page__menu a.active {
color: #3ab449;
}
/* Page content section */
.page__intro p {
margin-bottom: 20px;
}
/* Page content padding for space */
.page-top-padding {
padding: 20rem 6rem 11.5rem 6rem;
}
/* Media query for mobile devices with a screen of less than or equal to 600px */
#media only screen and (max-width: 600px) {
body {
font-size: 1.4rem;
line-height: 1.9rem;
}
/* Navbar Container */
.page__navigation {
position: relative;
display: block;
margin: 0 auto;
width: 100%;
overflow: hidden;
}
/* Navbar Styles */
.page__nav {
position: fixed !important;
padding: 0;
display: block;
top: 0;
left: 0;
height: 80px;
width: 100%;
overflow: hidden;
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
z-index: 10000;
}
/* Navbar when opened */
.page__nav.opened {
height: 80%;
background: white !important;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.05);
border-radius: 0 0 32px 32px;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
/* Navbar menu list/links styles */
.page__nav.opened .page__menu a {
pointer-events: auto;
opacity: 1;
}
/* Navbar logo */
.page__logo {
padding-left: 0;
position: relative;
width: 102.4px;
top: -2.5rem;
height: 32px;
margin: 0 auto;
}
/* Navbar menu */
.page__menu {
position: relative;
display: block;
padding: 70px 20px 20px 20px;
pointer-events: none;
}
.page__menu a {
pointer-events: none;
opacity: 0;
display: block;
position: relative;
font-size: 25px;
margin-bottom: 40px;
line-height: 130%;
text-align: center;
color: #12213c !important;
width: 100%;
padding-left: 0;
transition: all 0.3s;
}
.page__menu a:not(:first-of-type) {
padding-left: 0 !important;
}
.page__menu-icon {
padding-left: 16px;
padding-top: 25px;
width: 24px;
height: 20px;
}
.page__menu-icon.show {
display: inline-block;
}
.page__menu-icon.white {
fill: #fff;
}
.page__menu-icon.dark {
fill: #12213c;
}
.page__menu-icon.active {
fill: #00aeef !important;
}
/* Navbar content padding */
.page-top-padding {
padding: 10rem 2rem 11.5rem 2rem;
}
}
<!-- Page Container -->
<div class="container" id="container">
<!-- Page Header ? Top Section-->
<header class="page__header page__header-home">
<!-- Navbar Container -->
<div class="page__navigation">
<!-- Navbar Container -->
<nav class="page__nav" id="pageMainNav">
<svg width="24" height="20" viewBox="0 0 24 20" xmlns="http://www.w3.org/2000/svg" class="page__menu-icon show white" id="pageBurgerIcon">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H12V2.85715H0V0ZM24 8.5713V11.4285H0V8.5713H24ZM18 17.1429H0V20.0001H18V17.1429Z"/>
</svg>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="page__menu-icon" id="pageCloseMenu">
<path d="M11.9997 10L20 18.0003L18.0003 20L10 11.9997L1.99966 20L0 18.0003L8.00034 10L0 1.99966L1.99966 0L10 8.00034L18.0003 0L20 1.99966L11.9997 10Z" fill="#00AEEF"/>
</svg>
<div class="page__logo">
<a href="/">
<img src="https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo_qtqmny.svg" alt="page Logo" class="page__logo-img logo-white" id="pageLogo">
</a>
</div>
<div class="page__menu home">
Menu 1
Menu 2
Menu 3
Menu 4
</div>
</nav>
</div>
<!-- Intro/Top Section -->
<section class="page__intro page-top-padding">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
</section>
</header>
</div>

It looks like the padding and height you set on the .scroll classes are making it jolt.
From these sections:
/* Navigation Container on scroll settings */
.page__navigation.scrolled {
height: 80px;
background: #fff !important;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.08);
}
/* On scroll styling for the navbar which is a direct child of the navigation container */
.page__navigation.scrolled > nav.page__nav {
padding-top: 2.5rem;
}
.page__navigation.scrolled > nav.page__nav .page__menu-icon {
padding-top: 5px;
}
Is this how you want it?
const logo = document.getElementById("pageLogo");
const pageBurgerIcon = document.getElementById("pageBurgerIcon");
const pageCloseMenu = document.getElementById("pageCloseMenu");
const pageMainNav = document.getElementById("pageMainNav");
const fixedNavbar = document.querySelector(".page__navigation");
document.addEventListener('scroll', () => {
if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
fixedNavbar.classList.add('scrolled');
pageBurgerIcon.classList.add("active");
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
} else {
fixedNavbar.classList.remove('scrolled');
pageBurgerIcon.classList.remove("active");
if (!pageMainNav.classList.contains("opened")) {
if (logo.classList.contains("logo-white")) {
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo_qtqmny.svg";
} else {
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
}
}
}
})
pageBurgerIcon.addEventListener("click", () => {
pageMainNav.classList.add("opened");
pageBurgerIcon.classList.remove("show");
pageCloseMenu.classList.add("show");
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
document.body.style.overflow = "hidden";
})
pageCloseMenu.addEventListener("click", () => {
pageMainNav.classList.remove("opened");
pageBurgerIcon.classList.add("show");
pageCloseMenu.classList.remove("show");
document.body.style.overflow = "";
if (logo.classList.contains("logo-white")) {
if (!fixedNavbar.classList.contains("scrolled")) {
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo_qtqmny.svg";
} else {
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
}
} else {
logo.src = "https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo-other_apqmct.svg";
}
})
*,
*::before,
*::after {
margin: 0;
padding: 0;
}
html {
box-sizing: border-box;
font-size: 62.5%;
}
body {
box-sizing: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
font-family: sans-serif;
font-size: 1.8rem;
line-height: 2.5rem;
color: #12213c;
}
/* Page coontainer to make it centered across all screens */
.container {
max-width: 1400px;
margin: 0 auto;
position: relative;
}
/* Header Styles */
.page__header {
position: relative;
background-color: #00aeef;
}
/* Navbar Container Styles */
.page__navigation {
position: fixed !important;
top: 0;
left: 0;
z-index: 10000 !important;
width: 100%;
height: 80px;
transition: all 0.2s;
}
/* Navbar Styles*/
.page__nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1400px;
margin: 0 auto;
padding: 2rem 0 5rem 0;
}
/* Logo */
.page__logo {
padding-left: 6rem;
}
.page__logo-img {
width: 30px;
height: 30px;
}
/* Navbar menu list */
.page__menu {
padding-right: 6rem;
}
.page__menu-icon {
display: none;
fill: #fff;
}
.page__menu-icon.blue {
fill: #0066a1;
}
.page__menu a {
text-decoration: none;
cursor: pointer;
font-weight: bold;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.03em;
color: #0066a1;
}
.page__menu a.active {
color: #3ab449 !important;
}
.page__menu a:not(:first-of-type) {
padding-left: 4rem;
}
/* Naviagtion Container on scroll settings */
.page__navigation.scrolled {
background: #fff !important;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.08);
}
/* On scroll styling for the navbar which is a direct child of the navigation container */
.page__navigation.scrolled > nav.page__nav .page__menu a {
color: #0066a1;
}
.page__navigation.scrolled > nav.page__nav .page__menu a.active {
color: #3ab449;
}
/* Page content section */
.page__intro p {
margin-bottom: 20px;
}
/* Page content padding for space */
.page-top-padding {
padding: 20rem 6rem 11.5rem 6rem;
}
/* Media query for mobile devices with a screen of less than or equal to 600px */
#media only screen and (max-width: 600px) {
body {
font-size: 1.4rem;
line-height: 1.9rem;
}
/* Navbar Container */
.page__navigation {
position: relative;
display: block;
margin: 0 auto;
width: 100%;
overflow: hidden;
}
/* Navbar Styles */
.page__nav {
position: fixed !important;
padding: 0;
display: block;
top: 0;
left: 0;
height: 80px;
width: 100%;
overflow: hidden;
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
z-index: 10000;
}
/* Navbar when opened */
.page__nav.opened {
height: 80%;
background: white !important;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.05);
border-radius: 0 0 32px 32px;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
/* Navbar menu list/links styles */
.page__nav.opened .page__menu a {
pointer-events: auto;
opacity: 1;
}
/* Navbar logo */
.page__logo {
padding-left: 0;
position: relative;
width: 102.4px;
top: -2.5rem;
height: 32px;
margin: 0 auto;
}
/* Navbar menu */
.page__menu {
position: relative;
display: block;
padding: 70px 20px 20px 20px;
pointer-events: none;
}
.page__menu a {
pointer-events: none;
opacity: 0;
display: block;
position: relative;
font-size: 25px;
margin-bottom: 40px;
line-height: 130%;
text-align: center;
color: #12213c !important;
width: 100%;
padding-left: 0;
transition: all 0.3s;
}
.page__menu a:not(:first-of-type) {
padding-left: 0 !important;
}
.page__menu-icon {
padding-left: 16px;
padding-top: 25px;
width: 24px;
height: 20px;
}
.page__menu-icon.show {
display: inline-block;
}
.page__menu-icon.white {
fill: #fff;
}
.page__menu-icon.dark {
fill: #12213c;
}
.page__menu-icon.active {
fill: #00aeef !important;
}
/* Navbar content padding */
.page-top-padding {
padding: 10rem 2rem 11.5rem 2rem;
}
}
<!-- Page Container -->
<div class="container" id="container">
<!-- Page Header ? Top Section-->
<header class="page__header page__header-home">
<!-- Navbar Container -->
<div class="page__navigation">
<!-- Navbar Container -->
<nav class="page__nav" id="pageMainNav">
<svg width="24" height="20" viewBox="0 0 24 20" xmlns="http://www.w3.org/2000/svg" class="page__menu-icon show white" id="pageBurgerIcon">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H12V2.85715H0V0ZM24 8.5713V11.4285H0V8.5713H24ZM18 17.1429H0V20.0001H18V17.1429Z"/>
</svg>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="page__menu-icon" id="pageCloseMenu">
<path d="M11.9997 10L20 18.0003L18.0003 20L10 11.9997L1.99966 20L0 18.0003L8.00034 10L0 1.99966L1.99966 0L10 8.00034L18.0003 0L20 1.99966L11.9997 10Z" fill="#00AEEF"/>
</svg>
<div class="page__logo">
<a href="/">
<img src="https://res.cloudinary.com/iolamide/image/upload/v1600625296/logo_qtqmny.svg" alt="page Logo" class="page__logo-img logo-white" id="pageLogo">
</a>
</div>
<div class="page__menu home">
Menu 1
Menu 2
Menu 3
Menu 4
</div>
</nav>
</div>
<!-- Intro/Top Section -->
<section class="page__intro page-top-padding">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, porro quaerat repellat enim consequuntur architecto doloribus laborum culpa quam nulla.</p>
</section>
</header>
</div>

No scroll on hero until content is scrolled

I'm having difficulty creating this effect where the content in the hero is completely scrolled through (100% of the viewport) then the other sections of the page will show. I set it so the background is fixed. The stage div (which should be vertically centered) should come as you are scrolling with bottom padding separating and the second section should not show until fully scrolled. Not entirely sure what I am doing wrong. Code and codepen is below
http://codepen.io/anon/pen/xRPeJj
$(document).ready(function(){
var windowHeight = $(window).height();
$('#stage_1').css({"height": windowHeight + 'px'});
$('#stage_1').bind('scroll', function() {
if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight) {
$('.second-section').css("background-attachment", "scroll");
}
});
});
body, html {
height: 100%;
margin: 0;
}
.container {
padding: 0 1em;
margin: 0 auto;
width: 1000px;
}
.hero {
background-size: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
color: #fff;
background-image: url("http://www.jshiebert.com/wp-content/uploads/2015/12/photo-1424020128429-a60765861de1.jpg");
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
width: 100%;
height: 100vh;
flex-direction: column;
}
#stage_1 {
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hero">
<div class="container">
<div id="stage_1">
<div class="hero__text">
<h1>lorem to<span>the Rocks</span></h1>
<h2>Enter for your chance to explore the Rocky Mountains at River Stone Resort & lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam repudiandae nesciunt iusto eveniet! </h2>
</div>
</div>
<div id="stage_2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab fuga fugit, repellendus, reprehenderit itaque cum suscipit. Error magni, ipsum eligendi suscipit, rerum vero doloremque culpa, deleniti quae id repellat veniam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus recusandae vel sed at repudiandae ipsam, natus laborum. Sit vitae eos labore, explicabo, blanditiis debitis aut dolor, nesciunt nam ratione temporibus.
</div>
</div>
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio ab, neque autem sequi maxime architecto praesentium aspernatur veritatis corporis voluptas vitae, nemo at mollitia aperiam! Reprehenderit facere esse officiis voluptas. Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Neque molestias hic nihil provident repellat, ad quas doloremque placeat consequuntur voluptatem, repellendus suscipit voluptate aspernatur ea! Voluptatem, est ducimus? Aliquam, voluptates. lorem Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Deleniti consequatur modi excepturi fuga corrupti, tempora, odit accusamus vitae ex, reiciendis maxime porro ipsa quisquam repudiandae, veritatis asperiores fugit. Eveniet, ipsam!Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Dolore fuga, dignissimos aperiam velit officiis cum voluptate deleniti praesentium at et aliquam natus, consequuntur dolorem repellendus eos mollitia libero esse omnis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto
maxime, delectus, quis eaque ex quibusdam impedit voluptate, in totam corporis repellat ipsa molestias minima vitae laborum explicabo possimus tempore dolore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, facere iusto? Suscipit quisquam
excepturi facilis vel reprehenderit inventore perspiciatis autem dolore minima cumque. Dolores suscipit rem, accusantium perferendis vel deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora deserunt esse ab molestiae debitis aliquid
sunt assumenda laborum, laudantium, iste explicabo quae magni vel ipsum quas quos impedit sequi dicta!
</div>

Move class/style based on input range value

I wonder how I can highlight only the paragraph that at any moment correspondes to value retrieved from the input with a type of range.
When I move the slider I want to add a class to the paragraph which correspondes to the input value at that given time. I have achieved setting the class (I just used inline styling to test with), but how can I also at the same time remove the class from all the other paragraphs which don't correspond to the value?
This is what I got now:
<input id="part" type="range" min="1" max="6" value="6" step="1">
<p class="update-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In nobis nemo porro saepe facere minus!</p>
<p class="update-2">Lorem ipsum dolor sit amet.</p>
<p class="update-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem impedit neque odio, aut. Quos sapiente quisquam molestias, fugit iste aliquid, aperiam porro cumque quaerat pariatur obcaecati.</p>
<p class="update-4">Lorem ipsum dolor.</p>
<p class="update-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, eius dolorum consectetur.</p>
<p class="update-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, dolore nesciunt nisi porro odit explicabo debitis? Iure qui, impedit fugiat officia itaque dolores. Laudantium.</p>
JS / jQuery:
var p = document.getElementById('part');
p.addEventListener('input', function () {
$('p.update-' + p.value).css('color', 'red');
}, false )

On the following example, when the range input moves, all <p> elements are changed to the .transparent class, then the selected one receives the new .selected class.
function highlight(){
var x = document.getElementsByTagName("p");
var i;
for (i = 0; i < x.length; i++) {
x[i].className = "transparent";
}
var sell = document.getElementById("parag").value;
document.getElementById("a" + sell).className = "selected";
}
body {
background: #f7f7f7;
}
.selected {
color: #000000;
background: rgba(215, 255, 0, 0.8);
}
.transparent {
color: #666666;
background: transparent;
}
<input id=parag type="range" name="range" min="1" max="6" step="1" oninput="highlight()">
<p id=a1 class="transparent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In nobis nemo porro saepe facere minus!</p>
<p id=a2 class="transparent">Lorem ipsum dolor sit amet.</p>
<p id=a3 class="transparent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem impedit neque odio, aut. Quos sapiente quisquam molestias, fugit iste aliquid, aperiam porro cumque quaerat pariatur obcaecati.</p>
<p id=a4 class="transparent">Lorem ipsum dolor.</p>
<p id=a5 class="transparent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, eius dolorum consectetur.</p>
<p id=a6 class="transparent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, dolore nesciunt nisi porro odit explicabo debitis? Iure qui, impedit fugiat officia itaque dolores. Laudantium.</p>

An alternative solution only using javascript and reducing the number of operations is:
// save the previous selected paragraph
var oldSelectedParagraph = null;
window.onload= function(e) {
document.getElementById('part').addEventListener('change', function () {
// if the previous selected paragraph exists remove the attribute
if (oldSelectedParagraph != null) {
oldSelectedParagraph[0].style.color = '';
}
//save current selected paragraph if valid and set the attribute
oldSelectedParagraph = document.querySelectorAll('p.update-' + this.value);
if (oldSelectedParagraph.length == 1) {
oldSelectedParagraph[0].style.color = 'red';
} else {
oldSelectedParagraph = null;
}
}, false )
}
<input id="part" type="range" min="1" max="6" value="6" step="1">
<p class="update-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In nobis nemo porro saepe facere minus!</p>
<p class="update-2">Lorem ipsum dolor sit amet.</p>
<p class="update-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem impedit neque odio, aut. Quos sapiente quisquam molestias, fugit iste aliquid, aperiam porro cumque quaerat pariatur obcaecati.</p>
<p class="update-4">Lorem ipsum dolor.</p>
<p class="update-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, eius dolorum consectetur.</p>
<p class="update-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, dolore nesciunt nisi porro odit explicabo debitis? Iure qui, imped</p>