Add class to element when scrolling 100px above it - javascript

I am trying to add a class to each element (class abc) when it reaches 100px below the top of the viewport. However I cannot get the class added to each individual element. Rather it is adding the class to all divs. Any suggestions?
$(function() {
$(document).scroll(function() {
if ($(this).scrollTop() >= $('.abc').offset().top - 100) {
$(".abc").addClass("color");
} else {
$(".abc").removeClass("color");
}
});
});
#header {
height: 150px;
}
.abc {
background-color: orange;
}
.color {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
<h1>Header</h1>
</div>
<div class="abc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>
<div class="abc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>
<div class="abc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>
<div class="abc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>
<div class="abc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>


Your logic is correct for checking a single element, however to achieve this for a collection you need to loop over every element and evaluate their position individually. Something like this:
$(function() {
$(document).scroll(function() {
var scrollTop = $(this).scrollTop();
$('.abc').each(function() {
$(this).toggleClass('color', scrollTop >= $(this).offset().top - 100);
});
});
});
#header { height: 150px; }
.abc { background-color: orange; }
.color { background-color: blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
<h1>Header</h1>
</div>
<div class="abc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>
<div class="abc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>
<div class="abc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>
<div class="abc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>
<div class="abc">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque semper aliquam neque, id condimentum orci egestas ac. Maecenas ullamcorper semper finibus. Quisque vitae semper lorem, ut mattis mi. Maecenas ut porta enim. Duis tellus sem, tincidunt
vitae turpis tristique, laoreet sodales nunc. Donec laoreet sollicitudin nibh, a porta risus elementum id. Vivamus et quam nec enim tincidunt tempus in sed ipsum. Quisque non arcu sem. Nulla eget massa ultricies, dignissim erat vel, tristique turpis.
Pellentesque non maximus est, in feugiat nibh. Morbi enim elit, sodales ac leo eget, interdum imperdiet elit. Nunc dapibus scelerisque aliquet.
</div>


Lets try something like this.
$('.abc').each(function(){ //For each .abc
if($(window).scrollTop() >= $(this).offset().top - 100) { //see if is in offset
$('.abc').removeClass("color"); //remove all colors
$(this).addClass("color"); //set the offset .abc with color
}
})
Let me know if works... see this example. https://jsfiddle.net/056vzoa2/5/
Regards!

Related

Select an option in javascript and search for the paragraph

I want to make a simple html site which have some paragraphs and a drop-down list. When the site is loaded I want all the paragraphs to be inserted in the drop-down list (the first 50 characters for each option). When I choose an option, I want the paragraph of the chosen option to be bold and the page to scroll there. So far, I only did this. Please help! I want only in javascript.
<script language="javascript">
function add()
{
var x = document.getElementById("myselect");
var pars = document.getElementsByTagName("P");
for (i=0; i<pars.length; i++)
{
pars[i].setAttribute("class", "all_pars");
pars[i].setAttribute("value", "all_pars" + i);
var y = document.getElementsByClassName("all_pars")[i].innerHTML;
var option = document.createElement("option");
option.text = y;
x.add(option);
}
}
function dothis()
{
//var w = document.getElementById("myselect").selectedIndex;
//w.scrollIntoView();
var x = document.getElementById("myselect");
var y = document.getElementById("myselect").options;
}
</script>
<!DOCTYPE html>
<html lang="el">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Εργαστήριο 10 άσκηση 3</title>
</head>
<body onload="add()">
<p>I am </p>
<p>I am a dog</p>
<p>I am a cat</p>
<p>I am a bird</p>
<p>I am </p>
<p>I am a dog</p>
<p>I am a cat</p>
<p>I am a bird</p>
<p>I am </p>
<p>I am a dog</p>
<p>I am a cat</p>
<p>I am a bird</p>
<select id="myselect" onchange="dothis()">
<option>1</option>
<option>2</option>
</select>
</body>

First, you want to find the good paragraph from your select. So you should find a way to link the paragraph to its select option.
for (i=0; i<pars.length; i++)
{
pars[i].setAttribute("class", "all_pars");
pars[i].setAttribute("id", "all_pars" + i);
var y = document.getElementsByClassName("all_pars")[i].innerHTML;
var option = document.createElement("option");
option.text = y.substring(0,50) + "..."; // Cutting the text in select to the first 50 characters
option.value = "all_pars" + i
x.add(option);
}
Here we go. We are now, rather than a value, choosing a id for each paragraph, and adding that id as a value to the linked select option. We are also cutting the paragraph down to 50 characters.
With this, it's easy to find the paragraph and change its style.
function dothis()
{
// Value indicating which paragraph should be chosen.
var y = document.getElementById("myselect").value;
var pars = document.getElementsByTagName("P");
for (i=0; i<pars.length; i++)
{
// Putting all paragraph to not-bold
pars[i].setAttribute("style", "font-weight: normal;");
}
document.getElementById(y).setAttribute("style", "font-weight: bold;"); // Putting our paragraph to bold
}
Now we have our text in bold when we select it. We just have to add anchor to each paragraph and change the location to the anchor when we select the paragraph. Here is the final code, with lorem ipsum as paragraphs.
function add()
{
var x = document.getElementById("myselect");
var pars = document.getElementsByTagName("P");
for (i=0; i<pars.length; i++)
{
pars[i].setAttribute("class", "all_pars");
pars[i].setAttribute("id", "all_pars" + i);
var y = document.getElementsByClassName("all_pars")[i].innerHTML;
var option = document.createElement("option");
option.text = y.substring(0,50) + "..."; // Cutting the text in select to the first 50 characters
option.value = "all_pars" + i
x.add(option);
// Add anchor to the paragraph
var newLink = document.createElement('a');
newLink.name = "all_pars" + i;
pars[i].appendChild(newLink);
}
pars[0].setAttribute("style", "font-weight: bold;");
}
function dothis()
{
var x = document.getElementById("myselect");
var y = document.getElementById("myselect").value; // Value indicating which paragraph should be chosen.
var pars = document.getElementsByTagName("P");
for (i=0; i<pars.length; i++)
{
pars[i].setAttribute("style", "font-weight: normal;"); // Putting all paragraph to not-bold
}
document.getElementById(y).setAttribute("style", "font-weight: bold;"); // Putting our paragraph to bold
window.location = '#' + y; // Jump to anchor
}
<!DOCTYPE html>
<html lang="el">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Εργαστήριο 10 άσκηση 3</title>
</head>
<body onload="add()">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tortor orci, euismod a ante et, iaculis malesuada nulla. Praesent pellentesque hendrerit urna, a posuere magna facilisis eu. Vestibulum iaculis fringilla orci, vel rutrum felis mollis eu. Proin pretium et nunc eget ullamcorper. Praesent vel nisi eleifend, facilisis sapien nec, malesuada diam. Phasellus nibh justo, auctor et suscipit eget, aliquam sed lacus. Etiam odio libero, convallis vitae ultricies ac, interdum ut dolor. Etiam ullamcorper orci a sem feugiat porttitor. Proin sit amet pellentesque velit, non molestie nisi. Morbi at pellentesque urna, eu ultrices sapien. Nulla bibendum, dui sit amet finibus mollis, ipsum lacus dictum elit, id luctus turpis ligula ut nisi.</p>
<p>Integer quis scelerisque turpis. Nam ornare erat sed nisi consequat tincidunt. Donec consectetur turpis dui. Quisque vel mi eget dolor volutpat scelerisque. Etiam sagittis justo tincidunt, posuere erat et, bibendum eros. Proin mattis lobortis purus in rutrum. Phasellus imperdiet ante nibh, ut maximus lacus facilisis et. Morbi non pretium est. Fusce a turpis auctor, cursus lectus at, hendrerit erat. Praesent sit amet lacus id risus ornare pharetra at at odio. Aliquam a vehicula orci.</p>
<p>Cras imperdiet orci quis est scelerisque, ac bibendum dui dapibus. Etiam ullamcorper elit vitae felis blandit mollis. Morbi est libero, feugiat at justo vitae, interdum interdum erat. Donec tincidunt nibh a sagittis imperdiet. Fusce in libero nec libero iaculis aliquet eget sit amet ante. Nulla velit diam, congue vitae malesuada quis, posuere eget leo. Pellentesque quis interdum turpis. Curabitur ut risus bibendum, finibus nibh ut, ultrices metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at egestas ipsum, et lobortis quam. Etiam mattis arcu mollis porta molestie. Vestibulum sollicitudin ipsum mauris, ut efficitur elit bibendum in.</p>
<p>Integer sed vehicula est, vitae venenatis felis. Suspendisse nisl risus, convallis sit amet varius non, elementum eu dolor. Pellentesque sem erat, venenatis a justo id, dictum dapibus nisl. In accumsan dapibus elementum. Nunc viverra, nisl in rhoncus aliquam, turpis ligula aliquet mauris, at imperdiet quam diam at metus. Etiam et erat elit. Phasellus in tortor eu erat pulvinar facilisis.</p>
<p>Integer finibus, diam eget volutpat maximus, erat nunc suscipit nisi, et scelerisque augue ligula ultrices quam. Nulla eget ipsum tristique, bibendum mauris ac, sollicitudin quam. Quisque lacinia, sapien quis faucibus tincidunt, mi orci volutpat lorem, sed commodo quam sapien vehicula lectus. Aliquam pharetra felis ut arcu auctor, vitae rhoncus felis placerat. Pellentesque finibus sem vitae imperdiet pharetra. Quisque pulvinar viverra mauris sed accumsan. Mauris feugiat, eros vitae facilisis lobortis, ipsum neque gravida massa, at dictum mauris odio non odio. Integer nec leo urna. Pellentesque tempus lacus at elementum tincidunt. Sed cursus velit eros, nec placerat ante convallis at. Nullam sed dictum ex, a pretium lacus. Integer vitae pellentesque augue, vel efficitur tortor. Vivamus sit amet vestibulum nulla, eget porta ante. Integer sed nulla id eros pharetra dignissim. Sed orci massa, facilisis ac porttitor id, fermentum eu augue.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tortor orci, euismod a ante et, iaculis malesuada nulla. Praesent pellentesque hendrerit urna, a posuere magna facilisis eu. Vestibulum iaculis fringilla orci, vel rutrum felis mollis eu. Proin pretium et nunc eget ullamcorper. Praesent vel nisi eleifend, facilisis sapien nec, malesuada diam. Phasellus nibh justo, auctor et suscipit eget, aliquam sed lacus. Etiam odio libero, convallis vitae ultricies ac, interdum ut dolor. Etiam ullamcorper orci a sem feugiat porttitor. Proin sit amet pellentesque velit, non molestie nisi. Morbi at pellentesque urna, eu ultrices sapien. Nulla bibendum, dui sit amet finibus mollis, ipsum lacus dictum elit, id luctus turpis ligula ut nisi.</p>
<p>Integer quis scelerisque turpis. Nam ornare erat sed nisi consequat tincidunt. Donec consectetur turpis dui. Quisque vel mi eget dolor volutpat scelerisque. Etiam sagittis justo tincidunt, posuere erat et, bibendum eros. Proin mattis lobortis purus in rutrum. Phasellus imperdiet ante nibh, ut maximus lacus facilisis et. Morbi non pretium est. Fusce a turpis auctor, cursus lectus at, hendrerit erat. Praesent sit amet lacus id risus ornare pharetra at at odio. Aliquam a vehicula orci.</p>
<p>Cras imperdiet orci quis est scelerisque, ac bibendum dui dapibus. Etiam ullamcorper elit vitae felis blandit mollis. Morbi est libero, feugiat at justo vitae, interdum interdum erat. Donec tincidunt nibh a sagittis imperdiet. Fusce in libero nec libero iaculis aliquet eget sit amet ante. Nulla velit diam, congue vitae malesuada quis, posuere eget leo. Pellentesque quis interdum turpis. Curabitur ut risus bibendum, finibus nibh ut, ultrices metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at egestas ipsum, et lobortis quam. Etiam mattis arcu mollis porta molestie. Vestibulum sollicitudin ipsum mauris, ut efficitur elit bibendum in.</p>
<p>Integer sed vehicula est, vitae venenatis felis. Suspendisse nisl risus, convallis sit amet varius non, elementum eu dolor. Pellentesque sem erat, venenatis a justo id, dictum dapibus nisl. In accumsan dapibus elementum. Nunc viverra, nisl in rhoncus aliquam, turpis ligula aliquet mauris, at imperdiet quam diam at metus. Etiam et erat elit. Phasellus in tortor eu erat pulvinar facilisis.</p>
<p>Duis viverra sollicitudin euismod. Maecenas rhoncus neque vel purus aliquam pellentesque. Praesent quis lobortis tellus. Ut sit amet tempor magna. Aliquam accumsan magna vel efficitur rutrum. Aliquam a leo quam. Quisque urna sem, finibus cursus vehicula sit amet, facilisis vitae metus. Proin commodo lorem in maximus posuere. Mauris vel eros cursus, blandit sapien et, ultrices lorem. Donec ultricies nisi at neque congue, eu dictum ipsum volutpat. Donec lacinia lacinia interdum. Nam at posuere neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum commodo eleifend. Nullam ut sem magna.</p>
<p>Cras interdum maximus rhoncus. Donec erat metus, vestibulum vitae rhoncus nec, egestas at nunc. Sed porta at nulla sed eleifend. Aliquam accumsan eros justo, at ornare dui aliquet eget. Phasellus posuere sapien eu nunc venenatis, molestie scelerisque lorem vestibulum. Proin eu porta augue, at tempus arcu. In vitae porta leo. Ut scelerisque turpis nec massa euismod, quis lobortis diam tempus. Proin elementum sed mauris in elementum. Proin convallis nulla lectus, nec pellentesque purus consectetur sit amet. Sed gravida condimentum nibh ac interdum.</p>
<p>Donec ut ligula at magna vehicula blandit vitae a justo. Aenean urna neque, egestas vitae velit ac, auctor gravida urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed pulvinar ac erat a faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur sagittis lacinia. Donec feugiat lacus eu est semper bibendum. Suspendisse nec ultrices neque, eu suscipit est. Curabitur semper est vitae arcu consequat suscipit. In hac habitasse platea dictumst. Vivamus pulvinar libero at arcu volutpat commodo at non sapien. Cras commodo erat sit amet blandit venenatis. Etiam tincidunt massa sit amet magna porttitor, aliquam egestas purus mollis. Aenean efficitur ante vitae augue gravida molestie.</p>
<p>Etiam tincidunt ipsum sit amet posuere tristique. Donec molestie sapien orci. Ut accumsan consequat nisi, eget mattis eros. Duis venenatis nunc id ipsum ultricies, cursus tincidunt sapien dignissim. Maecenas mattis eros nibh. Pellentesque in lorem turpis. Phasellus euismod, mi sit amet posuere tincidunt, mi turpis varius lectus, id molestie quam mi ut est. Duis vel dui bibendum, pellentesque lacus at, molestie felis. Nulla facilisi. Nunc augue dui, tempor non turpis in, accumsan cursus felis. Suspendisse nisl orci, consectetur id augue in, fermentum finibus erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum metus felis, tristique ut orci vel, posuere tincidunt tellus. Sed lacus augue, luctus a libero vel, molestie sollicitudin purus. Nam euismod tortor id venenatis ullamcorper.</p>
<p>Maecenas mattis sem id mauris commodo aliquam. Maecenas volutpat lectus dui, a vestibulum leo vehicula nec. Ut ac leo id odio bibendum imperdiet ut in lectus. Praesent nec felis at nibh maximus ullamcorper sed a turpis. Curabitur congue tincidunt bibendum. Fusce vulputate lorem eu massa aliquam vehicula. Suspendisse elementum justo ut venenatis tempor. Aliquam vel urna nec risus lacinia convallis consequat ut elit. Phasellus vel fringilla est. Vivamus a viverra tellus. Etiam gravida tempus turpis, eu finibus orci mollis at. Cras sit amet neque eu orci commodo ultrices.</p>
<p>Integer finibus, diam eget volutpat maximus, erat nunc suscipit nisi, et scelerisque augue ligula ultrices quam. Nulla eget ipsum tristique, bibendum mauris ac, sollicitudin quam. Quisque lacinia, sapien quis faucibus tincidunt, mi orci volutpat lorem, sed commodo quam sapien vehicula lectus. Aliquam pharetra felis ut arcu auctor, vitae rhoncus felis placerat. Pellentesque finibus sem vitae imperdiet pharetra. Quisque pulvinar viverra mauris sed accumsan. Mauris feugiat, eros vitae facilisis lobortis, ipsum neque gravida massa, at dictum mauris odio non odio. Integer nec leo urna. Pellentesque tempus lacus at elementum tincidunt. Sed cursus velit eros, nec placerat ante convallis at. Nullam sed dictum ex, a pretium lacus. Integer vitae pellentesque augue, vel efficitur tortor. Vivamus sit amet vestibulum nulla, eget porta ante. Integer sed nulla id eros pharetra dignissim. Sed orci massa, facilisis ac porttitor id, fermentum eu augue.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tortor orci, euismod a ante et, iaculis malesuada nulla. Praesent pellentesque hendrerit urna, a posuere magna facilisis eu. Vestibulum iaculis fringilla orci, vel rutrum felis mollis eu. Proin pretium et nunc eget ullamcorper. Praesent vel nisi eleifend, facilisis sapien nec, malesuada diam. Phasellus nibh justo, auctor et suscipit eget, aliquam sed lacus. Etiam odio libero, convallis vitae ultricies ac, interdum ut dolor. Etiam ullamcorper orci a sem feugiat porttitor. Proin sit amet pellentesque velit, non molestie nisi. Morbi at pellentesque urna, eu ultrices sapien. Nulla bibendum, dui sit amet finibus mollis, ipsum lacus dictum elit, id luctus turpis ligula ut nisi.</p>
<p>Integer quis scelerisque turpis. Nam ornare erat sed nisi consequat tincidunt. Donec consectetur turpis dui. Quisque vel mi eget dolor volutpat scelerisque. Etiam sagittis justo tincidunt, posuere erat et, bibendum eros. Proin mattis lobortis purus in rutrum. Phasellus imperdiet ante nibh, ut maximus lacus facilisis et. Morbi non pretium est. Fusce a turpis auctor, cursus lectus at, hendrerit erat. Praesent sit amet lacus id risus ornare pharetra at at odio. Aliquam a vehicula orci.</p>
<p>Cras imperdiet orci quis est scelerisque, ac bibendum dui dapibus. Etiam ullamcorper elit vitae felis blandit mollis. Morbi est libero, feugiat at justo vitae, interdum interdum erat. Donec tincidunt nibh a sagittis imperdiet. Fusce in libero nec libero iaculis aliquet eget sit amet ante. Nulla velit diam, congue vitae malesuada quis, posuere eget leo. Pellentesque quis interdum turpis. Curabitur ut risus bibendum, finibus nibh ut, ultrices metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at egestas ipsum, et lobortis quam. Etiam mattis arcu mollis porta molestie. Vestibulum sollicitudin ipsum mauris, ut efficitur elit bibendum in.</p>
<p>Integer sed vehicula est, vitae venenatis felis. Suspendisse nisl risus, convallis sit amet varius non, elementum eu dolor. Pellentesque sem erat, venenatis a justo id, dictum dapibus nisl. In accumsan dapibus elementum. Nunc viverra, nisl in rhoncus aliquam, turpis ligula aliquet mauris, at imperdiet quam diam at metus. Etiam et erat elit. Phasellus in tortor eu erat pulvinar facilisis.</p>
<p>Duis viverra sollicitudin euismod. Maecenas rhoncus neque vel purus aliquam pellentesque. Praesent quis lobortis tellus. Ut sit amet tempor magna. Aliquam accumsan magna vel efficitur rutrum. Aliquam a leo quam. Quisque urna sem, finibus cursus vehicula sit amet, facilisis vitae metus. Proin commodo lorem in maximus posuere. Mauris vel eros cursus, blandit sapien et, ultrices lorem. Donec ultricies nisi at neque congue, eu dictum ipsum volutpat. Donec lacinia lacinia interdum. Nam at posuere neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum commodo eleifend. Nullam ut sem magna.</p>
<p>Cras interdum maximus rhoncus. Donec erat metus, vestibulum vitae rhoncus nec, egestas at nunc. Sed porta at nulla sed eleifend. Aliquam accumsan eros justo, at ornare dui aliquet eget. Phasellus posuere sapien eu nunc venenatis, molestie scelerisque lorem vestibulum. Proin eu porta augue, at tempus arcu. In vitae porta leo. Ut scelerisque turpis nec massa euismod, quis lobortis diam tempus. Proin elementum sed mauris in elementum. Proin convallis nulla lectus, nec pellentesque purus consectetur sit amet. Sed gravida condimentum nibh ac interdum.</p>
<p>Donec ut ligula at magna vehicula blandit vitae a justo. Aenean urna neque, egestas vitae velit ac, auctor gravida urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed pulvinar ac erat a faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur sagittis lacinia. Donec feugiat lacus eu est semper bibendum. Suspendisse nec ultrices neque, eu suscipit est. Curabitur semper est vitae arcu consequat suscipit. In hac habitasse platea dictumst. Vivamus pulvinar libero at arcu volutpat commodo at non sapien. Cras commodo erat sit amet blandit venenatis. Etiam tincidunt massa sit amet magna porttitor, aliquam egestas purus mollis. Aenean efficitur ante vitae augue gravida molestie.</p>
<p>Etiam tincidunt ipsum sit amet posuere tristique. Donec molestie sapien orci. Ut accumsan consequat nisi, eget mattis eros. Duis venenatis nunc id ipsum ultricies, cursus tincidunt sapien dignissim. Maecenas mattis eros nibh. Pellentesque in lorem turpis. Phasellus euismod, mi sit amet posuere tincidunt, mi turpis varius lectus, id molestie quam mi ut est. Duis vel dui bibendum, pellentesque lacus at, molestie felis. Nulla facilisi. Nunc augue dui, tempor non turpis in, accumsan cursus felis. Suspendisse nisl orci, consectetur id augue in, fermentum finibus erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum metus felis, tristique ut orci vel, posuere tincidunt tellus. Sed lacus augue, luctus a libero vel, molestie sollicitudin purus. Nam euismod tortor id venenatis ullamcorper.</p>
<p>Maecenas mattis sem id mauris commodo aliquam. Maecenas volutpat lectus dui, a vestibulum leo vehicula nec. Ut ac leo id odio bibendum imperdiet ut in lectus. Praesent nec felis at nibh maximus ullamcorper sed a turpis. Curabitur congue tincidunt bibendum. Fusce vulputate lorem eu massa aliquam vehicula. Suspendisse elementum justo ut venenatis tempor. Aliquam vel urna nec risus lacinia convallis consequat ut elit. Phasellus vel fringilla est. Vivamus a viverra tellus. Etiam gravida tempus turpis, eu finibus orci mollis at. Cras sit amet neque eu orci commodo ultrices.</p>
<p>Integer finibus, diam eget volutpat maximus, erat nunc suscipit nisi, et scelerisque augue ligula ultrices quam. Nulla eget ipsum tristique, bibendum mauris ac, sollicitudin quam. Quisque lacinia, sapien quis faucibus tincidunt, mi orci volutpat lorem, sed commodo quam sapien vehicula lectus. Aliquam pharetra felis ut arcu auctor, vitae rhoncus felis placerat. Pellentesque finibus sem vitae imperdiet pharetra. Quisque pulvinar viverra mauris sed accumsan. Mauris feugiat, eros vitae facilisis lobortis, ipsum neque gravida massa, at dictum mauris odio non odio. Integer nec leo urna. Pellentesque tempus lacus at elementum tincidunt. Sed cursus velit eros, nec placerat ante convallis at. Nullam sed dictum ex, a pretium lacus. Integer vitae pellentesque augue, vel efficitur tortor. Vivamus sit amet vestibulum nulla, eget porta ante. Integer sed nulla id eros pharetra dignissim. Sed orci massa, facilisis ac porttitor id, fermentum eu augue.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tortor orci, euismod a ante et, iaculis malesuada nulla. Praesent pellentesque hendrerit urna, a posuere magna facilisis eu. Vestibulum iaculis fringilla orci, vel rutrum felis mollis eu. Proin pretium et nunc eget ullamcorper. Praesent vel nisi eleifend, facilisis sapien nec, malesuada diam. Phasellus nibh justo, auctor et suscipit eget, aliquam sed lacus. Etiam odio libero, convallis vitae ultricies ac, interdum ut dolor. Etiam ullamcorper orci a sem feugiat porttitor. Proin sit amet pellentesque velit, non molestie nisi. Morbi at pellentesque urna, eu ultrices sapien. Nulla bibendum, dui sit amet finibus mollis, ipsum lacus dictum elit, id luctus turpis ligula ut nisi.</p>
<p>Integer quis scelerisque turpis. Nam ornare erat sed nisi consequat tincidunt. Donec consectetur turpis dui. Quisque vel mi eget dolor volutpat scelerisque. Etiam sagittis justo tincidunt, posuere erat et, bibendum eros. Proin mattis lobortis purus in rutrum. Phasellus imperdiet ante nibh, ut maximus lacus facilisis et. Morbi non pretium est. Fusce a turpis auctor, cursus lectus at, hendrerit erat. Praesent sit amet lacus id risus ornare pharetra at at odio. Aliquam a vehicula orci.</p>
<p>Cras imperdiet orci quis est scelerisque, ac bibendum dui dapibus. Etiam ullamcorper elit vitae felis blandit mollis. Morbi est libero, feugiat at justo vitae, interdum interdum erat. Donec tincidunt nibh a sagittis imperdiet. Fusce in libero nec libero iaculis aliquet eget sit amet ante. Nulla velit diam, congue vitae malesuada quis, posuere eget leo. Pellentesque quis interdum turpis. Curabitur ut risus bibendum, finibus nibh ut, ultrices metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at egestas ipsum, et lobortis quam. Etiam mattis arcu mollis porta molestie. Vestibulum sollicitudin ipsum mauris, ut efficitur elit bibendum in.</p>
<p>Integer sed vehicula est, vitae venenatis felis. Suspendisse nisl risus, convallis sit amet varius non, elementum eu dolor. Pellentesque sem erat, venenatis a justo id, dictum dapibus nisl. In accumsan dapibus elementum. Nunc viverra, nisl in rhoncus aliquam, turpis ligula aliquet mauris, at imperdiet quam diam at metus. Etiam et erat elit. Phasellus in tortor eu erat pulvinar facilisis.</p>
<p>Duis viverra sollicitudin euismod. Maecenas rhoncus neque vel purus aliquam pellentesque. Praesent quis lobortis tellus. Ut sit amet tempor magna. Aliquam accumsan magna vel efficitur rutrum. Aliquam a leo quam. Quisque urna sem, finibus cursus vehicula sit amet, facilisis vitae metus. Proin commodo lorem in maximus posuere. Mauris vel eros cursus, blandit sapien et, ultrices lorem. Donec ultricies nisi at neque congue, eu dictum ipsum volutpat. Donec lacinia lacinia interdum. Nam at posuere neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum commodo eleifend. Nullam ut sem magna.</p>
<p>Cras interdum maximus rhoncus. Donec erat metus, vestibulum vitae rhoncus nec, egestas at nunc. Sed porta at nulla sed eleifend. Aliquam accumsan eros justo, at ornare dui aliquet eget. Phasellus posuere sapien eu nunc venenatis, molestie scelerisque lorem vestibulum. Proin eu porta augue, at tempus arcu. In vitae porta leo. Ut scelerisque turpis nec massa euismod, quis lobortis diam tempus. Proin elementum sed mauris in elementum. Proin convallis nulla lectus, nec pellentesque purus consectetur sit amet. Sed gravida condimentum nibh ac interdum.</p>
<p>Donec ut ligula at magna vehicula blandit vitae a justo. Aenean urna neque, egestas vitae velit ac, auctor gravida urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed pulvinar ac erat a faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur sagittis lacinia. Donec feugiat lacus eu est semper bibendum. Suspendisse nec ultrices neque, eu suscipit est. Curabitur semper est vitae arcu consequat suscipit. In hac habitasse platea dictumst. Vivamus pulvinar libero at arcu volutpat commodo at non sapien. Cras commodo erat sit amet blandit venenatis. Etiam tincidunt massa sit amet magna porttitor, aliquam egestas purus mollis. Aenean efficitur ante vitae augue gravida molestie.</p>
<p>Etiam tincidunt ipsum sit amet posuere tristique. Donec molestie sapien orci. Ut accumsan consequat nisi, eget mattis eros. Duis venenatis nunc id ipsum ultricies, cursus tincidunt sapien dignissim. Maecenas mattis eros nibh. Pellentesque in lorem turpis. Phasellus euismod, mi sit amet posuere tincidunt, mi turpis varius lectus, id molestie quam mi ut est. Duis vel dui bibendum, pellentesque lacus at, molestie felis. Nulla facilisi. Nunc augue dui, tempor non turpis in, accumsan cursus felis. Suspendisse nisl orci, consectetur id augue in, fermentum finibus erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum metus felis, tristique ut orci vel, posuere tincidunt tellus. Sed lacus augue, luctus a libero vel, molestie sollicitudin purus. Nam euismod tortor id venenatis ullamcorper.</p>
<p>Maecenas mattis sem id mauris commodo aliquam. Maecenas volutpat lectus dui, a vestibulum leo vehicula nec. Ut ac leo id odio bibendum imperdiet ut in lectus. Praesent nec felis at nibh maximus ullamcorper sed a turpis. Curabitur congue tincidunt bibendum. Fusce vulputate lorem eu massa aliquam vehicula. Suspendisse elementum justo ut venenatis tempor. Aliquam vel urna nec risus lacinia convallis consequat ut elit. Phasellus vel fringilla est. Vivamus a viverra tellus. Etiam gravida tempus turpis, eu finibus orci mollis at. Cras sit amet neque eu orci commodo ultrices.</p>
<p>Integer finibus, diam eget volutpat maximus, erat nunc suscipit nisi, et scelerisque augue ligula ultrices quam. Nulla eget ipsum tristique, bibendum mauris ac, sollicitudin quam. Quisque lacinia, sapien quis faucibus tincidunt, mi orci volutpat lorem, sed commodo quam sapien vehicula lectus. Aliquam pharetra felis ut arcu auctor, vitae rhoncus felis placerat. Pellentesque finibus sem vitae imperdiet pharetra. Quisque pulvinar viverra mauris sed accumsan. Mauris feugiat, eros vitae facilisis lobortis, ipsum neque gravida massa, at dictum mauris odio non odio. Integer nec leo urna. Pellentesque tempus lacus at elementum tincidunt. Sed cursus velit eros, nec placerat ante convallis at. Nullam sed dictum ex, a pretium lacus. Integer vitae pellentesque augue, vel efficitur tortor. Vivamus sit amet vestibulum nulla, eget porta ante. Integer sed nulla id eros pharetra dignissim. Sed orci massa, facilisis ac porttitor id, fermentum eu augue.</p>
<select id="myselect" onchange="dothis()">
</select>
</body>
</html>

Scroll Indicator based on four html pages without decreasing percentage when scrolling back up

I'm currently programming an e-learning website and thus want a scrolling indicator "summing up" the pages already read. I have four html pages, each html page should make up 25% of the scroll bar. So if you've scrolled through all four pages, it should be 100%. I've already tried the code down below and it works for one html page to go up to 25%. Nevertheless, when I scroll back up, the percentage decreases again. I would want it to stay at 25% once the page is fully scrolled down. I'm a beginner at programming and tried everything I could think of + used google... I just can't find anything that works. I'd be very thankful if you guys could help me.
I've thought maybe if & else might work, so I tried something like this, changing variables, numbers and order but nothing worked:
if (scrolled = 25) {document.getElementById("myBar-
fotografie").style.width = 25 + "%"; }
else {document.getElementById("myBar-fotografie").style.width = scrolled
+ "%";}
I've only tried keeping the bar at 25% so far once it's fully scrolled, not adding the percentages of the four html pages. I don't have a clue how to do that though.
<html>
<p> Fotografie </p>
<div class="progress-container">
<div class="progress-bar" id="myBar-fotografie"></div>
</div>
//fotografie is the headline for the four html pages which are subpages
</html>
<style>
.progress-container {
width: 100%;
height: 8px;
background: #ccc;
}
.progress-bar {
height: 8px;
background: #4caf50;
width: 0%;
}
</style>
<script>
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop ||
document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight -
document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 25;
document.getElementById("myBar-fotografie").style.width = scrolled + "%";
}
</script>

In the meantime, before you prepare a working code
My example of progressbar at 25%
const ProgressBar = function () {
let position = document.documentElement.scrollTop;
window.addEventListener('scroll', () => {
let scrolls = document.documentElement.scrollTop;
let ws = window.pageYOffset, wh = window.innerHeight, dh = document.body.clientHeight;
let scrollPercent = (ws / (dh - wh)) * 25;
if (scrolls > position) {
const progressBar = document.querySelector('#progress');
if (ws > 50) {
progressBar.setAttribute('style', 'width:' + scrollPercent + '%');
} else {
progressBar.removeAttribute('style');
}
}
position = scrolls;
});
}();
.container {
width: 100%;
margin: 0 auto;
}
.bar {
position: fixed;
background: rgb(255, 0, 0);
height: 10px;
width: 0;
top: 0;
}
h1 {
text-transform: uppercase;
margin: 20px 0;
}
h1 span {
color: rgb(60, 177, 6);
}
p {
margin-bottom: 10px;
}
<div id="progress" class="bar"></div>
<div class="container">
<h1>proggres bar test - <span>scroll</span></h1>
<div class="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu commodo orci, sed elementum massa. Nam sit amet
elementum
ipsum, eu laoreet metus. Aenean a ex vel erat aliquam imperdiet eu at justo. Nulla in lobortis tellus. Curabitur
varius laoreet quam non facilisis. Etiam consequat purus elit, vel euismod ligula faucibus fringilla. Etiam
cursus dui eros, non egestas nibh congue a. Nullam eu justo neque. Cras rutrum arcu elit. Quisque vestibulum
et mi vel congue. Curabitur a ultrices ligula. Morbi enim ligula, euismod eu ornare id, pharetra et sapien.
Sed aliquam, elit vitae aliquet iaculis, leo sapien rutrum ipsum, at fermentum nibh dolor ac risus.
</p>
<p>
Nunc a orci auctor, ornare leo at, convallis neque. Mauris congue, massa ac faucibus aliquam, diam dui porta
purus, sed consequat
eros dolor ac ex. Vivamus augue orci, bibendum nec imperdiet sit amet, fringilla at lacus. Nullam condimentum
dolor eu dolor consequat, a ullamcorper eros congue. Aliquam varius nec elit et posuere. In rutrum et mi
a tristique. Praesent at magna a magna vestibulum vulputate. Ut vulputate, leo nec blandit fermentum, urna
dolor efficitur erat, vitae aliquam risus diam eget libero.
</p>
<p>
Phasellus vel augue quis felis lacinia fermentum. Donec laoreet mauris non orci tincidunt maximus. Curabitur
mattis tincidunt
eros, et pellentesque eros venenatis ut. Mauris eget justo nec leo maximus interdum. Vestibulum aliquet lorem
commodo, semper enim bibendum, pretium nisi. Donec ultricies, nibh vitae dapibus porttitor, lorem nulla bibendum
justo, et posuere orci tellus in nisl. Aenean volutpat dui et porttitor varius. Duis a magna luctus, porta
sem at, consectetur nisl. Curabitur in venenatis sem, id tempus quam. Aenean ut lorem ipsum. Donec eget ligula
fermentum, viverra nunc ut, vehicula lorem. Aenean maximus varius sodales. Aliquam sed ipsum nec diam pharetra
vehicula.
</p>
<p>
Vivamus dignissim pretium mi, in dictum nunc iaculis quis. Nullam auctor aliquet eros, bibendum rutrum libero
aliquam vitae.
Nullam congue dolor at diam fermentum pretium. Duis a lectus in sem hendrerit ullamcorper eget tempus orci.
Pellentesque ac nulla eu risus tempus scelerisque. Phasellus et vestibulum eros, ac convallis elit. Duis
convallis feugiat justo, at aliquet quam pretium volutpat. Ut sit amet vulputate justo, eget ultricies neque.
Mauris aliquam arcu ut lorem laoreet luctus. Sed eget ligula rutrum, tincidunt augue vel, fermentum turpis.
</p>
<p>
Ut vehicula quam orci, vel commodo mauris gravida nec. Quisque pharetra commodo dolor bibendum pulvinar. Nunc id
quam ac
ante placerat dapibus. Aenean erat leo, laoreet et nibh at, egestas aliquet sapien. Sed pharetra orci eget
est semper fermentum. Fusce leo erat, finibus sed pulvinar eget, eleifend quis lectus. Cras volutpat sodales
arcu, a consectetur mauris laoreet in.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu commodo orci, sed elementum massa. Nam sit amet
elementum
ipsum, eu laoreet metus. Aenean a ex vel erat aliquam imperdiet eu at justo. Nulla in lobortis tellus. Curabitur
varius laoreet quam non facilisis. Etiam consequat purus elit, vel euismod ligula faucibus fringilla. Etiam
cursus dui eros, non egestas nibh congue a. Nullam eu justo neque. Cras rutrum arcu elit. Quisque vestibulum
et mi vel congue. Curabitur a ultrices ligula. Morbi enim ligula, euismod eu ornare id, pharetra et sapien.
Sed aliquam, elit vitae aliquet iaculis, leo sapien rutrum ipsum, at fermentum nibh dolor ac risus.
</p>
<p>
Nunc a orci auctor, ornare leo at, convallis neque. Mauris congue, massa ac faucibus aliquam, diam dui porta
purus, sed consequat
eros dolor ac ex. Vivamus augue orci, bibendum nec imperdiet sit amet, fringilla at lacus. Nullam condimentum
dolor eu dolor consequat, a ullamcorper eros congue. Aliquam varius nec elit et posuere. In rutrum et mi
a tristique. Praesent at magna a magna vestibulum vulputate. Ut vulputate, leo nec blandit fermentum, urna
dolor efficitur erat, vitae aliquam risus diam eget libero.
</p>
<p>
Phasellus vel augue quis felis lacinia fermentum. Donec laoreet mauris non orci tincidunt maximus. Curabitur
mattis tincidunt
eros, et pellentesque eros venenatis ut. Mauris eget justo nec leo maximus interdum. Vestibulum aliquet lorem
commodo, semper enim bibendum, pretium nisi. Donec ultricies, nibh vitae dapibus porttitor, lorem nulla bibendum
justo, et posuere orci tellus in nisl. Aenean volutpat dui et porttitor varius. Duis a magna luctus, porta
sem at, consectetur nisl. Curabitur in venenatis sem, id tempus quam. Aenean ut lorem ipsum. Donec eget ligula
fermentum, viverra nunc ut, vehicula lorem. Aenean maximus varius sodales. Aliquam sed ipsum nec diam pharetra
vehicula.
</p>
<p>
Vivamus dignissim pretium mi, in dictum nunc iaculis quis. Nullam auctor aliquet eros, bibendum rutrum libero
aliquam vitae.
Nullam congue dolor at diam fermentum pretium. Duis a lectus in sem hendrerit ullamcorper eget tempus orci.
Pellentesque ac nulla eu risus tempus scelerisque. Phasellus et vestibulum eros, ac convallis elit. Duis
convallis feugiat justo, at aliquet quam pretium volutpat. Ut sit amet vulputate justo, eget ultricies neque.
Mauris aliquam arcu ut lorem laoreet luctus. Sed eget ligula rutrum, tincidunt augue vel, fermentum turpis.
</p>
<p>
Ut vehicula quam orci, vel commodo mauris gravida nec. Quisque pharetra commodo dolor bibendum pulvinar. Nunc id
quam ac
ante placerat dapibus. Aenean erat leo, laoreet et nibh at, egestas aliquet sapien. Sed pharetra orci eget
est semper fermentum. Fusce leo erat, finibus sed pulvinar eget, eleifend quis lectus. Cras volutpat sodales
arcu, a consectetur mauris laoreet in.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu commodo orci, sed elementum massa. Nam sit amet
elementum
ipsum, eu laoreet metus. Aenean a ex vel erat aliquam imperdiet eu at justo. Nulla in lobortis tellus. Curabitur
varius laoreet quam non facilisis. Etiam consequat purus elit, vel euismod ligula faucibus fringilla. Etiam
cursus dui eros, non egestas nibh congue a. Nullam eu justo neque. Cras rutrum arcu elit. Quisque vestibulum
et mi vel congue. Curabitur a ultrices ligula. Morbi enim ligula, euismod eu ornare id, pharetra et sapien.
Sed aliquam, elit vitae aliquet iaculis, leo sapien rutrum ipsum, at fermentum nibh dolor ac risus.
</p>
<p>
Nunc a orci auctor, ornare leo at, convallis neque. Mauris congue, massa ac faucibus aliquam, diam dui porta
purus, sed consequat
eros dolor ac ex. Vivamus augue orci, bibendum nec imperdiet sit amet, fringilla at lacus. Nullam condimentum
dolor eu dolor consequat, a ullamcorper eros congue. Aliquam varius nec elit et posuere. In rutrum et mi
a tristique. Praesent at magna a magna vestibulum vulputate. Ut vulputate, leo nec blandit fermentum, urna
dolor efficitur erat, vitae aliquam risus diam eget libero.
</p>
<p>
Phasellus vel augue quis felis lacinia fermentum. Donec laoreet mauris non orci tincidunt maximus. Curabitur
mattis tincidunt
eros, et pellentesque eros venenatis ut. Mauris eget justo nec leo maximus interdum. Vestibulum aliquet lorem
commodo, semper enim bibendum, pretium nisi. Donec ultricies, nibh vitae dapibus porttitor, lorem nulla bibendum
justo, et posuere orci tellus in nisl. Aenean volutpat dui et porttitor varius. Duis a magna luctus, porta
sem at, consectetur nisl. Curabitur in venenatis sem, id tempus quam. Aenean ut lorem ipsum. Donec eget ligula
fermentum, viverra nunc ut, vehicula lorem. Aenean maximus varius sodales. Aliquam sed ipsum nec diam pharetra
vehicula.
</p>
<p>
Vivamus dignissim pretium mi, in dictum nunc iaculis quis. Nullam auctor aliquet eros, bibendum rutrum libero
aliquam vitae.
Nullam congue dolor at diam fermentum pretium. Duis a lectus in sem hendrerit ullamcorper eget tempus orci.
Pellentesque ac nulla eu risus tempus scelerisque. Phasellus et vestibulum eros, ac convallis elit. Duis
convallis feugiat justo, at aliquet quam pretium volutpat. Ut sit amet vulputate justo, eget ultricies neque.
Mauris aliquam arcu ut lorem laoreet luctus. Sed eget ligula rutrum, tincidunt augue vel, fermentum turpis.
</p>
<p>
Ut vehicula quam orci, vel commodo mauris gravida nec. Quisque pharetra commodo dolor bibendum pulvinar. Nunc id
quam ac
ante placerat dapibus. Aenean erat leo, laoreet et nibh at, egestas aliquet sapien. Sed pharetra orci eget
est semper fermentum. Fusce leo erat, finibus sed pulvinar eget, eleifend quis lectus. Cras volutpat sodales
arcu, a consectetur mauris laoreet in.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu commodo orci, sed elementum massa. Nam sit amet
elementum
ipsum, eu laoreet metus. Aenean a ex vel erat aliquam imperdiet eu at justo. Nulla in lobortis tellus. Curabitur
varius laoreet quam non facilisis. Etiam consequat purus elit, vel euismod ligula faucibus fringilla. Etiam
cursus dui eros, non egestas nibh congue a. Nullam eu justo neque. Cras rutrum arcu elit. Quisque vestibulum
et mi vel congue. Curabitur a ultrices ligula. Morbi enim ligula, euismod eu ornare id, pharetra et sapien.
Sed aliquam, elit vitae aliquet iaculis, leo sapien rutrum ipsum, at fermentum nibh dolor ac risus.
</p>
<p>
Nunc a orci auctor, ornare leo at, convallis neque. Mauris congue, massa ac faucibus aliquam, diam dui porta
purus, sed consequat
eros dolor ac ex. Vivamus augue orci, bibendum nec imperdiet sit amet, fringilla at lacus. Nullam condimentum
dolor eu dolor consequat, a ullamcorper eros congue. Aliquam varius nec elit et posuere. In rutrum et mi
a tristique. Praesent at magna a magna vestibulum vulputate. Ut vulputate, leo nec blandit fermentum, urna
dolor efficitur erat, vitae aliquam risus diam eget libero.
</p>
<p>
Phasellus vel augue quis felis lacinia fermentum. Donec laoreet mauris non orci tincidunt maximus. Curabitur
mattis tincidunt
eros, et pellentesque eros venenatis ut. Mauris eget justo nec leo maximus interdum. Vestibulum aliquet lorem
commodo, semper enim bibendum, pretium nisi. Donec ultricies, nibh vitae dapibus porttitor, lorem nulla bibendum
justo, et posuere orci tellus in nisl. Aenean volutpat dui et porttitor varius. Duis a magna luctus, porta
sem at, consectetur nisl. Curabitur in venenatis sem, id tempus quam. Aenean ut lorem ipsum. Donec eget ligula
fermentum, viverra nunc ut, vehicula lorem. Aenean maximus varius sodales. Aliquam sed ipsum nec diam pharetra
vehicula.
</p>
<p>
Vivamus dignissim pretium mi, in dictum nunc iaculis quis. Nullam auctor aliquet eros, bibendum rutrum libero
aliquam vitae.
Nullam congue dolor at diam fermentum pretium. Duis a lectus in sem hendrerit ullamcorper eget tempus orci.
Pellentesque ac nulla eu risus tempus scelerisque. Phasellus et vestibulum eros, ac convallis elit. Duis
convallis feugiat justo, at aliquet quam pretium volutpat. Ut sit amet vulputate justo, eget ultricies neque.
Mauris aliquam arcu ut lorem laoreet luctus. Sed eget ligula rutrum, tincidunt augue vel, fermentum turpis.
</p>
<p>
Ut vehicula quam orci, vel commodo mauris gravida nec. Quisque pharetra commodo dolor bibendum pulvinar. Nunc id
quam ac
ante placerat dapibus. Aenean erat leo, laoreet et nibh at, egestas aliquet sapien. Sed pharetra orci eget
est semper fermentum. Fusce leo erat, finibus sed pulvinar eget, eleifend quis lectus. Cras volutpat sodales
arcu, a consectetur mauris laoreet in.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu commodo orci, sed elementum massa. Nam sit amet
elementum
ipsum, eu laoreet metus. Aenean a ex vel erat aliquam imperdiet eu at justo. Nulla in lobortis tellus. Curabitur
varius laoreet quam non facilisis. Etiam consequat purus elit, vel euismod ligula faucibus fringilla. Etiam
cursus dui eros, non egestas nibh congue a. Nullam eu justo neque. Cras rutrum arcu elit. Quisque vestibulum
et mi vel congue. Curabitur a ultrices ligula. Morbi enim ligula, euismod eu ornare id, pharetra et sapien.
Sed aliquam, elit vitae aliquet iaculis, leo sapien rutrum ipsum, at fermentum nibh dolor ac risus.
</p>
<p>
Nunc a orci auctor, ornare leo at, convallis neque. Mauris congue, massa ac faucibus aliquam, diam dui porta
purus, sed consequat
eros dolor ac ex. Vivamus augue orci, bibendum nec imperdiet sit amet, fringilla at lacus. Nullam condimentum
dolor eu dolor consequat, a ullamcorper eros congue. Aliquam varius nec elit et posuere. In rutrum et mi
a tristique. Praesent at magna a magna vestibulum vulputate. Ut vulputate, leo nec blandit fermentum, urna
dolor efficitur erat, vitae aliquam risus diam eget libero.
</p>
<p>
Phasellus vel augue quis felis lacinia fermentum. Donec laoreet mauris non orci tincidunt maximus. Curabitur
mattis tincidunt
eros, et pellentesque eros venenatis ut. Mauris eget justo nec leo maximus interdum. Vestibulum aliquet lorem
commodo, semper enim bibendum, pretium nisi. Donec ultricies, nibh vitae dapibus porttitor, lorem nulla bibendum
justo, et posuere orci tellus in nisl. Aenean volutpat dui et porttitor varius. Duis a magna luctus, porta
sem at, consectetur nisl. Curabitur in venenatis sem, id tempus quam. Aenean ut lorem ipsum. Donec eget ligula
fermentum, viverra nunc ut, vehicula lorem. Aenean maximus varius sodales. Aliquam sed ipsum nec diam pharetra
vehicula.
</p>
<p>
Vivamus dignissim pretium mi, in dictum nunc iaculis quis. Nullam auctor aliquet eros, bibendum rutrum libero
aliquam vitae.
Nullam congue dolor at diam fermentum pretium. Duis a lectus in sem hendrerit ullamcorper eget tempus orci.
Pellentesque ac nulla eu risus tempus scelerisque. Phasellus et vestibulum eros, ac convallis elit. Duis
convallis feugiat justo, at aliquet quam pretium volutpat. Ut sit amet vulputate justo, eget ultricies neque.
Mauris aliquam arcu ut lorem laoreet luctus. Sed eget ligula rutrum, tincidunt augue vel, fermentum turpis.
</p>
<p>
Ut vehicula quam orci, vel commodo mauris gravida nec. Quisque pharetra commodo dolor bibendum pulvinar. Nunc id
quam ac
ante placerat dapibus. Aenean erat leo, laoreet et nibh at, egestas aliquet sapien. Sed pharetra orci eget
est semper fermentum. Fusce leo erat, finibus sed pulvinar eget, eleifend quis lectus. Cras volutpat sodales
arcu, a consectetur mauris laoreet in.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu commodo orci, sed elementum massa. Nam sit amet
elementum
ipsum, eu laoreet metus. Aenean a ex vel erat aliquam imperdiet eu at justo. Nulla in lobortis tellus. Curabitur
varius laoreet quam non facilisis. Etiam consequat purus elit, vel euismod ligula faucibus fringilla. Etiam
cursus dui eros, non egestas nibh congue a. Nullam eu justo neque. Cras rutrum arcu elit. Quisque vestibulum
et mi vel congue. Curabitur a ultrices ligula. Morbi enim ligula, euismod eu ornare id, pharetra et sapien.
Sed aliquam, elit vitae aliquet iaculis, leo sapien rutrum ipsum, at fermentum nibh dolor ac risus.
</p>
<p>
Nunc a orci auctor, ornare leo at, convallis neque. Mauris congue, massa ac faucibus aliquam, diam dui porta
purus, sed consequat
eros dolor ac ex. Vivamus augue orci, bibendum nec imperdiet sit amet, fringilla at lacus. Nullam condimentum
dolor eu dolor consequat, a ullamcorper eros congue. Aliquam varius nec elit et posuere. In rutrum et mi
a tristique. Praesent at magna a magna vestibulum vulputate. Ut vulputate, leo nec blandit fermentum, urna
dolor efficitur erat, vitae aliquam risus diam eget libero.
</p>
<p>
Phasellus vel augue quis felis lacinia fermentum. Donec laoreet mauris non orci tincidunt maximus. Curabitur
mattis tincidunt
eros, et pellentesque eros venenatis ut. Mauris eget justo nec leo maximus interdum. Vestibulum aliquet lorem
commodo, semper enim bibendum, pretium nisi. Donec ultricies, nibh vitae dapibus porttitor, lorem nulla bibendum
justo, et posuere orci tellus in nisl. Aenean volutpat dui et porttitor varius. Duis a magna luctus, porta
sem at, consectetur nisl. Curabitur in venenatis sem, id tempus quam. Aenean ut lorem ipsum. Donec eget ligula
fermentum, viverra nunc ut, vehicula lorem. Aenean maximus varius sodales. Aliquam sed ipsum nec diam pharetra
vehicula.
</p>
<p>
Vivamus dignissim pretium mi, in dictum nunc iaculis quis. Nullam auctor aliquet eros, bibendum rutrum libero
aliquam vitae.
Nullam congue dolor at diam fermentum pretium. Duis a lectus in sem hendrerit ullamcorper eget tempus orci.
Pellentesque ac nulla eu risus tempus scelerisque. Phasellus et vestibulum eros, ac convallis elit. Duis
convallis feugiat justo, at aliquet quam pretium volutpat. Ut sit amet vulputate justo, eget ultricies neque.
Mauris aliquam arcu ut lorem laoreet luctus. Sed eget ligula rutrum, tincidunt augue vel, fermentum turpis.
</p>
<p>
Ut vehicula quam orci, vel commodo mauris gravida nec. Quisque pharetra commodo dolor bibendum pulvinar. Nunc id
quam ac
ante placerat dapibus. Aenean erat leo, laoreet et nibh at, egestas aliquet sapien. Sed pharetra orci eget
est semper fermentum. Fusce leo erat, finibus sed pulvinar eget, eleifend quis lectus. Cras volutpat sodales
arcu, a consectetur mauris laoreet in.
</p>
</div>
</div>

How to add a class to an image with smooth transitions, not clunky

Here is a jsfiddle of my work so far
I know you can't see the image but i'll try to explain what I mean. As you can see the header itself animates smoothly as i scroll down. However the image doesn't resize in a smooth transition, it just suddenly changes size. I'd like it to visibly decrease in size along with the header if that makes sense.
I have tried adding transition: all 0.8s ease; to the header-image class but it had no effect.
Any help is greatly appreciated.
HTML:

You didn't set the default value of height of the image.
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 1) {
$('header').addClass("scroll");
$('.header-image').addClass("header-image-scroll");
} else {
$('header').removeClass("scroll");
$('.header-image').removeClass("header-image-scroll");
}
});
});
body {
font-family: 'Open Sans', sans-serif;
background-color: #f3f3f3;
color: #666;
margin: 0px;
padding: 0px;
}
#Page {
padding-top: 100px;
}
header {
background-color: #1c1c1b;
font-family: 'Century gothic';
font-size: 180%;
height: 100px;
width: 100%;
border-bottom: solid;
border-bottom-color: #009641;
border-bottom-width: 5px;
position: fixed;
line-height: 50px;
z-index: 1000;
overflow: hidden;
transition: all 0.8s ease;
}
.header-image {
align-content: center;
height: 200px;
transition: all .5s ease;
}
.scroll {
height: 80px;
font-size: 180%;
}
.header-image-scroll {
height: 80px;
transition: all .5s ease;
}
#center-column {
background-color: white;
width: 1080px;
height: 100%;
box-shadow: 0px 1px 5px #888888;
margin: 0 auto;
padding-bottom: 10px;
}
nav {
}
nav ul {
text-align: center;
display: table;
margin: auto;
}
nav li {
display: table-cell;
vertical-align: middle;
/*display: inline;*/
padding: 0 10px;
}
nav li a {
color: #009641;
text-decoration: none;
}
nav li a:hover {
color: #e2030e;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<body id="chesters">
<header>
<nav>
<ul>
<li>Menu</li>
<li>Burritos</li>
<li><img class="header-image" src="http://wallpaper-gallery.net/images/image/image-13.jpg"></li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</nav>
</header>
<div id="Page">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed enim metus. Aenean suscipit imperdiet magna, vel pulvinar mauris pretium a. Nullam eleifend erat a leo sollicitudin, non consequat quam egestas. Etiam sollicitudin lectus eu nibh laoreet dapibus. Phasellus vel dui auctor tortor interdum gravida a interdum dui. Cras dapibus dui arcu, nec condimentum arcu malesuada sed. Aliquam sit amet bibendum felis, nec condimentum quam. Aenean a arcu interdum, luctus ipsum vitae, dapibus sapien.
Aenean pharetra vestibulum eros ut porttitor. Etiam fringilla augue non purus sodales feugiat. Sed at nunc et risus tempor eleifend ac non orci. Mauris a rhoncus lacus. Quisque eget malesuada risus, sed vehicula mi. Duis elementum finibus interdum. In fringilla accumsan accumsan. Curabitur sit amet tempus dolor. Aliquam erat volutpat. Praesent at luctus orci. Ut eget odio dignissim, facilisis quam ut, pharetra dolor. Duis laoreet lectus nec aliquet condimentum. Ut in tellus semper, ultricies erat convallis, eleifend sem. Phasellus lacinia euismod nulla, ac egestas ipsum hendrerit eget. Sed lacinia metus sit amet sodales mattis.
Phasellus ac leo mattis, convallis dui vitae, ultricies diam. Nunc finibus arcu mauris, rhoncus tincidunt urna condimentum ut. Proin volutpat hendrerit mi, nec euismod lorem commodo in. Maecenas aliquam viverra lectus, quis euismod tortor dapibus at. Duis nec sapien non velit interdum malesuada. Duis venenatis tellus a metus varius condimentum. Integer fringilla volutpat leo ut rutrum. Aenean gravida rhoncus mattis. Nam at convallis magna. In turpis erat, mattis et lorem sed, euismod mattis nisl. Quisque eleifend convallis massa ut semper. In elementum rhoncus massa ut fermentum. Mauris pharetra libero mi, in pretium quam vehicula in. Pellentesque et lobortis felis. Suspendisse ultrices id urna sit amet semper.
Sed suscipit faucibus massa. Fusce elementum interdum leo, ut viverra libero eleifend at. In non placerat magna. Integer scelerisque molestie dapibus. Duis tincidunt diam neque, a ullamcorper libero accumsan eget. Aliquam rhoncus diam aliquet, interdum mauris sed, hendrerit risus. Aliquam erat volutpat. Mauris euismod accumsan neque vel gravida. Aenean facilisis augue at metus ultrices, convallis eleifend lectus fringilla. Nunc porta dictum scelerisque. Morbi quis nibh vel leo sodales egestas vitae ut ligula. Quisque eu pellentesque massa. Vivamus tristique rhoncus diam, at fringilla eros fringilla at. Fusce sit amet diam lectus. Cras blandit diam id odio bibendum, et blandit risus condimentum.
Aenean porta orci id sollicitudin cursus. Pellentesque eget mauris scelerisque, efficitur odio nec, aliquet nibh. Nulla quam nisl, placerat non condimentum at, tempus non nibh. Integer faucibus ex mi, at rutrum neque auctor ut. Etiam feugiat elit lectus, ut lacinia mi rhoncus et. Mauris varius mattis metus. Integer in placerat justo, eu placerat dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sem et ipsum dignissim eleifend vitae at massa. In quis odio in orci blandit scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam neque tortor, luctus et massa non, porta egestas erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed enim metus. Aenean suscipit imperdiet magna, vel pulvinar mauris pretium a. Nullam eleifend erat a leo sollicitudin, non consequat quam egestas. Etiam sollicitudin lectus eu nibh laoreet dapibus. Phasellus vel dui auctor tortor interdum gravida a interdum dui. Cras dapibus dui arcu, nec condimentum arcu malesuada sed. Aliquam sit amet bibendum felis, nec condimentum quam. Aenean a arcu interdum, luctus ipsum vitae, dapibus sapien.
Aenean pharetra vestibulum eros ut porttitor. Etiam fringilla augue non purus sodales feugiat. Sed at nunc et risus tempor eleifend ac non orci. Mauris a rhoncus lacus. Quisque eget malesuada risus, sed vehicula mi. Duis elementum finibus interdum. In fringilla accumsan accumsan. Curabitur sit amet tempus dolor. Aliquam erat volutpat. Praesent at luctus orci. Ut eget odio dignissim, facilisis quam ut, pharetra dolor. Duis laoreet lectus nec aliquet condimentum. Ut in tellus semper, ultricies erat convallis, eleifend sem. Phasellus lacinia euismod nulla, ac egestas ipsum hendrerit eget. Sed lacinia metus sit amet sodales mattis.
Phasellus ac leo mattis, convallis dui vitae, ultricies diam. Nunc finibus arcu mauris, rhoncus tincidunt urna condimentum ut. Proin volutpat hendrerit mi, nec euismod lorem commodo in. Maecenas aliquam viverra lectus, quis euismod tortor dapibus at. Duis nec sapien non velit interdum malesuada. Duis venenatis tellus a metus varius condimentum. Integer fringilla volutpat leo ut rutrum. Aenean gravida rhoncus mattis. Nam at convallis magna. In turpis erat, mattis et lorem sed, euismod mattis nisl. Quisque eleifend convallis massa ut semper. In elementum rhoncus massa ut fermentum. Mauris pharetra libero mi, in pretium quam vehicula in. Pellentesque et lobortis felis. Suspendisse ultrices id urna sit amet semper.
Sed suscipit faucibus massa. Fusce elementum interdum leo, ut viverra libero eleifend at. In non placerat magna. Integer scelerisque molestie dapibus. Duis tincidunt diam neque, a ullamcorper libero accumsan eget. Aliquam rhoncus diam aliquet, interdum mauris sed, hendrerit risus. Aliquam erat volutpat. Mauris euismod accumsan neque vel gravida. Aenean facilisis augue at metus ultrices, convallis eleifend lectus fringilla. Nunc porta dictum scelerisque. Morbi quis nibh vel leo sodales egestas vitae ut ligula. Quisque eu pellentesque massa. Vivamus tristique rhoncus diam, at fringilla eros fringilla at. Fusce sit amet diam lectus. Cras blandit diam id odio bibendum, et blandit risus condimentum.
Aenean porta orci id sollicitudin cursus. Pellentesque eget mauris scelerisque, efficitur odio nec, aliquet nibh. Nulla quam nisl, placerat non condimentum at, tempus non nibh. Integer faucibus ex mi, at rutrum neque auctor ut. Etiam feugiat elit lectus, ut lacinia mi rhoncus et. Mauris varius mattis metus. Integer in placerat justo, eu placerat dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sem et ipsum dignissim eleifend vitae at massa. In quis odio in orci blandit scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam neque tortor, luctus et massa non, porta egestas erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed enim metus. Aenean suscipit imperdiet magna, vel pulvinar mauris pretium a. Nullam eleifend erat a leo sollicitudin, non consequat quam egestas. Etiam sollicitudin lectus eu nibh laoreet dapibus. Phasellus vel dui auctor tortor interdum gravida a interdum dui. Cras dapibus dui arcu, nec condimentum arcu malesuada sed. Aliquam sit amet bibendum felis, nec condimentum quam. Aenean a arcu interdum, luctus ipsum vitae, dapibus sapien.
Aenean pharetra vestibulum eros ut porttitor. Etiam fringilla augue non purus sodales feugiat. Sed at nunc et risus tempor eleifend ac non orci. Mauris a rhoncus lacus. Quisque eget malesuada risus, sed vehicula mi. Duis elementum finibus interdum. In fringilla accumsan accumsan. Curabitur sit amet tempus dolor. Aliquam erat volutpat. Praesent at luctus orci. Ut eget odio dignissim, facilisis quam ut, pharetra dolor. Duis laoreet lectus nec aliquet condimentum. Ut in tellus semper, ultricies erat convallis, eleifend sem. Phasellus lacinia euismod nulla, ac egestas ipsum hendrerit eget. Sed lacinia metus sit amet sodales mattis.
Phasellus ac leo mattis, convallis dui vitae, ultricies diam. Nunc finibus arcu mauris, rhoncus tincidunt urna condimentum ut. Proin volutpat hendrerit mi, nec euismod lorem commodo in. Maecenas aliquam viverra lectus, quis euismod tortor dapibus at. Duis nec sapien non velit interdum malesuada. Duis venenatis tellus a metus varius condimentum. Integer fringilla volutpat leo ut rutrum. Aenean gravida rhoncus mattis. Nam at convallis magna. In turpis erat, mattis et lorem sed, euismod mattis nisl. Quisque eleifend convallis massa ut semper. In elementum rhoncus massa ut fermentum. Mauris pharetra libero mi, in pretium quam vehicula in. Pellentesque et lobortis felis. Suspendisse ultrices id urna sit amet semper.
Sed suscipit faucibus massa. Fusce elementum interdum leo, ut viverra libero eleifend at. In non placerat magna. Integer scelerisque molestie dapibus. Duis tincidunt diam neque, a ullamcorper libero accumsan eget. Aliquam rhoncus diam aliquet, interdum mauris sed, hendrerit risus. Aliquam erat volutpat. Mauris euismod accumsan neque vel gravida. Aenean facilisis augue at metus ultrices, convallis eleifend lectus fringilla. Nunc porta dictum scelerisque. Morbi quis nibh vel leo sodales egestas vitae ut ligula. Quisque eu pellentesque massa. Vivamus tristique rhoncus diam, at fringilla eros fringilla at. Fusce sit amet diam lectus. Cras blandit diam id odio bibendum, et blandit risus condimentum.
Aenean porta orci id sollicitudin cursus. Pellentesque eget mauris scelerisque, efficitur odio nec, aliquet nibh. Nulla quam nisl, placerat non condimentum at, tempus non nibh. Integer faucibus ex mi, at rutrum neque auctor ut. Etiam feugiat elit lectus, ut lacinia mi rhoncus et. Mauris varius mattis metus. Integer in placerat justo, eu placerat dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sem et ipsum dignissim eleifend vitae at massa. In quis odio in orci blandit scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam neque tortor, luctus et massa non, porta egestas erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed enim metus. Aenean suscipit imperdiet magna, vel pulvinar mauris pretium a. Nullam eleifend erat a leo sollicitudin, non consequat quam egestas. Etiam sollicitudin lectus eu nibh laoreet dapibus. Phasellus vel dui auctor tortor interdum gravida a interdum dui. Cras dapibus dui arcu, nec condimentum arcu malesuada sed. Aliquam sit amet bibendum felis, nec condimentum quam. Aenean a arcu interdum, luctus ipsum vitae, dapibus sapien.
Aenean pharetra vestibulum eros ut porttitor. Etiam fringilla augue non purus sodales feugiat. Sed at nunc et risus tempor eleifend ac non orci. Mauris a rhoncus lacus. Quisque eget malesuada risus, sed vehicula mi. Duis elementum finibus interdum. In fringilla accumsan accumsan. Curabitur sit amet tempus dolor. Aliquam erat volutpat. Praesent at luctus orci. Ut eget odio dignissim, facilisis quam ut, pharetra dolor. Duis laoreet lectus nec aliquet condimentum. Ut in tellus semper, ultricies erat convallis, eleifend sem. Phasellus lacinia euismod nulla, ac egestas ipsum hendrerit eget. Sed lacinia metus sit amet sodales mattis.
Phasellus ac leo mattis, convallis dui vitae, ultricies diam. Nunc finibus arcu mauris, rhoncus tincidunt urna condimentum ut. Proin volutpat hendrerit mi, nec euismod lorem commodo in. Maecenas aliquam viverra lectus, quis euismod tortor dapibus at. Duis nec sapien non velit interdum malesuada. Duis venenatis tellus a metus varius condimentum. Integer fringilla volutpat leo ut rutrum. Aenean gravida rhoncus mattis. Nam at convallis magna. In turpis erat, mattis et lorem sed, euismod mattis nisl. Quisque eleifend convallis massa ut semper. In elementum rhoncus massa ut fermentum. Mauris pharetra libero mi, in pretium quam vehicula in. Pellentesque et lobortis felis. Suspendisse ultrices id urna sit amet semper.
Sed suscipit faucibus massa. Fusce elementum interdum leo, ut viverra libero eleifend at. In non placerat magna. Integer scelerisque molestie dapibus. Duis tincidunt diam neque, a ullamcorper libero accumsan eget. Aliquam rhoncus diam aliquet, interdum mauris sed, hendrerit risus. Aliquam erat volutpat. Mauris euismod accumsan neque vel gravida. Aenean facilisis augue at metus ultrices, convallis eleifend lectus fringilla. Nunc porta dictum scelerisque. Morbi quis nibh vel leo sodales egestas vitae ut ligula. Quisque eu pellentesque massa. Vivamus tristique rhoncus diam, at fringilla eros fringilla at. Fusce sit amet diam lectus. Cras blandit diam id odio bibendum, et blandit risus condimentum.
Aenean porta orci id sollicitudin cursus. Pellentesque eget mauris scelerisque, efficitur odio nec, aliquet nibh. Nulla quam nisl, placerat non condimentum at, tempus non nibh. Integer faucibus ex mi, at rutrum neque auctor ut. Etiam feugiat elit lectus, ut lacinia mi rhoncus et. Mauris varius mattis metus. Integer in placerat justo, eu placerat dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sem et ipsum dignissim eleifend vitae at massa. In quis odio in orci blandit scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam neque tortor, luctus et massa non, porta egestas erat.
</p>
</div> <!-- Page -->
</body>

As you mention, you need to add transition:all 0.8s ease to it, but you also need to set its initial height.
That is because the default value for height is auto and it cannot be animated.
Demo at https://jsfiddle.net/sbh5fkfx/1/

How to make partial scrolling div?

I really like what Google has done here:
https://developers.google.com/kml/articles/raster
How do I make something like the top header where there is a bar that doesn't change, but the "light aqua" div scrolls up then stops to "stack" right below the "dark aqua"? Is this possible with CSS alone?

You can use jQuery to do this. Google offset().top and scrollTop() functions in jQuery. The simple logic is, as the gap between an element and the top of the document reduces and reaches 0, just set the position of the element to fixed
$(document).ready(function()
{
window.holdOffset = $('#sticky_navigation').offset().top;
$(window).scroll(function()
{
sticky_navigation();
});
});
function sticky_navigation()
{
var scroll_top = $(window).scrollTop();
if (scroll_top > holdOffset)
$('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
else
$('#sticky_navigation').css({ 'position': 'relative' });
};
body
{
margin:0px;
}
p
{
margin-left:100px;
margin-right:100px;
}
#my_logo
{
font-size:80px;
}
#sticky_navigation_wrapper
{
width:100%;
height:50px;
}
#sticky_navigation
{
width:100%;
height:50px;
background:black;
}
#sticky_navigation ul
{
list-style:none;
margin:0;
padding:5px;
}
#sticky_navigation ul li a
{
display:block;
float:left;
margin:0 0 0 5px;
padding:0 20px;
height:40px;
font-size:24px;
color:#ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="demo.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="sticky-navigation.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<div id="demo_top_wrapper">
<div id="demo_top">
<div class="demo_container">
<div id="my_logo">Site Logo</div>
</div>
</div>
<div id="sticky_navigation_wrapper">
<div id="sticky_navigation">
<div class="demo_container">
<ul>
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
</ul>
</div>
</div>
</div>
</div>
<section id="main">
<div id="content">
<p><strong>Scroll down to see this navigation menu sticking to the top of the page.</strong></p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada convallis mauris in rutrum. Suspendisse dolor lorem, consequat sit amet rutrum at, cursus ut felis. Aliquam pellentesque sodales enim. Vivamus sed adipiscing arcu. Duis tincidunt iaculis lobortis. Sed laoreet mollis tempus. Nam cursus magna in mauris pellentesque vestibulum. Ut non risus a enim pellentesque tincidunt. Maecenas vulputate dolor eu sem convallis convallis. Nulla viverra pharetra tortor, eu adipiscing risus imperdiet a. Nam eu nibh vitae diam accumsan tempus vel eget nisl. Quisque et urna lacus, a mollis ipsum.
</p>
<p>
Mauris in augue elit, sed posuere justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lectus a eleifend tincidunt, urna sapien sodales magna, id dictum ipsum nisi non diam. Nam tempor interdum molestie. In vel sapien id augue varius adipiscing et at lectus. Ut et justo eget urna vulputate tempus in vitae est. Quisque imperdiet dapibus metus sit amet hendrerit. Proin sapien augue, suscipit quis blandit eget, pharetra eget orci. Integer massa lacus, pretium non vehicula sit amet, facilisis sed nisi. Donec ut dui et nunc volutpat laoreet ac a leo. In a dignissim dui. Phasellus pretium odio eget mi luctus a gravida nunc rutrum. Nullam nulla nisl, porta quis euismod eu, consectetur ut purus. Morbi consectetur tincidunt bibendum. Nam hendrerit tempor cursus.
</p>
<p>
Proin cursus, enim sodales elementum cursus, mi eros molestie justo, varius scelerisque ligula eros non diam. Donec malesuada, nisl vel venenatis egestas, orci dui euismod elit, facilisis vulputate arcu turpis vel tellus. Proin faucibus eleifend imperdiet. Quisque eu quam eget nunc dapibus lobortis. Aenean molestie mi et dolor lacinia id luctus ligula ultricies. Sed mauris velit, venenatis quis dapibus quis, pulvinar quis dolor. Mauris vitae lectus mi. Donec tincidunt sem eget lacus laoreet malesuada. Mauris aliquet faucibus diam, sed adipiscing metus rhoncus eu.
</p>
<p>
Sed sit amet ligula sed tellus laoreet auctor. In hac habitasse platea dictumst. Aenean at magna ut arcu vehicula euismod. Vestibulum mollis lobortis elementum. Curabitur pharetra, turpis vitae rhoncus condimentum, justo ligula condimentum nulla, non fringilla dolor felis ullamcorper velit. Nullam posuere porta enim non lacinia. Vivamus eu ipsum vel metus faucibus adipiscing sit amet sed mauris. Suspendisse mauris mauris, consectetur egestas interdum ut, blandit non magna. Proin quis gravida felis. Nunc neque lorem, facilisis nec scelerisque sed, condimentum rhoncus nunc. Aenean semper rutrum lectus vel porttitor. Vivamus sodales consectetur porttitor. Vestibulum quis rhoncus tellus. Aenean ut dignissim risus.
</p>
<p>
Mauris in augue elit, sed posuere justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lectus a eleifend tincidunt, urna sapien sodales magna, id dictum ipsum nisi non diam. Nam tempor interdum molestie. In vel sapien id augue varius adipiscing et at lectus. Ut et justo eget urna vulputate tempus in vitae est. Quisque imperdiet dapibus metus sit amet hendrerit. Proin sapien augue, suscipit quis blandit eget, pharetra eget orci. Integer massa lacus, pretium non vehicula sit amet, facilisis sed nisi. Donec ut dui et nunc volutpat laoreet ac a leo. In a dignissim dui. Phasellus pretium odio eget mi luctus a gravida nunc rutrum. Nullam nulla nisl, porta quis euismod eu, consectetur ut purus. Morbi consectetur tincidunt bibendum. Nam hendrerit tempor cursus.
</p>
<p>
Proin cursus, enim sodales elementum cursus, mi eros molestie justo, varius scelerisque ligula eros non diam. Donec malesuada, nisl vel venenatis egestas, orci dui euismod elit, facilisis vulputate arcu turpis vel tellus. Proin faucibus eleifend imperdiet. Quisque eu quam eget nunc dapibus lobortis. Aenean molestie mi et dolor lacinia id luctus ligula ultricies. Sed mauris velit, venenatis quis dapibus quis, pulvinar quis dolor. Mauris vitae lectus mi. Donec tincidunt sem eget lacus laoreet malesuada. Mauris aliquet faucibus diam, sed adipiscing metus rhoncus eu.
</p>
<p>
Sed sit amet ligula sed tellus laoreet auctor. In hac habitasse platea dictumst. Aenean at magna ut arcu vehicula euismod. Vestibulum mollis lobortis elementum. Curabitur pharetra, turpis vitae rhoncus condimentum, justo ligula condimentum nulla, non fringilla dolor felis ullamcorper velit. Nullam posuere porta enim non lacinia. Vivamus eu ipsum vel metus faucibus adipiscing sit amet sed mauris. Suspendisse mauris mauris, consectetur egestas interdum ut, blandit non magna. Proin quis gravida felis. Nunc neque lorem, facilisis nec scelerisque sed, condimentum rhoncus nunc. Aenean semper rutrum lectus vel porttitor. Vivamus sodales consectetur porttitor. Vestibulum quis rhoncus tellus. Aenean ut dignissim risus.
</p>
<p>
Proin cursus, enim sodales elementum cursus, mi eros molestie justo, varius scelerisque ligula eros non diam. Donec malesuada, nisl vel venenatis egestas, orci dui euismod elit, facilisis vulputate arcu turpis vel tellus. Proin faucibus eleifend imperdiet. Quisque eu quam eget nunc dapibus lobortis. Aenean molestie mi et dolor lacinia id luctus ligula ultricies. Sed mauris velit, venenatis quis dapibus quis, pulvinar quis dolor. Mauris vitae lectus mi. Donec tincidunt sem eget lacus laoreet malesuada. Mauris aliquet faucibus diam, sed adipiscing metus rhoncus eu.
</p>
<p>
Sed sit amet ligula sed tellus laoreet auctor. In hac habitasse platea dictumst. Aenean at magna ut arcu vehicula euismod. Vestibulum mollis lobortis elementum. Curabitur pharetra, turpis vitae rhoncus condimentum, justo ligula condimentum nulla, non fringilla dolor felis ullamcorper velit. Nullam posuere porta enim non lacinia. Vivamus eu ipsum vel metus faucibus adipiscing sit amet sed mauris. Suspendisse mauris mauris, consectetur egestas interdum ut, blandit non magna. Proin quis gravida felis. Nunc neque lorem, facilisis nec scelerisque sed, condimentum rhoncus nunc. Aenean semper rutrum lectus vel porttitor. Vivamus sodales consectetur porttitor. Vestibulum quis rhoncus tellus. Aenean ut dignissim risus.
</p>
</div>
</section>
<script type="text/javascript" src="myscript.js"></script>
</body>
</html>

How to div scroll

<div class="btn-toggle">
<div class="description ">
<div class="Area" style="height: auto; visibility: visible; overflow: hidden;">
<div class="scrollbar" style="height: 340px;">
<div class="watch" style="height: 340px;">
<div class="round" style="height: 100px; top: 0px;"></div>
</div>
</div>
While running selenium code, need to scroll to the bottom of the div. How do update "style =height: 100px; top: 100px;".
How to accomplish this using Javascript?

Sorry there was little confusion ,but not not now. check out fiddle .See style properly.
Working fiddle
Use the following code , say you want to scroll to bottom of "round" div,
var scr = $('#box')[0].scrollHeight;
$('#box').animate({scrollTop: scr},2000);
CSS :
#box{
overflow:auto;
width:300px;
height:200px;
}
Say HTML is
<div id="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non tellus nisi, at euismod lacus. Praesent elementum, purus vitae imperdiet bibendum, erat nisl congue libero, vitae bibendum diam quam sed orci. Integer magna justo, dapibus et sagittis et, porta sit amet augue. Ut sed felis et odio egestas sodales eget vel sapien. Vivamus laoreet fermentum odio, eu fringilla nisi pulvinar at. Cras quis mauris erat, et varius massa. Aenean sit amet consequat purus. Aenean at lectus sem.
Donec lobortis pulvinar ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae turpis massa, quis vehicula mauris. Fusce in ante libero. Aliquam consectetur suscipit dui eu vestibulum. Aenean felis purus, volutpat et sollicitudin at, feugiat non odio. Sed feugiat, augue non volutpat congue, ipsum magna vehicula dolor, non ornare mi mauris nec ipsum. Integer sed odio eget nisl posuere porttitor vitae suscipit lectus. Cras vehicula, justo nec ornare rhoncus, enim urna euismod justo, quis scelerisque metus dolor at leo.
Maecenas non elit sapien. Proin fringilla pellentesque ultrices. Proin rhoncus eleifend nisl, nec consequat dui porta id. Aliquam ut erat libero. Integer at tristique est. Duis iaculis, augue vel tempus congue, elit mi pellentesque felis, ut interdum risus tortor vitae nulla. Praesent malesuada mattis fermentum. Donec luctus pharetra nem, erat nisl congue libero, vitae bibendum diam quam sed orci. Integer magna justo, dapibus et sagittis et, porta sit amet augue. Ut sed felis et odio egestas sodales eget vel sapien. Vivamus laoreet fermentum odio, eu fringilla nisi pulvinar at. Cras quis mauris erat, et varius massa. Aenean sit amet consequat purus. Aenean at lectus sem.
Donec lobortis pulvinar ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae turpis massa, quis vehicula mauris. Fusce in ante libero. Aliquam consectetur suscipit dui eu vestibulum. Aenean felis purus, volutpat et sollicitudin at, feugiat non odio. Sed feugiat, augue non volutpat congue, ipsum magna vehicula dolor, non ornare mi mauris nec ipsum. Integer sed odio eget nisl posuere porttitor vitae suscipit lectus. Cras vehicula, justo nec ornare rhoncus, enim urna euismod justo, quis scelerisque metus dolor at leo.
Maecenas non elit sapien. Proin fringilla pellentesque ultrices. Proin rhoncus eleifend nisl, nec consequat dui porta id. Aliquam ut erat libero. Integer at tristique est. Duis iaculis, augue vel tempus congue, elit mi pellentesque felis, ut interdum risus tortor vitae nulla. Praesent malesuada mattis fermentum. Donec luctus pharetra nem, erat nisl congue libero, vitae bibendum diam quam sed orci. Integer magna justo, dapibus et sagittis et, porta sit amet augue. Ut sed felis et odio egestas sodales eget vel sapien. Vivamus laoreet fermentum odio, eu fringilla nisi pulvinar at. Cras quis mauris erat, et varius massa. Aenean sit amet consequat purus. Aenean at lectus sem.
Donec lobortis pulvinar ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae turpis massa, quis vehicula mauris. Fusce in ante libero. Aliquam consectetur suscipit dui eu vestibulum. Aenean felis purus, volutpat et sollicitudin at, feugiat non odio. Sed feugiat, augue non volutpat congue, ipsum magna vehicula dolor, non ornare mi mauris nec ipsum. Integer sed odio eget nisl posuere porttitor vitae suscipit lectus. Cras vehicula, justo nec ornare rhoncus, enim urna euismod justo, quis scelerisque metus dolor at leo.
Maecenas non elit sapien. Proin fringilla pellentesque ultrices. Proin rhoncus eleifend nisl, nec consequat dui porta id. Aliquam ut erat libero. Integer at tristique est. Duis iaculis, augue vel tempus congue, elit mi pellentesque felis, ut interdum risus tortor vitae nulla. Praesent malesuada mattis fermentum. Donec luctus pharetra nem, erat nisl congue libero, vitae bibendum diam quam sed orci. Integer magna justo, dapibus et sagittis et, porta sit amet augue. Ut sed felis et odio egestas sodales eget vel sapien. Vivamus laoreet fermentum odio, eu fringilla nisi pulvinar at. Cras quis mauris erat, et varius massa. Aenean sit amet consequat purus. Aenean at lectus sem.
Donec lobortis pulvinar ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae turpis massa, quis vehicula mauris. Fusce in ante libero. Aliquam consectetur suscipit dui eu vestibulum. Aenean felis purus, volutpat et sollicitudin at, feugiat non odio. Sed feugiat, augue non volutpat congue, ipsum magna vehicula dolor, non ornare mi mauris nec ipsum. Integer sed odio eget nisl posuere porttitor vitae suscipit lectus. Cras vehicula, justo nec ornare rhoncus, enim urna euismod justo, quis scelerisque metus dolor at leo.
Maecenas non elit sapien. Proin fringilla pellentesque ultrices. Proin rhoncus eleifend nisl, nec consequat dui porta id. Aliquam ut erat libero. Integer at tristique est. Duis iaculis, augue vel tempus congue, elit mi pellentesque felis, ut interdum risus tortor vitae nulla. Praesent malesuada mattis fermentum. Donec luctus pharetra nem, erat nisl congue libero, vitae bibendum diam quam sed orci. Integer magna justo, dapibus et sagittis et, porta sit amet augue. Ut sed felis et odio egestas sodales eget vel sapien. Vivamus laoreet fermentum odio, eu fringilla nisi pulvinar at. Cras quis mauris erat, et varius massa. Aenean sit amet consequat purus. Aenean at lectus sem.
Donec lobortis pulvinar ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae turpis massa, quis vehicula mauris. Fusce in ante libero. Aliquam consectetur suscipit dui eu vestibulum. Aenean felis purus, volutpat et sollicitudin at, feugiat non odio. Sed feugiat, augue non volutpat congue, ipsum magna vehicula dolor, non ornare mi mauris nec ipsum. Integer sed odio eget nisl posuere porttitor vitae suscipit lectus. Cras vehicula, justo nec ornare rhoncus, enim urna euismod justo, quis scelerisque metus dolor at leo.
Maecenas non elit sapien. Proin fringilla pellentesque ultrices. Proin rhoncus eleifend nisl, nec consequat dui porta id. Aliquam ut erat libero. Integer at tristique est. Duis iaculis, augue vel tempus congue, elit mi pellentesque felis, ut interdum risus tortor vitae nulla. Praesent malesuada mattis fermentum. Donec luctus pharetra neque, non dignissim sem condimentum vitae. Quisque varius nibh nec felis facilisis nec consectetur augue ultrices.
Nullam ut arcu nisi, eu volutpat neque. Etiam lobortis, erat vel mollis aliquam, sapien eros bibendum erat, vel mollis purus neque sit amet quam. Proin semper aliquet leo. Morbi erat ipsum, vehicula eget mattis sed, venenatis in lectus. Cras quis dui nunc. Vestibulum viverra tempus nisl pulvinar tempor. Donec vitae nunc quam, eu placerat nulla. Suspendisse potenti. Nulla ante dolor, varius eget porttitor eu, malesuada vel nisl. Vestibulum in justo eros. Maecenas id lorem metus, et auctor nibh. Maecenas ut porttitor felis.
Praesent blandit elementum fringilla. Curabitur tincidunt, libero in convallis volutpat, enim purus sodales lacus, vel euismod ante erat nec est. Nam non metus quis lorem ornare dictum sit amet et mauris. Curabitur molestie porta tortor vel adipiscing. Pellentesque sed nulla vel neque tempor sodales. Aliquam erat volutpat. Nullam nisl mauris, faucibus at blandit mollis, malesuada eu risus. Nunc urna lacus, egestas et euismod non, vehicula sed ligula.
</div>

Categories

Resources