Select an option in javascript and search for the paragraph - javascript

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>

Related

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 make image stick to the bottom of section on all device heights

I want to make this image to be on the bottom of this section (section 18) of one page website (which has 21 section) for all devices heights using jQuery.
I made it by using position: absolute etc. but just on my screen size. When I check that on other devices that have different heights, it's not stuck to the bottom.
You can try this.
.imagebottom{
position:fixed;
bottom:0px;
left:50%;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et urna enim. Nunc ac ligula sed augue vehicula consectetur a quis justo. Pellentesque viverra nisi turpis, convallis interdum ex lobortis nec. Fusce eget sem pellentesque, sagittis metus sed, euismod diam. Donec pharetra sed neque eget eleifend. Sed varius ultricies orci, vel volutpat massa hendrerit vel. Curabitur euismod tempor porta. Nulla at ligula id quam elementum vulputate. Nullam blandit sem in congue tincidunt. Etiam at vehicula ante. Suspendisse nec pulvinar libero. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean dignissim neque et arcu convallis dictum ac in lectus. Etiam maximus felis eget arcu maximus, non lacinia massa scelerisque. In mollis eros vel ex blandit, eget vestibulum quam facilisis. Sed vulputate porta pharetra. Quisque id sapien nec urna iaculis porttitor sit amet in nibh. Integer vel nisl sit amet arcu dictum auctor. Maecenas condimentum nulla vel maximus ullamcorper. Morbi malesuada, lacus non pellentesque condimentum, magna odio accumsan nisi, nec mollis nunc nibh at orci. Nulla venenatis ante quis eros fermentum, eget maximus risus ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Pellentesque commodo neque et neque ultricies venenatis. Morbi justo ligula, sodales a molestie a, elementum ac quam. Sed a dui ac lacus mattis vestibulum id non ante. Phasellus efficitur vehicula pellentesque. Phasellus id porta risus, eget posuere libero. Praesent tristique tortor vel nunc aliquam, lacinia finibus augue mollis. Ut condimentum sollicitudin metus, id lacinia odio cursus ut. Integer iaculis tempor nulla vel posuere.
Etiam non erat velit. Mauris ac sodales orci. Etiam posuere quam et gravida cursus. Mauris lacinia auctor ipsum in vehicula. Sed quis dictum enim. Ut eleifend erat sit amet est egestas, nec consequat orci laoreet. Suspendisse potenti. Etiam egestas quam ut augue efficitur, in sagittis quam tempor. Suspendisse sagittis blandit elit at pretium. Ut turpis dolor, lacinia sit amet ex id, ultricies pretium dui. Pellentesque posuere nec elit nec sagittis. Ut ut efficitur nisl. Nam placerat arcu eros, a facilisis massa elementum et. Maecenas et gravida nunc.
Vestibulum metus urna, placerat ac iaculis at, blandit vitae ante. Ut porta bibendum massa, varius rhoncus odio. Proin libero tortor, tincidunt sit amet mi nec, aliquam fermentum augue. Praesent sed efficitur metus. Phasellus accumsan, velit vel ornare auctor, nisi diam condimentum risus, sit amet ultricies est lacus vitae lectus. Etiam mattis lectus eu nunc lobortis efficitur. Nunc dui mauris, iaculis vitae dignissim in, ullamcorper vel odio. Sed gravida enim eu ex scelerisque, ut sagittis lacus ullamcorper. Fusce aliquet maximus lorem laoreet posuere. Nam tristique nisi ullamcorper felis tempus pulvinar.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et urna enim. Nunc ac ligula sed augue vehicula consectetur a quis justo. Pellentesque viverra nisi turpis, convallis interdum ex lobortis nec. Fusce eget sem pellentesque, sagittis metus sed, euismod diam. Donec pharetra sed neque eget eleifend. Sed varius ultricies orci, vel volutpat massa hendrerit vel. Curabitur euismod tempor porta. Nulla at ligula id quam elementum vulputate. Nullam blandit sem in congue tincidunt. Etiam at vehicula ante. Suspendisse nec pulvinar libero. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean dignissim neque et arcu convallis dictum ac in lectus. Etiam maximus felis eget arcu maximus, non lacinia massa scelerisque. In mollis eros vel ex blandit, eget vestibulum quam facilisis. Sed vulputate porta pharetra. Quisque id sapien nec urna iaculis porttitor sit amet in nibh. Integer vel nisl sit amet arcu dictum auctor. Maecenas condimentum nulla vel maximus ullamcorper. Morbi malesuada, lacus non pellentesque condimentum, magna odio accumsan nisi, nec mollis nunc nibh at orci. Nulla venenatis ante quis eros fermentum, eget maximus risus ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Pellentesque commodo neque et neque ultricies venenatis. Morbi justo ligula, sodales a molestie a, elementum ac quam. Sed a dui ac lacus mattis vestibulum id non ante. Phasellus efficitur vehicula pellentesque. Phasellus id porta risus, eget posuere libero. Praesent tristique tortor vel nunc aliquam, lacinia finibus augue mollis. Ut condimentum sollicitudin metus, id lacinia odio cursus ut. Integer iaculis tempor nulla vel posuere.
Etiam non erat velit. Mauris ac sodales orci. Etiam posuere quam et gravida cursus. Mauris lacinia auctor ipsum in vehicula. Sed quis dictum enim. Ut eleifend erat sit amet est egestas, nec consequat orci laoreet. Suspendisse potenti. Etiam egestas quam ut augue efficitur, in sagittis quam tempor. Suspendisse sagittis blandit elit at pretium. Ut turpis dolor, lacinia sit amet ex id, ultricies pretium dui. Pellentesque posuere nec elit nec sagittis. Ut ut efficitur nisl. Nam placerat arcu eros, a facilisis massa elementum et. Maecenas et gravida nunc.
Vestibulum metus urna, placerat ac iaculis at, blandit vitae ante. Ut porta bibendum massa, varius rhoncus odio. Proin libero tortor, tincidunt sit amet mi nec, aliquam fermentum augue. Praesent sed efficitur metus. Phasellus accumsan, velit vel ornare auctor, nisi diam condimentum risus, sit amet ultricies est lacus vitae lectus. Etiam mattis lectus eu nunc lobortis efficitur. Nunc dui mauris, iaculis vitae dignissim in, ullamcorper vel odio. Sed gravida enim eu ex scelerisque, ut sagittis lacus ullamcorper. Fusce aliquet maximus lorem laoreet posuere. Nam tristique nisi ullamcorper felis tempus pulvinar.
</div>
<img src="https://i.stack.imgur.com/igp05.png" class="imagebottom"/>
Use position: sticky instead of position: fixed. A sticky element always sticks to its nearest ancestor element which in your case is the 18th section of your website.
.imagebottom{
position: sticky;
bottom:0px;
height: 50px;
}
<div>
<h2>Section 17</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et urna enim. Nunc ac ligula sed augue vehicula consectetur a quis justo. Pellentesque viverra nisi turpis, convallis interdum ex lobortis nec. Fusce eget sem pellentesque, sagittis metus sed, euismod diam. Donec pharetra sed neque eget eleifend. Sed varius ultricies orci, vel volutpat massa hendrerit vel. Curabitur euismod tempor porta. Nulla at ligula id quam elementum vulputate. Nullam blandit sem in congue tincidunt. Etiam at vehicula ante. Suspendisse nec pulvinar libero. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean dignissim neque et arcu convallis dictum ac in lectus. Etiam maximus felis eget arcu maximus, non lacinia massa scelerisque. In mollis eros vel ex blandit, eget vestibulum quam facilisis. Sed vulputate porta pharetra. Quisque id sapien nec urna iaculis porttitor sit amet in nibh. Integer vel nisl sit amet arcu dictum auctor. Maecenas condimentum nulla vel maximus ullamcorper. Morbi malesuada, lacus non pellentesque condimentum, magna odio accumsan nisi, nec mollis nunc nibh at orci. Nulla venenatis ante quis eros fermentum, eget maximus risus ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Pellentesque commodo neque et neque ultricies venenatis. Morbi justo ligula, sodales a molestie a, elementum ac quam. Sed a dui ac lacus mattis vestibulum id non ante. Phasellus efficitur vehicula pellentesque. Phasellus id porta risus, eget posuere libero. Praesent tristique tortor vel nunc aliquam, lacinia finibus augue mollis. Ut condimentum sollicitudin metus, id lacinia odio cursus ut. Integer iaculis tempor nulla vel posuere.
Etiam non erat velit. Mauris ac sodales orci. Etiam posuere quam et gravida cursus. Mauris lacinia auctor ipsum in vehicula. Sed quis dictum enim. Ut eleifend erat sit amet est egestas, nec consequat orci laoreet. Suspendisse potenti. Etiam egestas quam ut augue efficitur, in sagittis quam tempor. Suspendisse sagittis blandit elit at pretium. Ut turpis dolor, lacinia sit amet ex id, ultricies pretium dui. Pellentesque posuere nec elit nec sagittis. Ut ut efficitur nisl. Nam placerat arcu eros, a facilisis massa elementum et. Maecenas et gravida nunc.
Vestibulum metus urna, placerat ac iaculis at, blandit vitae ante. Ut porta bibendum massa, varius rhoncus odio. Proin libero tortor, tincidunt sit amet mi nec, aliquam fermentum augue. Praesent sed efficitur metus. Phasellus accumsan, velit vel ornare auctor, nisi diam condimentum risus, sit amet ultricies est lacus vitae lectus. Etiam mattis lectus eu nunc lobortis efficitur. Nunc dui mauris, iaculis vitae dignissim in, ullamcorper vel odio. Sed gravida enim eu ex scelerisque, ut sagittis lacus ullamcorper. Fusce aliquet maximus lorem laoreet posuere. Nam tristique nisi ullamcorper felis tempus pulvinar.
</div>
<br />
<hr />
<br />
<div>
<h2>Section 18</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et urna enim. Nunc ac ligula sed augue vehicula consectetur a quis justo. Pellentesque viverra nisi turpis, convallis interdum ex lobortis nec. Fusce eget sem pellentesque, sagittis metus sed, euismod diam. Donec pharetra sed neque eget eleifend. Sed varius ultricies orci, vel volutpat massa hendrerit vel. Curabitur euismod tempor porta. Nulla at ligula id quam elementum vulputate. Nullam blandit sem in congue tincidunt. Etiam at vehicula ante. Suspendisse nec pulvinar libero. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean dignissim neque et arcu convallis dictum ac in lectus. Etiam maximus felis eget arcu maximus, non lacinia massa scelerisque. In mollis eros vel ex blandit, eget vestibulum quam facilisis. Sed vulputate porta pharetra. Quisque id sapien nec urna iaculis porttitor sit amet in nibh. Integer vel nisl sit amet arcu dictum auctor. Maecenas condimentum nulla vel maximus ullamcorper. Morbi malesuada, lacus non pellentesque condimentum, magna odio accumsan nisi, nec mollis nunc nibh at orci. Nulla venenatis ante quis eros fermentum, eget maximus risus ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Pellentesque commodo neque et neque ultricies venenatis. Morbi justo ligula, sodales a molestie a, elementum ac quam. Sed a dui ac lacus mattis vestibulum id non ante. Phasellus efficitur vehicula pellentesque. Phasellus id porta risus, eget posuere libero. Praesent tristique tortor vel nunc aliquam, lacinia finibus augue mollis. Ut condimentum sollicitudin metus, id lacinia odio cursus ut. Integer iaculis tempor nulla vel posuere.
Etiam non erat velit. Mauris ac sodales orci. Etiam posuere quam et gravida cursus. Mauris lacinia auctor ipsum in vehicula. Sed quis dictum enim. Ut eleifend erat sit amet est egestas, nec consequat orci laoreet. Suspendisse potenti. Etiam egestas quam ut augue efficitur, in sagittis quam tempor. Suspendisse sagittis blandit elit at pretium. Ut turpis dolor, lacinia sit amet ex id, ultricies pretium dui. Pellentesque posuere nec elit nec sagittis. Ut ut efficitur nisl. Nam placerat arcu eros, a facilisis massa elementum et. Maecenas et gravida nunc.
Vestibulum metus urna, placerat ac iaculis at, blandit vitae ante. Ut porta bibendum massa, varius rhoncus odio. Proin libero tortor, tincidunt sit amet mi nec, aliquam fermentum augue. Praesent sed efficitur metus. Phasellus accumsan, velit vel ornare auctor, nisi diam condimentum risus, sit amet ultricies est lacus vitae lectus. Etiam mattis lectus eu nunc lobortis efficitur. Nunc dui mauris, iaculis vitae dignissim in, ullamcorper vel odio. Sed gravida enim eu ex scelerisque, ut sagittis lacus ullamcorper. Fusce aliquet maximus lorem laoreet posuere. Nam tristique nisi ullamcorper felis tempus pulvinar.
</p>
<img src="https://i.stack.imgur.com/igp05.png" class="imagebottom"/>
</div>
<br />
<hr />
<br />
<div>
<h2>Section 19</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et urna enim. Nunc ac ligula sed augue vehicula consectetur a quis justo. Pellentesque viverra nisi turpis, convallis interdum ex lobortis nec. Fusce eget sem pellentesque, sagittis metus sed, euismod diam. Donec pharetra sed neque eget eleifend. Sed varius ultricies orci, vel volutpat massa hendrerit vel. Curabitur euismod tempor porta. Nulla at ligula id quam elementum vulputate. Nullam blandit sem in congue tincidunt. Etiam at vehicula ante. Suspendisse nec pulvinar libero. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean dignissim neque et arcu convallis dictum ac in lectus. Etiam maximus felis eget arcu maximus, non lacinia massa scelerisque. In mollis eros vel ex blandit, eget vestibulum quam facilisis. Sed vulputate porta pharetra. Quisque id sapien nec urna iaculis porttitor sit amet in nibh. Integer vel nisl sit amet arcu dictum auctor. Maecenas condimentum nulla vel maximus ullamcorper. Morbi malesuada, lacus non pellentesque condimentum, magna odio accumsan nisi, nec mollis nunc nibh at orci. Nulla venenatis ante quis eros fermentum, eget maximus risus ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Pellentesque commodo neque et neque ultricies venenatis. Morbi justo ligula, sodales a molestie a, elementum ac quam. Sed a dui ac lacus mattis vestibulum id non ante. Phasellus efficitur vehicula pellentesque. Phasellus id porta risus, eget posuere libero. Praesent tristique tortor vel nunc aliquam, lacinia finibus augue mollis. Ut condimentum sollicitudin metus, id lacinia odio cursus ut. Integer iaculis tempor nulla vel posuere.
Etiam non erat velit. Mauris ac sodales orci. Etiam posuere quam et gravida cursus. Mauris lacinia auctor ipsum in vehicula. Sed quis dictum enim. Ut eleifend erat sit amet est egestas, nec consequat orci laoreet. Suspendisse potenti. Etiam egestas quam ut augue efficitur, in sagittis quam tempor. Suspendisse sagittis blandit elit at pretium. Ut turpis dolor, lacinia sit amet ex id, ultricies pretium dui. Pellentesque posuere nec elit nec sagittis. Ut ut efficitur nisl. Nam placerat arcu eros, a facilisis massa elementum et. Maecenas et gravida nunc.
Vestibulum metus urna, placerat ac iaculis at, blandit vitae ante. Ut porta bibendum massa, varius rhoncus odio. Proin libero tortor, tincidunt sit amet mi nec, aliquam fermentum augue. Praesent sed efficitur metus. Phasellus accumsan, velit vel ornare auctor, nisi diam condimentum risus, sit amet ultricies est lacus vitae lectus. Etiam mattis lectus eu nunc lobortis efficitur. Nunc dui mauris, iaculis vitae dignissim in, ullamcorper vel odio. Sed gravida enim eu ex scelerisque, ut sagittis lacus ullamcorper. Fusce aliquet maximus lorem laoreet posuere. Nam tristique nisi ullamcorper felis tempus pulvinar.
</div>

My onscroll event is not firing my java script function

I'm trying to say in my code that if the user scrolls down 250px, I want the data-percent to go from 0% to 100% and this is done in "myFunction". I am still new to JS so I'm having trouble understanding why it's not working when I scroll past 250px. Any help would be much appreciated!
var div = document.getElementById('div1');
window.onscroll = myFunction();
function myFunction() {
if (document.body.scrollTop > 250 || document.documentElement.scrollTop > 250) {
div.getAttribute('data-percent').value = "100%";
} else {
div.getAttribute('data-percent').value = "";
}
}
<div id="div1" class="skillbar clearfix " data-percent="100%">
<div class="skillbar-title" style="background: #d35400;"><span>HTML5</span></div>
<div class="skillbar-bar" style="background: #e67e22;"></div>
<div class="skill-bar-percent">100%</div>
</div>
I expect the data-percent attribute to go from 0% to 100% when I scroll past 250px, and then back to 0% when I scroll back up.
I fixed the header to the top of the page so you could see it, and added some filler text to make it scroll, but the issue was that your code only called myFunction as soon as the page loaded - it wasn't doing anything else. You needed to change the call of myFunction into a reference to myFunction by removing the parentheses.
var div = document.getElementById('div1');
window.onscroll = myFunction;
function myFunction() {
if (document.body.scrollTop > 250 || document.documentElement.scrollTop > 250) {
div.getAttribute('data-percent').value = "100%";
div.querySelector(".skill-bar-percent").textContent = "100%";
} else {
div.getAttribute('data-percent').value = "";
div.querySelector(".skill-bar-percent").textContent = "0%";
}
}
<div id="div1" class="skillbar clearfix " data-percent="100%" style="position: fixed; top: 0; background-color: white; display: block;">
<div class="skillbar-title" style="background: #d35400;"><span>HTML5</span></div>
<div class="skillbar-bar" style="background: #e67e22;"></div>
<div class="skill-bar-percent">0%</div>
</div>
<br />
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus facilisis dolor, mollis consequat justo vestibulum in. Pellentesque ac laoreet turpis. Duis eget sodales elit. In eget eros vitae nibh laoreet viverra. Fusce tincidunt tortor id metus iaculis, in pulvinar urna consectetur. Nunc in leo non lacus volutpat rhoncus. Vestibulum aliquet tortor quis vehicula tempor. Vivamus faucibus orci nec condimentum consequat. Vestibulum vestibulum venenatis tincidunt. Donec non velit nulla. Nunc tellus est, feugiat quis interdum luctus, rhoncus non nisi. Aenean sagittis sed nisl sit amet vehicula. Nulla maximus at lacus eget tristique. Curabitur dignissim ligula et massa rhoncus, id lobortis odio dignissim. Sed ut dolor ac libero lacinia laoreet nec eu urna. Morbi justo lectus, ultrices ac tellus ut, lobortis semper risus.</p>
<p>Phasellus tempor dignissim odio, sodales vulputate metus facilisis sit amet. Maecenas vestibulum dapibus ipsum, nec bibendum neque tempor eget. Nunc ullamcorper, libero et semper condimentum, nibh mi pretium nisi, a hendrerit elit nunc sed metus. Duis lacinia quis dui ut interdum. In efficitur vitae magna sit amet aliquam. Pellentesque quis ullamcorper lorem. Etiam id ullamcorper velit. Suspendisse id tristique ante, suscipit facilisis nisl. Ut ac orci quis augue ornare egestas a id eros. Curabitur dictum eros mauris, lacinia vulputate diam dignissim at. Curabitur venenatis posuere lorem, non maximus lectus lobortis in.</p>
<p>Praesent in finibus purus. Maecenas nec rutrum mi. Donec molestie rhoncus ex vel laoreet. Duis id leo sit amet nisi tristique porta non at enim. Suspendisse eu pharetra lorem. Nunc posuere odio nisl, id iaculis felis fringilla ut. Proin aliquam sapien quis tortor vestibulum interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque gravida bibendum urna, tincidunt venenatis ligula egestas vitae. Fusce accumsan ligula et diam porta, id finibus felis vulputate.</p>
<p>Ut eleifend venenatis quam, vel ultricies diam vestibulum sit amet. Vestibulum accumsan eu felis et dictum. Cras turpis tellus, sodales ut nibh accumsan, rutrum ullamcorper ligula. Donec mollis sem eros, vitae finibus dui ullamcorper vel. Mauris sodales diam ut dictum mattis. Nam varius nisi ac efficitur dapibus. Nam dignissim, dolor at suscipit dignissim, ipsum eros mollis risus, eget facilisis lacus dolor id nisl. Vivamus dictum rutrum neque, vel accumsan lacus vulputate in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vel tortor sed mi faucibus egestas non maximus enim. Suspendisse sed mi sagittis, imperdiet felis sed, tristique nisi. Proin porta nisi at pretium volutpat. Quisque nec nisl dictum, dignissim erat sit amet, vestibulum dui.</p>
<p>Curabitur vitae consectetur felis. In quis ligula metus. Nunc mauris ex, viverra in suscipit in, ultricies id lorem. Sed ac libero at velit iaculis placerat vitae in odio. Sed tortor dui, lobortis nec pretium ut, ullamcorper a dui. Praesent congue erat sed ultrices pretium. Nullam consequat orci at ex aliquet, vitae aliquet lorem suscipit. Maecenas nisi purus, semper eu lorem vel, elementum dapibus quam. Suspendisse potenti. Nulla augue enim, vulputate a fringilla eget, sollicitudin nec turpis. Aenean vitae pulvinar ante. Nam ex dui, gravida a nunc sed, tristique lacinia sapien. Sed auctor laoreet nisl, et maximus risus. Fusce finibus bibendum mauris. Ut cursus euismod eros non dapibus. Sed luctus eleifend lorem venenatis aliquam.</p>
<p>Morbi volutpat velit vitae est molestie, nec porttitor orci tempus. Suspendisse lorem arcu, elementum sit amet diam sit amet, pharetra laoreet metus. Integer posuere sapien porta, placerat odio lobortis, sollicitudin augue. Integer mattis arcu est, gravida porta justo ultrices a. Etiam egestas in ante at interdum. Cras sodales at lectus nec interdum. Donec ac posuere ligula, id dictum lectus. Nullam et elit non nunc convallis pulvinar. Pellentesque vitae pulvinar ex. Etiam a mattis risus, vitae gravida neque.</p>
<p>Nullam vestibulum nisl a faucibus sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis gravida sem at aliquam. Vestibulum id enim suscipit, condimentum ipsum ut, egestas libero. Proin et leo ac eros hendrerit tincidunt dapibus ac urna. Integer tincidunt, est et faucibus malesuada, purus ligula ultricies velit, quis rutrum lacus quam non neque. Sed facilisis ipsum eget nisl consectetur sollicitudin. Donec sodales massa non quam ornare tristique. Suspendisse condimentum dui dolor, in ultrices leo laoreet non.</p>
<p>Morbi mattis, mi nec fringilla dignissim, nisl risus pharetra massa, in luctus sem magna at ex. Nullam aliquam ultricies dolor, eget maximus eros auctor sed. Suspendisse sodales orci a elementum dignissim. Maecenas vulputate pharetra nisl vel cursus. Sed sit amet molestie lacus. Etiam fringilla maximus velit at posuere. Vestibulum non metus non sapien molestie tempor. Ut tincidunt faucibus lectus. Aliquam scelerisque ligula vel dictum fermentum. Donec egestas velit consequat vehicula condimentum. Etiam semper rhoncus efficitur. Ut ut leo pretium nisi pharetra pharetra. Nullam elementum, metus at sollicitudin convallis, mauris eros sagittis justo, quis venenatis ante magna dignissim nisl. Donec sit amet tempus tellus, id ultrices quam. Aliquam dui dolor, placerat non metus ut, mattis imperdiet nisi. Maecenas ultrices felis lacus, ut mattis ipsum laoreet vitae.</p>
<p>Fusce commodo faucibus volutpat. Nulla tristique libero at mi ultricies, scelerisque lobortis risus accumsan. Vestibulum iaculis, est a blandit eleifend, lorem justo porttitor arcu, a feugiat arcu magna eget nulla. Mauris posuere massa vitae diam pretium placerat nec ut ex. Ut porttitor nisi sit amet felis eleifend, non fermentum nibh placerat. In molestie mi a mi rutrum tempus. Praesent fringilla semper mi, at accumsan lorem lobortis euismod.</p>
<p>Fusce fermentum interdum leo non auctor. In hac habitasse platea dictumst. Pellentesque lectus ante, vehicula ac blandit dictum, pulvinar non tortor. Ut faucibus erat luctus, convallis magna non, ornare dolor. Sed dictum, nunc non iaculis pharetra, mi nisl pretium libero, at tincidunt massa felis eu mauris. Maecenas sit amet lorem non enim finibus posuere. Ut pulvinar aliquam convallis. Maecenas eu purus nec tortor bibendum maximus in quis enim. Fusce vehicula leo non felis posuere aliquet. Nam aliquet mauris nec felis dictum, non semper diam efficitur. Duis blandit euismod vestibulum. Nulla quis leo venenatis, volutpat ex sit amet, vulputate enim. Morbi varius arcu id tortor egestas ornare. Etiam porttitor et elit et condimentum. Maecenas libero felis, consequat varius pharetra non, tempor eget lacus. Fusce vel volutpat ante, vel feugiat nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus facilisis dolor, mollis consequat justo vestibulum in. Pellentesque ac laoreet turpis. Duis eget sodales elit. In eget eros vitae nibh laoreet viverra. Fusce tincidunt tortor id metus iaculis, in pulvinar urna consectetur. Nunc in leo non lacus volutpat rhoncus. Vestibulum aliquet tortor quis vehicula tempor. Vivamus faucibus orci nec condimentum consequat. Vestibulum vestibulum venenatis tincidunt. Donec non velit nulla. Nunc tellus est, feugiat quis interdum luctus, rhoncus non nisi. Aenean sagittis sed nisl sit amet vehicula. Nulla maximus at lacus eget tristique. Curabitur dignissim ligula et massa rhoncus, id lobortis odio dignissim. Sed ut dolor ac libero lacinia laoreet nec eu urna. Morbi justo lectus, ultrices ac tellus ut, lobortis semper risus.</p>
<p>Phasellus tempor dignissim odio, sodales vulputate metus facilisis sit amet. Maecenas vestibulum dapibus ipsum, nec bibendum neque tempor eget. Nunc ullamcorper, libero et semper condimentum, nibh mi pretium nisi, a hendrerit elit nunc sed metus. Duis lacinia quis dui ut interdum. In efficitur vitae magna sit amet aliquam. Pellentesque quis ullamcorper lorem. Etiam id ullamcorper velit. Suspendisse id tristique ante, suscipit facilisis nisl. Ut ac orci quis augue ornare egestas a id eros. Curabitur dictum eros mauris, lacinia vulputate diam dignissim at. Curabitur venenatis posuere lorem, non maximus lectus lobortis in.</p>
<p>Praesent in finibus purus. Maecenas nec rutrum mi. Donec molestie rhoncus ex vel laoreet. Duis id leo sit amet nisi tristique porta non at enim. Suspendisse eu pharetra lorem. Nunc posuere odio nisl, id iaculis felis fringilla ut. Proin aliquam sapien quis tortor vestibulum interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque gravida bibendum urna, tincidunt venenatis ligula egestas vitae. Fusce accumsan ligula et diam porta, id finibus felis vulputate.</p>
<p>Ut eleifend venenatis quam, vel ultricies diam vestibulum sit amet. Vestibulum accumsan eu felis et dictum. Cras turpis tellus, sodales ut nibh accumsan, rutrum ullamcorper ligula. Donec mollis sem eros, vitae finibus dui ullamcorper vel. Mauris sodales diam ut dictum mattis. Nam varius nisi ac efficitur dapibus. Nam dignissim, dolor at suscipit dignissim, ipsum eros mollis risus, eget facilisis lacus dolor id nisl. Vivamus dictum rutrum neque, vel accumsan lacus vulputate in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vel tortor sed mi faucibus egestas non maximus enim. Suspendisse sed mi sagittis, imperdiet felis sed, tristique nisi. Proin porta nisi at pretium volutpat. Quisque nec nisl dictum, dignissim erat sit amet, vestibulum dui.</p>
<p>Curabitur vitae consectetur felis. In quis ligula metus. Nunc mauris ex, viverra in suscipit in, ultricies id lorem. Sed ac libero at velit iaculis placerat vitae in odio. Sed tortor dui, lobortis nec pretium ut, ullamcorper a dui. Praesent congue erat sed ultrices pretium. Nullam consequat orci at ex aliquet, vitae aliquet lorem suscipit. Maecenas nisi purus, semper eu lorem vel, elementum dapibus quam. Suspendisse potenti. Nulla augue enim, vulputate a fringilla eget, sollicitudin nec turpis. Aenean vitae pulvinar ante. Nam ex dui, gravida a nunc sed, tristique lacinia sapien. Sed auctor laoreet nisl, et maximus risus. Fusce finibus bibendum mauris. Ut cursus euismod eros non dapibus. Sed luctus eleifend lorem venenatis aliquam.</p>
<p>Morbi volutpat velit vitae est molestie, nec porttitor orci tempus. Suspendisse lorem arcu, elementum sit amet diam sit amet, pharetra laoreet metus. Integer posuere sapien porta, placerat odio lobortis, sollicitudin augue. Integer mattis arcu est, gravida porta justo ultrices a. Etiam egestas in ante at interdum. Cras sodales at lectus nec interdum. Donec ac posuere ligula, id dictum lectus. Nullam et elit non nunc convallis pulvinar. Pellentesque vitae pulvinar ex. Etiam a mattis risus, vitae gravida neque.</p>
<p>Nullam vestibulum nisl a faucibus sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis gravida sem at aliquam. Vestibulum id enim suscipit, condimentum ipsum ut, egestas libero. Proin et leo ac eros hendrerit tincidunt dapibus ac urna. Integer tincidunt, est et faucibus malesuada, purus ligula ultricies velit, quis rutrum lacus quam non neque. Sed facilisis ipsum eget nisl consectetur sollicitudin. Donec sodales massa non quam ornare tristique. Suspendisse condimentum dui dolor, in ultrices leo laoreet non.</p>
<p>Morbi mattis, mi nec fringilla dignissim, nisl risus pharetra massa, in luctus sem magna at ex. Nullam aliquam ultricies dolor, eget maximus eros auctor sed. Suspendisse sodales orci a elementum dignissim. Maecenas vulputate pharetra nisl vel cursus. Sed sit amet molestie lacus. Etiam fringilla maximus velit at posuere. Vestibulum non metus non sapien molestie tempor. Ut tincidunt faucibus lectus. Aliquam scelerisque ligula vel dictum fermentum. Donec egestas velit consequat vehicula condimentum. Etiam semper rhoncus efficitur. Ut ut leo pretium nisi pharetra pharetra. Nullam elementum, metus at sollicitudin convallis, mauris eros sagittis justo, quis venenatis ante magna dignissim nisl. Donec sit amet tempus tellus, id ultrices quam. Aliquam dui dolor, placerat non metus ut, mattis imperdiet nisi. Maecenas ultrices felis lacus, ut mattis ipsum laoreet vitae.</p>
<p>Fusce commodo faucibus volutpat. Nulla tristique libero at mi ultricies, scelerisque lobortis risus accumsan. Vestibulum iaculis, est a blandit eleifend, lorem justo porttitor arcu, a feugiat arcu magna eget nulla. Mauris posuere massa vitae diam pretium placerat nec ut ex. Ut porttitor nisi sit amet felis eleifend, non fermentum nibh placerat. In molestie mi a mi rutrum tempus. Praesent fringilla semper mi, at accumsan lorem lobortis euismod.</p>
<p>Fusce fermentum interdum leo non auctor. In hac habitasse platea dictumst. Pellentesque lectus ante, vehicula ac blandit dictum, pulvinar non tortor. Ut faucibus erat luctus, convallis magna non, ornare dolor. Sed dictum, nunc non iaculis pharetra, mi nisl pretium libero, at tincidunt massa felis eu mauris. Maecenas sit amet lorem non enim finibus posuere. Ut pulvinar aliquam convallis. Maecenas eu purus nec tortor bibendum maximus in quis enim. Fusce vehicula leo non felis posuere aliquet. Nam aliquet mauris nec felis dictum, non semper diam efficitur. Duis blandit euismod vestibulum. Nulla quis leo venenatis, volutpat ex sit amet, vulputate enim. Morbi varius arcu id tortor egestas ornare. Etiam porttitor et elit et condimentum. Maecenas libero felis, consequat varius pharetra non, tempor eget lacus. Fusce vel volutpat ante, vel feugiat nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus facilisis dolor, mollis consequat justo vestibulum in. Pellentesque ac laoreet turpis. Duis eget sodales elit. In eget eros vitae nibh laoreet viverra. Fusce tincidunt tortor id metus iaculis, in pulvinar urna consectetur. Nunc in leo non lacus volutpat rhoncus. Vestibulum aliquet tortor quis vehicula tempor. Vivamus faucibus orci nec condimentum consequat. Vestibulum vestibulum venenatis tincidunt. Donec non velit nulla. Nunc tellus est, feugiat quis interdum luctus, rhoncus non nisi. Aenean sagittis sed nisl sit amet vehicula. Nulla maximus at lacus eget tristique. Curabitur dignissim ligula et massa rhoncus, id lobortis odio dignissim. Sed ut dolor ac libero lacinia laoreet nec eu urna. Morbi justo lectus, ultrices ac tellus ut, lobortis semper risus.</p>
<p>Phasellus tempor dignissim odio, sodales vulputate metus facilisis sit amet. Maecenas vestibulum dapibus ipsum, nec bibendum neque tempor eget. Nunc ullamcorper, libero et semper condimentum, nibh mi pretium nisi, a hendrerit elit nunc sed metus. Duis lacinia quis dui ut interdum. In efficitur vitae magna sit amet aliquam. Pellentesque quis ullamcorper lorem. Etiam id ullamcorper velit. Suspendisse id tristique ante, suscipit facilisis nisl. Ut ac orci quis augue ornare egestas a id eros. Curabitur dictum eros mauris, lacinia vulputate diam dignissim at. Curabitur venenatis posuere lorem, non maximus lectus lobortis in.</p>
<p>Praesent in finibus purus. Maecenas nec rutrum mi. Donec molestie rhoncus ex vel laoreet. Duis id leo sit amet nisi tristique porta non at enim. Suspendisse eu pharetra lorem. Nunc posuere odio nisl, id iaculis felis fringilla ut. Proin aliquam sapien quis tortor vestibulum interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque gravida bibendum urna, tincidunt venenatis ligula egestas vitae. Fusce accumsan ligula et diam porta, id finibus felis vulputate.</p>
<p>Ut eleifend venenatis quam, vel ultricies diam vestibulum sit amet. Vestibulum accumsan eu felis et dictum. Cras turpis tellus, sodales ut nibh accumsan, rutrum ullamcorper ligula. Donec mollis sem eros, vitae finibus dui ullamcorper vel. Mauris sodales diam ut dictum mattis. Nam varius nisi ac efficitur dapibus. Nam dignissim, dolor at suscipit dignissim, ipsum eros mollis risus, eget facilisis lacus dolor id nisl. Vivamus dictum rutrum neque, vel accumsan lacus vulputate in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vel tortor sed mi faucibus egestas non maximus enim. Suspendisse sed mi sagittis, imperdiet felis sed, tristique nisi. Proin porta nisi at pretium volutpat. Quisque nec nisl dictum, dignissim erat sit amet, vestibulum dui.</p>
<p>Curabitur vitae consectetur felis. In quis ligula metus. Nunc mauris ex, viverra in suscipit in, ultricies id lorem. Sed ac libero at velit iaculis placerat vitae in odio. Sed tortor dui, lobortis nec pretium ut, ullamcorper a dui. Praesent congue erat sed ultrices pretium. Nullam consequat orci at ex aliquet, vitae aliquet lorem suscipit. Maecenas nisi purus, semper eu lorem vel, elementum dapibus quam. Suspendisse potenti. Nulla augue enim, vulputate a fringilla eget, sollicitudin nec turpis. Aenean vitae pulvinar ante. Nam ex dui, gravida a nunc sed, tristique lacinia sapien. Sed auctor laoreet nisl, et maximus risus. Fusce finibus bibendum mauris. Ut cursus euismod eros non dapibus. Sed luctus eleifend lorem venenatis aliquam.</p>
<p>Morbi volutpat velit vitae est molestie, nec porttitor orci tempus. Suspendisse lorem arcu, elementum sit amet diam sit amet, pharetra laoreet metus. Integer posuere sapien porta, placerat odio lobortis, sollicitudin augue. Integer mattis arcu est, gravida porta justo ultrices a. Etiam egestas in ante at interdum. Cras sodales at lectus nec interdum. Donec ac posuere ligula, id dictum lectus. Nullam et elit non nunc convallis pulvinar. Pellentesque vitae pulvinar ex. Etiam a mattis risus, vitae gravida neque.</p>
<p>Nullam vestibulum nisl a faucibus sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis gravida sem at aliquam. Vestibulum id enim suscipit, condimentum ipsum ut, egestas libero. Proin et leo ac eros hendrerit tincidunt dapibus ac urna. Integer tincidunt, est et faucibus malesuada, purus ligula ultricies velit, quis rutrum lacus quam non neque. Sed facilisis ipsum eget nisl consectetur sollicitudin. Donec sodales massa non quam ornare tristique. Suspendisse condimentum dui dolor, in ultrices leo laoreet non.</p>
<p>Morbi mattis, mi nec fringilla dignissim, nisl risus pharetra massa, in luctus sem magna at ex. Nullam aliquam ultricies dolor, eget maximus eros auctor sed. Suspendisse sodales orci a elementum dignissim. Maecenas vulputate pharetra nisl vel cursus. Sed sit amet molestie lacus. Etiam fringilla maximus velit at posuere. Vestibulum non metus non sapien molestie tempor. Ut tincidunt faucibus lectus. Aliquam scelerisque ligula vel dictum fermentum. Donec egestas velit consequat vehicula condimentum. Etiam semper rhoncus efficitur. Ut ut leo pretium nisi pharetra pharetra. Nullam elementum, metus at sollicitudin convallis, mauris eros sagittis justo, quis venenatis ante magna dignissim nisl. Donec sit amet tempus tellus, id ultrices quam. Aliquam dui dolor, placerat non metus ut, mattis imperdiet nisi. Maecenas ultrices felis lacus, ut mattis ipsum laoreet vitae.</p>
<p>Fusce commodo faucibus volutpat. Nulla tristique libero at mi ultricies, scelerisque lobortis risus accumsan. Vestibulum iaculis, est a blandit eleifend, lorem justo porttitor arcu, a feugiat arcu magna eget nulla. Mauris posuere massa vitae diam pretium placerat nec ut ex. Ut porttitor nisi sit amet felis eleifend, non fermentum nibh placerat. In molestie mi a mi rutrum tempus. Praesent fringilla semper mi, at accumsan lorem lobortis euismod.</p>
<p>Fusce fermentum interdum leo non auctor. In hac habitasse platea dictumst. Pellentesque lectus ante, vehicula ac blandit dictum, pulvinar non tortor. Ut faucibus erat luctus, convallis magna non, ornare dolor. Sed dictum, nunc non iaculis pharetra, mi nisl pretium libero, at tincidunt massa felis eu mauris. Maecenas sit amet lorem non enim finibus posuere. Ut pulvinar aliquam convallis. Maecenas eu purus nec tortor bibendum maximus in quis enim. Fusce vehicula leo non felis posuere aliquet. Nam aliquet mauris nec felis dictum, non semper diam efficitur. Duis blandit euismod vestibulum. Nulla quis leo venenatis, volutpat ex sit amet, vulputate enim. Morbi varius arcu id tortor egestas ornare. Etiam porttitor et elit et condimentum. Maecenas libero felis, consequat varius pharetra non, tempor eget lacus. Fusce vel volutpat ante, vel feugiat nulla.</p>
You need to change:
window.onscroll = myFunction();
Into
window.onscroll = function() {myFunction()};
Why? because the onscroll is an Event that executes a function after something had happened (Scroll Event in our case).
But when you use use the the code like window.onscroll = myFunction(); the JS engine will immediately invoke the function regardless to the scroll event as soon as he sees this line of code.
You need to do two changes to achive what you are looking :
First as Shahar mentioned, you need to change the way you run the function :
window.onscroll = function() {myFunction()};
And the other thing, you are using getAttribute method to update the value of your attribute, you need to use setAttribute instead :
div.setAttribute('data-percent', '100%');
And maybe add a height to your div with css to actually be able to scroll :
#div1{height:700px}
https://jsfiddle.net/odpzLtec/

Fixed header div of section at top of page when user scrolls to section

I have a page with multiple panel divs (the red divs). I would like to make it so the red panel headers stick to the top right below the green page header as the user scrolls.
Wondering if this can be done with PURE CSS and if not that PURE JS.
Please see my current code (I would like Panel Header 2 to replace Panel Header 1 when user is scrolled to Panel Header 2, then same for Panel Header 3):
.wrapper {
padding: 36px 0 0 0;
}
.header {
background-color: green;
position: fixed;
top: 0;
height: 60px;
}
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
.panel-body {
padding-top: 27px;
}
.panel-header-fixed-top {
position: fixed;
top: 60;
right: 0;
left: 0;
z-index: 1030;
}
.panel-header {
background-color: red;
}
h1 {
margin: 0;
}
h2 {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Fixed Scrolling Sample</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="header fixed-top">
<h1>Header</h1>
</div>
<div class="panel">
<div class="panel-header panel-header-fixed-top">
<h2>Panel 1 Header</h2>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum
sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim
sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus.
Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim
auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis.
Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p>
<p>In suscipit pulvinar pulvinar. Phasellus vitae nulla et ex blandit sollicitudin eu eu elit. Praesent fermentum
felis nunc, ut feugiat enim luctus nec. Nulla malesuada neque at lobortis malesuada. Pellentesque consectetur libero
odio, a commodo mi sodales tempus. Donec varius accumsan velit, semper feugiat diam maximus id. Vivamus vel leo
a tellus pellentesque suscipit eget sit amet est.</p>
<p>Sed hendrerit, enim ac semper dignissim, nisi turpis accumsan ante, nec porttitor libero nulla sit amet mauris.
Nam nec malesuada erat, at hendrerit elit. Aenean eu dui viverra, euismod libero non, sodales ipsum. Suspendisse
ut auctor nibh. Duis lobortis massa augue, et gravida ante mollis vel. Vivamus eros nibh, gravida nec tincidunt
vel, pharetra nec felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris velit ipsum, aliquam
gravida convallis vel, ullamcorper in elit. Morbi porta lectus elementum lacus bibendum elementum. Ut quis nisi
eget nunc commodo pretium. Mauris consectetur aliquam diam id gravida. Sed nec nibh est. Vestibulum et est sit
amet ipsum posuere sodales.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum
sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim
sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus.
Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim
auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis.
Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p>
<p>In suscipit pulvinar pulvinar. Phasellus vitae nulla et ex blandit sollicitudin eu eu elit. Praesent fermentum
felis nunc, ut feugiat enim luctus nec. Nulla malesuada neque at lobortis malesuada. Pellentesque consectetur libero
odio, a commodo mi sodales tempus. Donec varius accumsan velit, semper feugiat diam maximus id. Vivamus vel leo
a tellus pellentesque suscipit eget sit amet est.</p>
<p>Proin luctus lectus libero, nec placerat turpis molestie nec. Vestibulum at velit dolor. Etiam eget consequat
eros, ut finibus mi. Pellentesque nec mi elementum, cursus magna nec, luctus purus. Duis pretium fringilla convallis.
Proin porta dictum leo, id euismod nunc fringilla sit amet. Fusce tellus lorem, placerat vel varius in, aliquet
id quam. Proin tempor, sapien vitae rutrum consectetur, dui lorem convallis massa, facilisis ultricies eros neque
sed quam. Nunc dictum et nibh commodo faucibus. Maecenas iaculis facilisis est, id malesuada quam scelerisque a.
In finibus mauris et nibh sagittis, vitae scelerisque tellus suscipit. Donec ultricies vitae nulla at mollis. Aenean
ullamcorper enim non dui suscipit, eu eleifend diam tincidunt. Mauris porta vitae justo eu venenatis.</p>
<p>Suspendisse in posuere erat. Nulla porttitor, enim non interdum pellentesque, mauris urna maximus tortor, sed
bibendum mauris dui pellentesque tellus. Praesent vehicula risus a pharetra aliquet. Sed in hendrerit erat. Sed
aliquet libero non dui tempus euismod. Aliquam felis augue, pulvinar non ex eu, feugiat pretium dolor. In viverra
enim lobortis lorem ultrices dictum. Proin id risus in nibh fringilla auctor vitae quis ex. Duis sodales elementum
libero. Etiam finibus pharetra ornare. Vivamus quis sapien turpis. Sed ultricies est eget turpis pellentesque,
vel ornare augue ornare. Nulla facilisi. Suspendisse et auctor sapien.</p>
<p>Sed hendrerit, enim ac semper dignissim, nisi turpis accumsan ante, nec porttitor libero nulla sit amet mauris.
Nam nec malesuada erat, at hendrerit elit. Aenean eu dui viverra, euismod libero non, sodales ipsum. Suspendisse
ut auctor nibh. Duis lobortis massa augue, et gravida ante mollis vel. Vivamus eros nibh, gravida nec tincidunt
vel, pharetra nec felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris velit ipsum, aliquam
gravida convallis vel, ullamcorper in elit. Morbi porta lectus elementum lacus bibendum elementum. Ut quis nisi
eget nunc commodo pretium. Mauris consectetur aliquam diam id gravida. Sed nec nibh est. Vestibulum et est sit
amet ipsum posuere sodales.
</p>
</div>
</div>
<div class="panel">
<div class="panel-header">
<h2>Panel 2 Header</h2>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum
sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim
sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus.
Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim
auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis.
Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p>
<p>In suscipit pulvinar pulvinar. Phasellus vitae nulla et ex blandit sollicitudin eu eu elit. Praesent fermentum
felis nunc, ut feugiat enim luctus nec. Nulla malesuada neque at lobortis malesuada. Pellentesque consectetur libero
odio, a commodo mi sodales tempus. Donec varius accumsan velit, semper feugiat diam maximus id. Vivamus vel leo
a tellus pellentesque suscipit eget sit amet est.</p>
<p>Proin luctus lectus libero, nec placerat turpis molestie nec. Vestibulum at velit dolor. Etiam eget consequat
eros, ut finibus mi. Pellentesque nec mi elementum, cursus magna nec, luctus purus. Duis pretium fringilla convallis.
Proin porta dictum leo, id euismod nunc fringilla sit amet. Fusce tellus lorem, placerat vel varius in, aliquet
id quam. Proin tempor, sapien vitae rutrum consectetur, dui lorem convallis massa, facilisis ultricies eros neque
sed quam. Nunc dictum et nibh commodo faucibus. Maecenas iaculis facilisis est, id malesuada quam scelerisque a.
In finibus mauris et nibh sagittis, vitae scelerisque tellus suscipit. Donec ultricies vitae nulla at mollis. Aenean
ullamcorper enim non dui suscipit, eu eleifend diam tincidunt. Mauris porta vitae justo eu venenatis.</p>
<p>Suspendisse in posuere erat. Nulla porttitor, enim non interdum pellentesque, mauris urna maximus tortor, sed
bibendum mauris dui pellentesque tellus. Praesent vehicula risus a pharetra aliquet. Sed in hendrerit erat. Sed
aliquet libero non dui tempus euismod. Aliquam felis augue, pulvinar non ex eu, feugiat pretium dolor. In viverra
enim lobortis lorem ultrices dictum. Proin id risus in nibh fringilla auctor vitae quis ex. Duis sodales elementum
libero. Etiam finibus pharetra ornare. Vivamus quis sapien turpis. Sed ultricies est eget turpis pellentesque,
vel ornare augue ornare. Nulla facilisi. Suspendisse et auctor sapien.</p>
<p>Sed hendrerit, enim ac semper dignissim, nisi turpis accumsan ante, nec porttitor libero nulla sit amet mauris.
Nam nec malesuada erat, at hendrerit elit. Aenean eu dui viverra, euismod libero non, sodales ipsum. Suspendisse
ut auctor nibh. Duis lobortis massa augue, et gravida ante mollis vel. Vivamus eros nibh, gravida nec tincidunt
vel, pharetra nec felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris velit ipsum, aliquam
gravida convallis vel, ullamcorper in elit. Morbi porta lectus elementum lacus bibendum elementum. Ut quis nisi
eget nunc commodo pretium. Mauris consectetur aliquam diam id gravida. Sed nec nibh est. Vestibulum et est sit
amet ipsum posuere sodales.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum
sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim
sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus.
Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim
auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis.
Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p>
<p>In suscipit pulvinar pulvinar. Phasellus vitae nulla et ex blandit sollicitudin eu eu elit. Praesent fermentum
felis nunc, ut feugiat enim luctus nec. Nulla malesuada neque at lobortis malesuada. Pellentesque consectetur libero
odio, a commodo mi sodales tempus. Donec varius accumsan velit, semper feugiat diam maximus id. Vivamus vel leo
a tellus pellentesque suscipit eget sit amet est.</p>
<p>Proin luctus lectus libero, nec placerat turpis molestie nec. Vestibulum at velit dolor. Etiam eget consequat
eros, ut finibus mi. Pellentesque nec mi elementum, cursus magna nec, luctus purus. Duis pretium fringilla convallis.
Proin porta dictum leo, id euismod nunc fringilla sit amet. Fusce tellus lorem, placerat vel varius in, aliquet
id quam. Proin tempor, sapien vitae rutrum consectetur, dui lorem convallis massa, facilisis ultricies eros neque
sed quam. Nunc dictum et nibh commodo faucibus. Maecenas iaculis facilisis est, id malesuada quam scelerisque a.
In finibus mauris et nibh sagittis, vitae scelerisque tellus suscipit. Donec ultricies vitae nulla at mollis. Aenean
ullamcorper enim non dui suscipit, eu eleifend diam tincidunt. Mauris porta vitae justo eu venenatis.</p>
<p>Suspendisse in posuere erat. Nulla porttitor, enim non interdum pellentesque, mauris urna maximus tortor, sed
bibendum mauris dui pellentesque tellus. Praesent vehicula risus a pharetra aliquet. Sed in hendrerit erat. Sed
aliquet libero non dui tempus euismod. Aliquam felis augue, pulvinar non ex eu, feugiat pretium dolor. In viverra
enim lobortis lorem ultrices dictum. Proin id risus in nibh fringilla auctor vitae quis ex. Duis sodales elementum
libero. Etiam finibus pharetra ornare. Vivamus quis sapien turpis. Sed ultricies est eget turpis pellentesque,
vel ornare augue ornare. Nulla facilisi. Suspendisse et auctor sapien.</p>
<p>Sed hendrerit, enim ac semper dignissim, nisi turpis accumsan ante, nec porttitor libero nulla sit amet mauris.
Nam nec malesuada erat, at hendrerit elit. Aenean eu dui viverra, euismod libero non, sodales ipsum. Suspendisse
ut auctor nibh. Duis lobortis massa augue, et gravida ante mollis vel. Vivamus eros nibh, gravida nec tincidunt
vel, pharetra nec felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris velit ipsum, aliquam
gravida convallis vel, ullamcorper in elit. Morbi porta lectus elementum lacus bibendum elementum. Ut quis nisi
eget nunc commodo pretium. Mauris consectetur aliquam diam id gravida. Sed nec nibh est. Vestibulum et est sit
amet ipsum posuere sodales.
</p>
</div>
</div>
<div class="panel">
<div class="panel-header">
<h2>Panel 3 Header</h2>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum
sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim
sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus.
Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim
auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis.
Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p>
<p>In suscipit pulvinar pulvinar. Phasellus vitae nulla et ex blandit sollicitudin eu eu elit. Praesent fermentum
felis nunc, ut feugiat enim luctus nec. Nulla malesuada neque at lobortis malesuada. Pellentesque consectetur libero
odio, a commodo mi sodales tempus. Donec varius accumsan velit, semper feugiat diam maximus id. Vivamus vel leo
a tellus pellentesque suscipit eget sit amet est.</p>
<p>Proin luctus lectus libero, nec placerat turpis molestie nec. Vestibulum at velit dolor. Etiam eget consequat
eros, ut finibus mi. Pellentesque nec mi elementum, cursus magna nec, luctus purus. Duis pretium fringilla convallis.
Proin porta dictum leo, id euismod nunc fringilla sit amet. Fusce tellus lorem, placerat vel varius in, aliquet
id quam. Proin tempor, sapien vitae rutrum consectetur, dui lorem convallis massa, facilisis ultricies eros neque
sed quam. Nunc dictum et nibh commodo faucibus. Maecenas iaculis facilisis est, id malesuada quam scelerisque a.
In finibus mauris et nibh sagittis, vitae scelerisque tellus suscipit. Donec ultricies vitae nulla at mollis. Aenean
ullamcorper enim non dui suscipit, eu eleifend diam tincidunt. Mauris porta vitae justo eu venenatis.</p>
<p>Suspendisse in posuere erat. Nulla porttitor, enim non interdum pellentesque, mauris urna maximus tortor, sed
bibendum mauris dui pellentesque tellus. Praesent vehicula risus a pharetra aliquet. Sed in hendrerit erat. Sed
aliquet libero non dui tempus euismod. Aliquam felis augue, pulvinar non ex eu, feugiat pretium dolor. In viverra
enim lobortis lorem ultrices dictum. Proin id risus in nibh fringilla auctor vitae quis ex. Duis sodales elementum
libero. Etiam finibus pharetra ornare. Vivamus quis sapien turpis. Sed ultricies est eget turpis pellentesque,
vel ornare augue ornare. Nulla facilisi. Suspendisse et auctor sapien.</p>
<p>Sed hendrerit, enim ac semper dignissim, nisi turpis accumsan ante, nec porttitor libero nulla sit amet mauris.
Nam nec malesuada erat, at hendrerit elit. Aenean eu dui viverra, euismod libero non, sodales ipsum. Suspendisse
ut auctor nibh. Duis lobortis massa augue, et gravida ante mollis vel. Vivamus eros nibh, gravida nec tincidunt
vel, pharetra nec felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris velit ipsum, aliquam
gravida convallis vel, ullamcorper in elit. Morbi porta lectus elementum lacus bibendum elementum. Ut quis nisi
eget nunc commodo pretium. Mauris consectetur aliquam diam id gravida. Sed nec nibh est. Vestibulum et est sit
amet ipsum posuere sodales.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum
sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim
sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus.
Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim
auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis.
Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p>
<p>In suscipit pulvinar pulvinar. Phasellus vitae nulla et ex blandit sollicitudin eu eu elit. Praesent fermentum
felis nunc, ut feugiat enim luctus nec. Nulla malesuada neque at lobortis malesuada. Pellentesque consectetur libero
odio, a commodo mi sodales tempus. Donec varius accumsan velit, semper feugiat diam maximus id. Vivamus vel leo
a tellus pellentesque suscipit eget sit amet est.</p>
<p>Proin luctus lectus libero, nec placerat turpis molestie nec. Vestibulum at velit dolor. Etiam eget consequat
eros, ut finibus mi. Pellentesque nec mi elementum, cursus magna nec, luctus purus. Duis pretium fringilla convallis.
Proin porta dictum leo, id euismod nunc fringilla sit amet. Fusce tellus lorem, placerat vel varius in, aliquet
id quam. Proin tempor, sapien vitae rutrum consectetur, dui lorem convallis massa, facilisis ultricies eros neque
sed quam. Nunc dictum et nibh commodo faucibus. Maecenas iaculis facilisis est, id malesuada quam scelerisque a.
In finibus mauris et nibh sagittis, vitae scelerisque tellus suscipit. Donec ultricies vitae nulla at mollis. Aenean
ullamcorper enim non dui suscipit, eu eleifend diam tincidunt. Mauris porta vitae justo eu venenatis.</p>
<p>Suspendisse in posuere erat. Nulla porttitor, enim non interdum pellentesque, mauris urna maximus tortor, sed
bibendum mauris dui pellentesque tellus. Praesent vehicula risus a pharetra aliquet. Sed in hendrerit erat. Sed
aliquet libero non dui tempus euismod. Aliquam felis augue, pulvinar non ex eu, feugiat pretium dolor. In viverra
enim lobortis lorem ultrices dictum. Proin id risus in nibh fringilla auctor vitae quis ex. Duis sodales elementum
libero. Etiam finibus pharetra ornare. Vivamus quis sapien turpis. Sed ultricies est eget turpis pellentesque,
vel ornare augue ornare. Nulla facilisi. Suspendisse et auctor sapien.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum
sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim
sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus.
Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim
auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis.
Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p>
<p>In suscipit pulvinar pulvinar. Phasellus vitae nulla et ex blandit sollicitudin eu eu elit. Praesent fermentum
felis nunc, ut feugiat enim luctus nec. Nulla malesuada neque at lobortis malesuada. Pellentesque consectetur libero
odio, a commodo mi sodales tempus. Donec varius accumsan velit, semper feugiat diam maximus id. Vivamus vel leo
a tellus pellentesque suscipit eget sit amet est.</p>
<p>Suspendisse in posuere erat. Nulla porttitor, enim non interdum pellentesque, mauris urna maximus tortor, sed
bibendum mauris dui pellentesque tellus. Praesent vehicula risus a pharetra aliquet. Sed in hendrerit erat. Sed
aliquet libero non dui tempus euismod. Aliquam felis augue, pulvinar non ex eu, feugiat pretium dolor. In viverra
enim lobortis lorem ultrices dictum. Proin id risus in nibh fringilla auctor vitae quis ex. Duis sodales elementum
libero. Etiam finibus pharetra ornare. Vivamus quis sapien turpis. Sed ultricies est eget turpis pellentesque,
vel ornare augue ornare. Nulla facilisi. Suspendisse et auctor sapien.</p>
<p>Sed hendrerit, enim ac semper dignissim, nisi turpis accumsan ante, nec porttitor libero nulla sit amet mauris.
Nam nec malesuada erat, at hendrerit elit. Aenean eu dui viverra, euismod libero non, sodales ipsum. Suspendisse
ut auctor nibh. Duis lobortis massa augue, et gravida ante mollis vel. Vivamus eros nibh, gravida nec tincidunt
vel, pharetra nec felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris velit ipsum, aliquam
gravida convallis vel, ullamcorper in elit. Morbi porta lectus elementum lacus bibendum elementum. Ut quis nisi
eget nunc commodo pretium. Mauris consectetur aliquam diam id gravida. Sed nec nibh est. Vestibulum et est sit
amet ipsum posuere sodales.
</p>
</div>
</div>
<div class="panel">
<div class="panel-header">
<h2>Panel 4 Header</h2>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum
sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim
sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus.
Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim
auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis.
Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p>
<p>In suscipit pulvinar pulvinar. Phasellus vitae nulla et ex blandit sollicitudin eu eu elit. Praesent fermentum
felis nunc, ut feugiat enim luctus nec. Nulla malesuada neque at lobortis malesuada. Pellentesque consectetur libero
odio, a commodo mi sodales tempus. Donec varius accumsan velit, semper feugiat diam maximus id. Vivamus vel leo
a tellus pellentesque suscipit eget sit amet est.</p>
<p>Suspendisse in posuere erat. Nulla porttitor, enim non interdum pellentesque, mauris urna maximus tortor, sed
bibendum mauris dui pellentesque tellus. Praesent vehicula risus a pharetra aliquet. Sed in hendrerit erat. Sed
aliquet libero non dui tempus euismod. Aliquam felis augue, pulvinar non ex eu, feugiat pretium dolor. In viverra
enim lobortis lorem ultrices dictum. Proin id risus in nibh fringilla auctor vitae quis ex. Duis sodales elementum
libero. Etiam finibus pharetra ornare. Vivamus quis sapien turpis. Sed ultricies est eget turpis pellentesque,
vel ornare augue ornare. Nulla facilisi. Suspendisse et auctor sapien.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum
sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim
sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus.
Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim
auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis.
Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p>
<p>Suspendisse in posuere erat. Nulla porttitor, enim non interdum pellentesque, mauris urna maximus tortor, sed
bibendum mauris dui pellentesque tellus. Praesent vehicula risus a pharetra aliquet. Sed in hendrerit erat. Sed
aliquet libero non dui tempus euismod. Aliquam felis augue, pulvinar non ex eu, feugiat pretium dolor. In viverra
enim lobortis lorem ultrices dictum. Proin id risus in nibh fringilla auctor vitae quis ex. Duis sodales elementum
libero. Etiam finibus pharetra ornare. Vivamus quis sapien turpis. Sed ultricies est eget turpis pellentesque,
vel ornare augue ornare. Nulla facilisi. Suspendisse et auctor sapien.</p>
<p>Sed hendrerit, enim ac semper dignissim, nisi turpis accumsan ante, nec porttitor libero nulla sit amet mauris.
Nam nec malesuada erat, at hendrerit elit. Aenean eu dui viverra, euismod libero non, sodales ipsum. Suspendisse
ut auctor nibh. Duis lobortis massa augue, et gravida ante mollis vel. Vivamus eros nibh, gravida nec tincidunt
vel, pharetra nec felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris velit ipsum, aliquam
gravida convallis vel, ullamcorper in elit. Morbi porta lectus elementum lacus bibendum elementum. Ut quis nisi
eget nunc commodo pretium. Mauris consectetur aliquam diam id gravida. Sed nec nibh est. Vestibulum et est sit
amet ipsum posuere sodales.
</p>
</div>
</div>
</div>
</body>
</html>
Probably this could help you only css, let me know if is useful for you.
.wrapper {
padding: 36px 0 0 0;
}
.header {
background-color: green;
position: fixed;
top: 0;
height: 60px;
}
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
.panel-body {
padding-top: 27px;
}
.panel-header-fixed-top {
position: fixed;
top: 60;
right: 0;
left: 0;
/* z-index: 1030;*/
}
.panel-header {
background-color: red;
position: -webkit-sticky;
position: sticky;
top: 60px;
padding: 5px;
}
h1 {
margin: 0;
}
h2 {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Fixed Scrolling Sample</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="header fixed-top">
<h1>Header</h1>
</div>
<div class="panel">
<div class="panel-header panel-header-fixed-top">
<h2>Panel 1 Header</h2>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum
sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim
sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus.
Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim
auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis.
Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p>
<p>In suscipit pulvinar pulvinar. Phasellus vitae nulla et ex blandit sollicitudin eu eu elit. Praesent fermentum
felis nunc, ut feugiat enim luctus nec. Nulla malesuada neque at lobortis malesuada. Pellentesque consectetur libero
odio, a commodo mi sodales tempus. Donec varius accumsan velit, semper feugiat diam maximus id. Vivamus vel leo
a tellus pellentesque suscipit eget sit amet est.</p>
<p>Sed hendrerit, enim ac semper dignissim, nisi turpis accumsan ante, nec porttitor libero nulla sit amet mauris.
Nam nec malesuada erat, at hendrerit elit. Aenean eu dui viverra, euismod libero non, sodales ipsum. Suspendisse
ut auctor nibh. Duis lobortis massa augue, et gravida ante mollis vel. Vivamus eros nibh, gravida nec tincidunt
vel, pharetra nec felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris velit ipsum, aliquam
gravida convallis vel, ullamcorper in elit. Morbi porta lectus elementum lacus bibendum elementum. Ut quis nisi
eget nunc commodo pretium. Mauris consectetur aliquam diam id gravida. Sed nec nibh est. Vestibulum et est sit
amet ipsum posuere sodales.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum
sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim
sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus.
Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim
auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis.
Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p>
<p>In suscipit pulvinar pulvinar. Phasellus vitae nulla et ex blandit sollicitudin eu eu elit. Praesent fermentum
felis nunc, ut feugiat enim luctus nec. Nulla malesuada neque at lobortis malesuada. Pellentesque consectetur libero
odio, a commodo mi sodales tempus. Donec varius accumsan velit, semper feugiat diam maximus id. Vivamus vel leo
a tellus pellentesque suscipit eget sit amet est.</p>
<p>Proin luctus lectus libero, nec placerat turpis molestie nec. Vestibulum at velit dolor. Etiam eget consequat
eros, ut finibus mi. Pellentesque nec mi elementum, cursus magna nec, luctus purus. Duis pretium fringilla convallis.
Proin porta dictum leo, id euismod nunc fringilla sit amet. Fusce tellus lorem, placerat vel varius in, aliquet
id quam. Proin tempor, sapien vitae rutrum consectetur, dui lorem convallis massa, facilisis ultricies eros neque
sed quam. Nunc dictum et nibh commodo faucibus. Maecenas iaculis facilisis est, id malesuada quam scelerisque a.
In finibus mauris et nibh sagittis, vitae scelerisque tellus suscipit. Donec ultricies vitae nulla at mollis. Aenean
ullamcorper enim non dui suscipit, eu eleifend diam tincidunt. Mauris porta vitae justo eu venenatis.</p>
<p>Suspendisse in posuere erat. Nulla porttitor, enim non interdum pellentesque, mauris urna maximus tortor, sed
bibendum mauris dui pellentesque tellus. Praesent vehicula risus a pharetra aliquet. Sed in hendrerit erat. Sed
aliquet libero non dui tempus euismod. Aliquam felis augue, pulvinar non ex eu, feugiat pretium dolor. In viverra
enim lobortis lorem ultrices dictum. Proin id risus in nibh fringilla auctor vitae quis ex. Duis sodales elementum
libero. Etiam finibus pharetra ornare. Vivamus quis sapien turpis. Sed ultricies est eget turpis pellentesque,
vel ornare augue ornare. Nulla facilisi. Suspendisse et auctor sapien.</p>
<p>Sed hendrerit, enim ac semper dignissim, nisi turpis accumsan ante, nec porttitor libero nulla sit amet mauris.
Nam nec malesuada erat, at hendrerit elit. Aenean eu dui viverra, euismod libero non, sodales ipsum. Suspendisse
ut auctor nibh. Duis lobortis massa augue, et gravida ante mollis vel. Vivamus eros nibh, gravida nec tincidunt
vel, pharetra nec felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris velit ipsum, aliquam
gravida convallis vel, ullamcorper in elit. Morbi porta lectus elementum lacus bibendum elementum. Ut quis nisi
eget nunc commodo pretium. Mauris consectetur aliquam diam id gravida. Sed nec nibh est. Vestibulum et est sit
amet ipsum posuere sodales.
</p>
</div>
</div>
<div class="panel">
<div class="panel-header">
<h2>Panel 2 Header</h2>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum
sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim
sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus.
Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim
auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis.
Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p>
<p>In suscipit pulvinar pulvinar. Phasellus vitae nulla et ex blandit sollicitudin eu eu elit. Praesent fermentum
felis nunc, ut feugiat enim luctus nec. Nulla malesuada neque at lobortis malesuada. Pellentesque consectetur libero
odio, a commodo mi sodales tempus. Donec varius accumsan velit, semper feugiat diam maximus id. Vivamus vel leo
a tellus pellentesque suscipit eget sit amet est.</p>
<p>Proin luctus lectus libero, nec placerat turpis molestie nec. Vestibulum at velit dolor. Etiam eget consequat
eros, ut finibus mi. Pellentesque nec mi elementum, cursus magna nec, luctus purus. Duis pretium fringilla convallis.
Proin porta dictum leo, id euismod nunc fringilla sit amet. Fusce tellus lorem, placerat vel varius in, aliquet
id quam. Proin tempor, sapien vitae rutrum consectetur, dui lorem convallis massa, facilisis ultricies eros neque
sed quam. Nunc dictum et nibh commodo faucibus. Maecenas iaculis facilisis est, id malesuada quam scelerisque a.
In finibus mauris et nibh sagittis, vitae scelerisque tellus suscipit. Donec ultricies vitae nulla at mollis. Aenean
ullamcorper enim non dui suscipit, eu eleifend diam tincidunt. Mauris porta vitae justo eu venenatis.</p>
<p>Suspendisse in posuere erat. Nulla porttitor, enim non interdum pellentesque, mauris urna maximus tortor, sed
bibendum mauris dui pellentesque tellus. Praesent vehicula risus a pharetra aliquet. Sed in hendrerit erat. Sed
aliquet libero non dui tempus euismod. Aliquam felis augue, pulvinar non ex eu, feugiat pretium dolor. In viverra
enim lobortis lorem ultrices dictum. Proin id risus in nibh fringilla auctor vitae quis ex. Duis sodales elementum
libero. Etiam finibus pharetra ornare. Vivamus quis sapien turpis. Sed ultricies est eget turpis pellentesque,
vel ornare augue ornare. Nulla facilisi. Suspendisse et auctor sapien.</p>
<p>Sed hendrerit, enim ac semper dignissim, nisi turpis accumsan ante, nec porttitor libero nulla sit amet mauris.
Nam nec malesuada erat, at hendrerit elit. Aenean eu dui viverra, euismod libero non, sodales ipsum. Suspendisse
ut auctor nibh. Duis lobortis massa augue, et gravida ante mollis vel. Vivamus eros nibh, gravida nec tincidunt
vel, pharetra nec felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris velit ipsum, aliquam
gravida convallis vel, ullamcorper in elit. Morbi porta lectus elementum lacus bibendum elementum. Ut quis nisi
eget nunc commodo pretium. Mauris consectetur aliquam diam id gravida. Sed nec nibh est. Vestibulum et est sit
amet ipsum posuere sodales.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum
sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim
sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus.
Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim
auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis.
Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p>
<p>In suscipit pulvinar pulvinar. Phasellus vitae nulla et ex blandit sollicitudin eu eu elit. Praesent fermentum
felis nunc, ut feugiat enim luctus nec. Nulla malesuada neque at lobortis malesuada. Pellentesque consectetur libero
odio, a commodo mi sodales tempus. Donec varius accumsan velit, semper feugiat diam maximus id. Vivamus vel leo
a tellus pellentesque suscipit eget sit amet est.</p>
<p>Proin luctus lectus libero, nec placerat turpis molestie nec. Vestibulum at velit dolor. Etiam eget consequat
eros, ut finibus mi. Pellentesque nec mi elementum, cursus magna nec, luctus purus. Duis pretium fringilla convallis.
Proin porta dictum leo, id euismod nunc fringilla sit amet. Fusce tellus lorem, placerat vel varius in, aliquet
id quam. Proin tempor, sapien vitae rutrum consectetur, dui lorem convallis massa, facilisis ultricies eros neque
sed quam. Nunc dictum et nibh commodo faucibus. Maecenas iaculis facilisis est, id malesuada quam scelerisque a.
In finibus mauris et nibh sagittis, vitae scelerisque tellus suscipit. Donec ultricies vitae nulla at mollis. Aenean
ullamcorper enim non dui suscipit, eu eleifend diam tincidunt. Mauris porta vitae justo eu venenatis.</p>
<p>Suspendisse in posuere erat. Nulla porttitor, enim non interdum pellentesque, mauris urna maximus tortor, sed
bibendum mauris dui pellentesque tellus. Praesent vehicula risus a pharetra aliquet. Sed in hendrerit erat. Sed
aliquet libero non dui tempus euismod. Aliquam felis augue, pulvinar non ex eu, feugiat pretium dolor. In viverra
enim lobortis lorem ultrices dictum. Proin id risus in nibh fringilla auctor vitae quis ex. Duis sodales elementum
libero. Etiam finibus pharetra ornare. Vivamus quis sapien turpis. Sed ultricies est eget turpis pellentesque,
vel ornare augue ornare. Nulla facilisi. Suspendisse et auctor sapien.</p>
<p>Sed hendrerit, enim ac semper dignissim, nisi turpis accumsan ante, nec porttitor libero nulla sit amet mauris.
Nam nec malesuada erat, at hendrerit elit. Aenean eu dui viverra, euismod libero non, sodales ipsum. Suspendisse
ut auctor nibh. Duis lobortis massa augue, et gravida ante mollis vel. Vivamus eros nibh, gravida nec tincidunt
vel, pharetra nec felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris velit ipsum, aliquam
gravida convallis vel, ullamcorper in elit. Morbi porta lectus elementum lacus bibendum elementum. Ut quis nisi
eget nunc commodo pretium. Mauris consectetur aliquam diam id gravida. Sed nec nibh est. Vestibulum et est sit
amet ipsum posuere sodales.
</p>
</div>
</div>
<div class="panel">
<div class="panel-header">
<h2>Panel 3 Header</h2>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum
sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim
sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus.
Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim
auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis.
Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p>
<p>In suscipit pulvinar pulvinar. Phasellus vitae nulla et ex blandit sollicitudin eu eu elit. Praesent fermentum
felis nunc, ut feugiat enim luctus nec. Nulla malesuada neque at lobortis malesuada. Pellentesque consectetur libero
odio, a commodo mi sodales tempus. Donec varius accumsan velit, semper feugiat diam maximus id. Vivamus vel leo
a tellus pellentesque suscipit eget sit amet est.</p>
<p>Proin luctus lectus libero, nec placerat turpis molestie nec. Vestibulum at velit dolor. Etiam eget consequat
eros, ut finibus mi. Pellentesque nec mi elementum, cursus magna nec, luctus purus. Duis pretium fringilla convallis.
Proin porta dictum leo, id euismod nunc fringilla sit amet. Fusce tellus lorem, placerat vel varius in, aliquet
id quam. Proin tempor, sapien vitae rutrum consectetur, dui lorem convallis massa, facilisis ultricies eros neque
sed quam. Nunc dictum et nibh commodo faucibus. Maecenas iaculis facilisis est, id malesuada quam scelerisque a.
In finibus mauris et nibh sagittis, vitae scelerisque tellus suscipit. Donec ultricies vitae nulla at mollis. Aenean
ullamcorper enim non dui suscipit, eu eleifend diam tincidunt. Mauris porta vitae justo eu venenatis.</p>
<p>Suspendisse in posuere erat. Nulla porttitor, enim non interdum pellentesque, mauris urna maximus tortor, sed
bibendum mauris dui pellentesque tellus. Praesent vehicula risus a pharetra aliquet. Sed in hendrerit erat. Sed
aliquet libero non dui tempus euismod. Aliquam felis augue, pulvinar non ex eu, feugiat pretium dolor. In viverra
enim lobortis lorem ultrices dictum. Proin id risus in nibh fringilla auctor vitae quis ex. Duis sodales elementum
libero. Etiam finibus pharetra ornare. Vivamus quis sapien turpis. Sed ultricies est eget turpis pellentesque,
vel ornare augue ornare. Nulla facilisi. Suspendisse et auctor sapien.</p>
<p>Sed hendrerit, enim ac semper dignissim, nisi turpis accumsan ante, nec porttitor libero nulla sit amet mauris.
Nam nec malesuada erat, at hendrerit elit. Aenean eu dui viverra, euismod libero non, sodales ipsum. Suspendisse
ut auctor nibh. Duis lobortis massa augue, et gravida ante mollis vel. Vivamus eros nibh, gravida nec tincidunt
vel, pharetra nec felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris velit ipsum, aliquam
gravida convallis vel, ullamcorper in elit. Morbi porta lectus elementum lacus bibendum elementum. Ut quis nisi
eget nunc commodo pretium. Mauris consectetur aliquam diam id gravida. Sed nec nibh est. Vestibulum et est sit
amet ipsum posuere sodales.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum
sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim
sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus.
Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim
auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis.
Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p>
<p>In suscipit pulvinar pulvinar. Phasellus vitae nulla et ex blandit sollicitudin eu eu elit. Praesent fermentum
felis nunc, ut feugiat enim luctus nec. Nulla malesuada neque at lobortis malesuada. Pellentesque consectetur libero
odio, a commodo mi sodales tempus. Donec varius accumsan velit, semper feugiat diam maximus id. Vivamus vel leo
a tellus pellentesque suscipit eget sit amet est.</p>
<p>Proin luctus lectus libero, nec placerat turpis molestie nec. Vestibulum at velit dolor. Etiam eget consequat
eros, ut finibus mi. Pellentesque nec mi elementum, cursus magna nec, luctus purus. Duis pretium fringilla convallis.
Proin porta dictum leo, id euismod nunc fringilla sit amet. Fusce tellus lorem, placerat vel varius in, aliquet
id quam. Proin tempor, sapien vitae rutrum consectetur, dui lorem convallis massa, facilisis ultricies eros neque
sed quam. Nunc dictum et nibh commodo faucibus. Maecenas iaculis facilisis est, id malesuada quam scelerisque a.
In finibus mauris et nibh sagittis, vitae scelerisque tellus suscipit. Donec ultricies vitae nulla at mollis. Aenean
ullamcorper enim non dui suscipit, eu eleifend diam tincidunt. Mauris porta vitae justo eu venenatis.</p>
<p>Suspendisse in posuere erat. Nulla porttitor, enim non interdum pellentesque, mauris urna maximus tortor, sed
bibendum mauris dui pellentesque tellus. Praesent vehicula risus a pharetra aliquet. Sed in hendrerit erat. Sed
aliquet libero non dui tempus euismod. Aliquam felis augue, pulvinar non ex eu, feugiat pretium dolor. In viverra
enim lobortis lorem ultrices dictum. Proin id risus in nibh fringilla auctor vitae quis ex. Duis sodales elementum
libero. Etiam finibus pharetra ornare. Vivamus quis sapien turpis. Sed ultricies est eget turpis pellentesque,
vel ornare augue ornare. Nulla facilisi. Suspendisse et auctor sapien.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum
sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim
sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus.
Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim
auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis.
Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p>
<p>In suscipit pulvinar pulvinar. Phasellus vitae nulla et ex blandit sollicitudin eu eu elit. Praesent fermentum
felis nunc, ut feugiat enim luctus nec. Nulla malesuada neque at lobortis malesuada. Pellentesque consectetur libero
odio, a commodo mi sodales tempus. Donec varius accumsan velit, semper feugiat diam maximus id. Vivamus vel leo
a tellus pellentesque suscipit eget sit amet est.</p>
<p>Suspendisse in posuere erat. Nulla porttitor, enim non interdum pellentesque, mauris urna maximus tortor, sed
bibendum mauris dui pellentesque tellus. Praesent vehicula risus a pharetra aliquet. Sed in hendrerit erat. Sed
aliquet libero non dui tempus euismod. Aliquam felis augue, pulvinar non ex eu, feugiat pretium dolor. In viverra
enim lobortis lorem ultrices dictum. Proin id risus in nibh fringilla auctor vitae quis ex. Duis sodales elementum
libero. Etiam finibus pharetra ornare. Vivamus quis sapien turpis. Sed ultricies est eget turpis pellentesque,
vel ornare augue ornare. Nulla facilisi. Suspendisse et auctor sapien.</p>
<p>Sed hendrerit, enim ac semper dignissim, nisi turpis accumsan ante, nec porttitor libero nulla sit amet mauris.
Nam nec malesuada erat, at hendrerit elit. Aenean eu dui viverra, euismod libero non, sodales ipsum. Suspendisse
ut auctor nibh. Duis lobortis massa augue, et gravida ante mollis vel. Vivamus eros nibh, gravida nec tincidunt
vel, pharetra nec felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris velit ipsum, aliquam
gravida convallis vel, ullamcorper in elit. Morbi porta lectus elementum lacus bibendum elementum. Ut quis nisi
eget nunc commodo pretium. Mauris consectetur aliquam diam id gravida. Sed nec nibh est. Vestibulum et est sit
amet ipsum posuere sodales.
</p>
</div>
</div>
<div class="panel">
<div class="panel-header">
<h2>Panel 4 Header</h2>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum
sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim
sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus.
Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim
auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis.
Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p>
<p>In suscipit pulvinar pulvinar. Phasellus vitae nulla et ex blandit sollicitudin eu eu elit. Praesent fermentum
felis nunc, ut feugiat enim luctus nec. Nulla malesuada neque at lobortis malesuada. Pellentesque consectetur libero
odio, a commodo mi sodales tempus. Donec varius accumsan velit, semper feugiat diam maximus id. Vivamus vel leo
a tellus pellentesque suscipit eget sit amet est.</p>
</div>
</div>
</div>
</body>
</html>

Fixed header with fixed subheader and scrollable content below

I have my layout exactly where I want it. However there is one item I am trying to add and I can't figure out how to do it.
As you can see I have a fixed sidebar that spans 100% of the page, fixed top header, fixed bottom footer, and then a scrollable content section. The goal is that the user can always see the sidebar, header, footer at all times.
I would like to add a subheader div with a height of 80px. This subheader should be right under the primary header. It will be used to display page title and any other page actions. It should be visible at all times when scrolling content section.
I am not sure if the div should be placed outside of #wrapper-content or inside of it. And additionally not sure what the css class should look like for it.
html, body {
height: 100vh;
}
#app-sidebar {
width: 50px;
height: 100%;
background: #102027;
float: left;
}
#app-wrapper {
margin-left: 50px;
height: 100%;
background: lightblue;
}
#wrapper-header {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
height: 50px;
}
#wrapper-content {
position:fixed;
overflow:auto;
background-color: grey;
margin-top: 50px;
margin-bottom: 20px;
height: calc(100% - 70px);
}
#wrapper-footer {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
height: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div id="app-sidebar"></div>
<div id="app-wrapper">
<div id="wrapper-header"></div>
<div id="wrapper-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
</div>
<div id="wrapper-footer"></div>
</div>
</body>
you can make a a new div after header div and give it top equal to the height of header and make this div fixed too. you can keep it outside #wrapper-content and just after #wrapper-header. Something like this:
html, body {
height: 100vh;
}
#app-sidebar {
width: 50px;
height: 100%;
background: #102027;
float: left;
}
#app-wrapper {
margin-left: 50px;
height: 100%;
background: lightblue;
}
#wrapper-header {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
height: 50px;
}
#wrapper-subheader {
overflow: hidden;
background-color: #555;
position: fixed;
top: 50px;
width: 100%;
height: 80px;
}
#wrapper-content {
position:fixed;
overflow:auto;
background-color: grey;
top: 130px;
bottom: 20px;
}
#wrapper-footer {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
height: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div id="app-sidebar"></div>
<div id="app-wrapper">
<div id="wrapper-header"></div>
<div id="wrapper-subheader"></div>
<div id="wrapper-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
</div>
<div id="wrapper-footer"></div>
</div>
</body>
you can add it inside #wrapper-header, absolutely position it at the bottom if you want, or just put your 50px content in #wrapper-header and it will push the subhead to the bottom, then adjust the height of #wrapper-header to include the height of the subheader, and adjust the margin-top of #wrapper-content
html, body {
height: 100vh;
}
#app-sidebar {
width: 50px;
height: 100%;
background: #102027;
float: left;
}
#app-wrapper {
margin-left: 50px;
height: 100%;
background: lightblue;
}
#wrapper-header {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
height: 130px;
}
#wrapper-subheader {
height: 80px;
background: #666;
position: absolute;
bottom: 0; left: 0; right: 0;
}
#wrapper-content {
position:fixed;
overflow:auto;
background-color: grey;
margin-top: 130px;
margin-bottom: 20px;
height: calc(100% - 150px);
}
#wrapper-footer {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
height: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div id="app-sidebar"></div>
<div id="app-wrapper">
<div id="wrapper-header">
<div id="wrapper-subheader"></div>
</div>
<div id="wrapper-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
</div>
<div id="wrapper-footer"></div>
</div>
</body>

Categories

Resources