Develop Reference

how to script FullPage.js? - javascript

I'm using FullPage.js for full screen scroll.. they do have a PAID EXTENSION called 'scrollOverflowReset' .. Use scrollOverflowReset: true to reset the scrollbar after leaving the section or slide and always show the start of the content on section load.
my question is with having a paid extension for this, is it not possible to manually create a javascript code to scroll back to the top a div when it comes into view.
for example, this div will allow scroll down till the section is done, and then jumps down to the next full screen section.
if I scroll back up to the previous section, how do I have it begin at the start of the content and not where it was scrolled down to !
I tried this and didn't work:
var myDiv = document.getElementById('containerDiv');
myDiv.innerHTML = variableLongText;
myDiv.scrollTop = 0;

FullPage.js has a number of callbacks that you can utilize. You can use the [onLeave] callback1.
Try this code:
jQuery(document).ready(function() {
jQuery('#fullpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'white', '#ccddff'],
scrollOverflow: true,
onLeave: function(origin, destination) {
var iscroll = $('.fp-section.active').find('.fp-slide.active').find('.fp-scrollable').prop("fp_iscrollInstance");
if (iscroll)
iscroll.scrollTo(0, 0);
}
});
});
.section {
position: relative;
}
.slide {
font-size: 20px;
padding: 5rem;
line-height: 2rem;
box-sizing: border-box;
}
body {
margin: 0;
}
h1 {
margin: 0;
text-align: center;
padding: 2rem;
text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://alvarotrigo.com/fullPage/vendors/scrolloverflow.min.js"></script>
<script src="https://raw.githack.com/alvarotrigo/fullPage.js/master/dist/fullpage.js"></script>
<div id="fullpage">
<div class="section">
<h1>Section</h1>
</div>
<div class="section">
<h1>Section</h1>
</div>
<div class="section">
<div class='slide'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vulputate ut pharetra sit amet aliquam id diam maecenas. Et tortor at risus viverra adipiscing at. Nisi lacus sed viverra tellus
in hac habitasse. Risus sed vulputate odio ut enim blandit volutpat maecenas volutpat. Elementum nibh tellus molestie nunc. Leo vel orci porta non pulvinar. Semper auctor neque vitae tempus quam pellentesque nec. Massa massa ultricies mi quis hendrerit
dolor magna. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus mauris. Consequat nisl vel pretium lectus quam id. Augue neque gravida in fermentum et sollicitudin ac orci phasellus. Maecenas volutpat blandit aliquam etiam erat velit
scelerisque. At elementum eu facilisis sed odio morbi. Ornare lectus sit amet est placerat in egestas erat. Mauris a diam maecenas sed enim ut. Elit ut aliquam purus sit amet luctus venenatis lectus. Purus in mollis nunc sed id. Amet nulla facilisi
morbi tempus iaculis urna id volutpat. Nisi porta lorem mollis aliquam. Scelerisque varius morbi enim nunc. Integer malesuada nunc vel risus commodo viverra. Semper feugiat nibh sed pulvinar proin. Nec dui nunc mattis enim ut. Nisl condimentum id
venenatis a condimentum vitae. Amet tellus cras adipiscing enim eu turpis egestas pretium aenean. Feugiat sed lectus vestibulum mattis ullamcorper velit sed. Amet porttitor eget dolor morbi non arcu risus quis. Massa eget egestas purus viverra accumsan.
Purus in mollis nunc sed id. Aliquam sem fringilla ut morbi tincidunt augue interdum. Praesent semper feugiat nibh sed pulvinar. Vel pretium lectus quam id leo in vitae turpis. Sem nulla pharetra diam sit amet nisl suscipit adipiscing. Ullamcorper
eget nulla facilisi etiam dignissim diam quis enim lobortis. Turpis nunc eget lorem dolor sed. Nibh sit amet commodo nulla. Tristique risus nec feugiat in fermentum posuere urna. Egestas diam in arcu cursus euismod quis. Vel quam elementum pulvinar
etiam non quam. Sit amet venenatis urna cursus eget nunc. A arcu cursus vitae congue. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Sagittis vitae et leo duis ut diam quam nulla porttitor. Lobortis mattis aliquam faucibus purus.
Eu facilisis sed odio morbi quis commodo odio aenean sed. Nullam vehicula ipsum a arcu cursus vitae congue. Vestibulum sed arcu non odio euismod. Consequat mauris nunc congue nisi vitae suscipit tellus mauris a. Pellentesque massa placerat duis
ultricies lacus sed turpis tincidunt. Nunc sed id semper risus in hendrerit gravida rutrum. Ullamcorper dignissim cras tincidunt lobortis feugiat. Et tortor consequat id porta nibh venenatis cras sed felis. Cras fermentum odio eu feugiat. Est velit
egestas dui id. Sapien et ligula ullamcorper malesuada proin. Quisque egestas diam in arcu cursus euismod. Vitae ultricies leo integer malesuada nunc vel. Nulla at volutpat diam ut venenatis. Tempus egestas sed sed risus pretium quam vulputate dignissim.
Elementum facilisis leo vel fringilla est ullamcorper eget nulla. Amet facilisis magna etiam tempor. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.
Nec dui nunc mattis enim ut tellus elementum. Aliquam ultrices sagittis orci a scelerisque purus semper eget. Aliquet nibh praesent tristique magna sit amet. Aliquet nibh praesent tristique magna sit amet. Enim facilisis gravida neque convallis
a cras. Placerat in egestas erat imperdiet sed euismod nisi porta lorem. Vitae nunc sed velit dignissim sodales ut eu sem integer. Velit euismod in pellentesque massa placerat duis ultricies lacus sed. Scelerisque in dictum non consectetur a erat
nam at. Semper feugiat nibh sed pulvinar proin. Vulputate odio ut enim blandit volutpat maecenas volutpat blandit aliquam. Diam in arcu cursus euismod. Vel eros donec ac odio tempor orci dapibus ultrices in. In massa tempor nec feugiat. Massa massa
ultricies mi quis hendrerit dolor. Fames ac turpis egestas maecenas pharetra convallis posuere morbi. In nisl nisi scelerisque eu ultrices. Tellus elementum sagittis vitae et leo duis. Pharetra sit amet aliquam id diam maecenas ultricies mi eget.
Vestibulum morbi blandit cursus risus at ultrices mi tempus. Rhoncus dolor purus non enim praesent. Magna fermentum iaculis eu non. Morbi tincidunt augue interdum velit euismod in pellentesque. Eu lobortis elementum nibh tellus molestie nunc non
blandit. In vitae turpis massa sed elementum tempus egestas sed sed. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. Nisl condimentum id venenatis a condimentum.
</div>
</div>
<div class="section">
<h1>Section</h1>
</div>
<div class="section">
<h1>Section</h1>
</div>
</div>

Related

I currently have a div with a list of text and a button that adds more lines of text. Once the lines of text reach the bottom of the screen the scrollbar appears. I would like the scrollbar the appear transparent and on top of the div rather than fully opaque and next to the div how it is currently. Is there any way to do this?

I used overflow:overlay; to display scrollbar over content and background-color on the thumb and track to make them 25% opaque. Please see snippet below :
div{
height:100px;
background-color:lightblue;
overflow:overlay;
}
/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
scrollbar-width: auto;
scrollbar-color: #00000025 #ffffff25;
}
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 16px;
}
*::-webkit-scrollbar-track {
background: #ffffff25;
}
*::-webkit-scrollbar-thumb {
background-color: #00000025;
border-radius: 10px;
border: 3px none #00000025;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum luctus scelerisque facilisis. Etiam vestibulum neque at ornare lacinia. Phasellus malesuada massa vel dapibus volutpat. Donec elit metus, mollis id egestas vel, mattis et felis. Duis rutrum diam eu lacus molestie mollis. Phasellus interdum imperdiet vehicula. Morbi eget ex massa.
Curabitur interdum semper mauris non efficitur. Ut eros ipsum, blandit sit amet hendrerit sed, tincidunt nec est. Duis finibus posuere orci sit amet semper. Ut quis ligula nec purus elementum accumsan quis id felis. Sed eget imperdiet dui. Suspendisse faucibus porttitor massa. Proin auctor, libero ut pharetra ullamcorper, arcu enim lobortis tellus, in mollis mi turpis vitae nibh. Pellentesque eget neque pharetra, ornare diam quis, vehicula risus. Phasellus pellentesque facilisis enim, vitae elementum augue. Phasellus ac vulputate nunc. Morbi non ante gravida, mattis nisi eu, ullamcorper sem. Nullam egestas ligula ut lectus dapibus vehicula. In in erat viverra, sagittis odio a, venenatis erat. Nunc ut nunc scelerisque, egestas sapien sed, venenatis lorem. Vivamus fringilla nunc leo, in dictum tortor vehicula vitae.
Donec eleifend est in felis molestie convallis. Etiam dolor ligula, lobortis eu molestie feugiat, aliquam eget ligula. Quisque tempor ornare enim, sed varius mi vestibulum sit amet. In at vestibulum ligula. Vivamus pretium non purus vel scelerisque. Pellentesque a mauris sit amet orci lobortis pellentesque. In purus nulla, maximus non sapien vitae, rhoncus tristique arcu. In placerat dui vel iaculis commodo. Nullam malesuada suscipit nulla, at scelerisque tortor vulputate at. In a diam at libero cursus bibendum in vitae libero. In tortor magna, ornare nec massa vitae, sagittis tincidunt turpis.
Proin malesuada in lectus vitae suscipit. Sed nibh risus, accumsan vel enim vel, mattis porta augue. Aliquam et lacinia neque. Etiam pellentesque tempor augue eget ullamcorper. Aenean dictum efficitur dolor sed ultrices. Donec vitae euismod odio. Nam quis posuere ante. Fusce quis sagittis nulla, sit amet gravida urna. Nulla facilisi. Vivamus id auctor mi. Curabitur pellentesque risus et tortor viverra, vitae pretium ex fringilla. Mauris efficitur maximus lorem vitae hendrerit. Cras efficitur sollicitudin sapien sed dignissim. Duis fermentum imperdiet tincidunt. Praesent augue justo, elementum eu pharetra in, iaculis quis ipsum. Donec sit amet varius arcu, in dictum risus.
Ut ex urna, scelerisque quis augue a, viverra bibendum ligula. Aliquam iaculis dolor quis dolor finibus consectetur. Integer vehicula, turpis sed sollicitudin cursus, est justo posuere elit, non facilisis massa nulla id ligula. Duis tempus, sem vel congue scelerisque, augue mauris efficitur tortor, nec commodo magna sapien et eros. Donec ultrices dui mi, ut malesuada odio ornare a. Duis auctor, ex eu ultricies semper, leo diam consequat turpis, eu ornare felis velit rhoncus quam. Vestibulum lacinia ipsum nec ipsum laoreet faucibus. Mauris sed eros sem. Morbi a tellus quam. Nulla porttitor scelerisque massa eu efficitur. In metus libero, viverra fermentum accumsan et, tristique a ipsum. Proin lacinia tortor leo, facilisis volutpat ante elementum vel. Pellentesque sed ipsum ut sem lobortis mollis sed sit amet dolor. Pellentesque vulputate, justo id eleifend congue, felis enim consectetur nibh, id malesuada ipsum enim nec lectus.
</div>

I want to scroll to the bottom of an element. I searched for solutions here and i got this
but the scrolltop is getting set to zero on first click and if I click on the element again, it scrolls to bottom. I want to scroll to the bottom on first click. The duplicate suggested to me is wrong.
I am using Javascript. Not jquery,
var element = document.querySelector('.message');
element.scrollTop = element.scrollHeight;
.message {
width: 900px;
height: 450px;
margin-top: 0%;
overflow-y: scroll;
}

I have replicated your question and it's working. When I click the first time in the message area the message scrolls to bottom.
Here is the working example:
document.querySelector('.message').addEventListener('click', () => {
var element = document.querySelector('.message');
element.scrollTop = element.scrollHeight;
})
.message {
width: 900px;
height: 100px;
margin-top: 0%;
overflow-y: scroll;
}
<div class="message">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur lorem donec massa sapien faucibus. Lorem ipsum dolor sit amet consectetur adipiscing elit duis. Massa ultricies mi quis hendrerit dolor magna eget est lorem. Diam quam nulla porttitor massa id. Semper viverra nam libero justo laoreet. Dui vivamus arcu felis bibendum ut tristique et. Proin sed libero enim sed faucibus. Consectetur libero id faucibus nisl tincidunt. Arcu felis bibendum ut tristique et egestas quis ipsum. Quisque id diam vel quam. Dui sapien eget mi proin sed. Sit amet luctus venenatis lectus magna fringilla.
Velit dignissim sodales ut eu sem. Malesuada fames ac turpis egestas sed. Tellus orci ac auctor augue mauris augue neque gravida. Scelerisque eleifend donec pretium vulputate sapien nec sagittis. Euismod quis viverra nibh cras pulvinar mattis nunc sed. Facilisis mauris sit amet massa vitae tortor condimentum. Feugiat nibh sed pulvinar proin. Feugiat in ante metus dictum at tempor commodo ullamcorper a. Laoreet sit amet cursus sit amet. Diam maecenas sed enim ut sem viverra aliquet. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Sagittis orci a scelerisque purus semper eget duis. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Odio tempor orci dapibus ultrices in iaculis. Lacus sed turpis tincidunt id.
Tortor condimentum lacinia quis vel eros donec ac odio tempor. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Luctus accumsan tortor posuere ac. Elementum curabitur vitae nunc sed velit dignissim sodales ut eu. Amet cursus sit amet dictum sit amet justo donec enim. Integer vitae justo eget magna fermentum. Lectus arcu bibendum at varius vel pharetra vel. Diam maecenas ultricies mi eget mauris pharetra et. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Nullam non nisi est sit amet facilisis magna etiam tempor. Laoreet non curabitur gravida arcu ac tortor. Sed velit dignissim sodales ut eu. Id eu nisl nunc mi ipsum faucibus vitae aliquet nec.
Enim ut sem viverra aliquet. Sit amet cursus sit amet dictum. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Nullam vehicula ipsum a arcu cursus vitae congue mauris rhoncus. In hac habitasse platea dictumst quisque sagittis purus. Libero justo laoreet sit amet cursus sit amet dictum. Nisl vel pretium lectus quam id. Tempor orci dapibus ultrices in iaculis nunc. Turpis egestas pretium aenean pharetra. Sit amet commodo nulla facilisi. Eget est lorem ipsum dolor sit amet consectetur. Sagittis vitae et leo duis ut diam quam. Nulla aliquet enim tortor at auctor urna nunc id cursus. Curabitur vitae nunc sed velit dignissim sodales. Sit amet massa vitae tortor condimentum lacinia quis vel. Id nibh tortor id aliquet lectus proin.
Varius quam quisque id diam vel quam elementum. Felis eget velit aliquet sagittis id consectetur purus ut. Mauris a diam maecenas sed enim ut sem viverra aliquet. Arcu dui vivamus arcu felis. Ac turpis egestas sed tempus urna et. Vel pharetra vel turpis nunc eget lorem. Praesent tristique magna sit amet purus. In ornare quam viverra orci sagittis. Potenti nullam ac tortor vitae purus. Donec ac odio tempor orci dapibus ultrices in.
Varius quam quisque id diam vel quam elementum. Felis eget velit aliquet sagittis id consectetur purus ut. Mauris a diam maecenas sed enim ut sem viverra aliquet. Arcu dui vivamus arcu felis. Ac turpis egestas sed tempus urna et. Vel pharetra vel turpis nunc eget lorem. Praesent tristique magna sit amet purus. In ornare quam viverra orci sagittis. Potenti nullam ac tortor vitae purus. Donec ac odio tempor orci dapibus ultrices in.
Varius quam quisque id diam vel quam elementum. Felis eget velit aliquet sagittis id consectetur purus ut. Mauris a diam maecenas sed enim ut sem viverra aliquet. Arcu dui vivamus arcu felis. Ac turpis egestas sed tempus urna et. Vel pharetra vel turpis nunc eget lorem. Praesent tristique magna sit amet purus. In ornare quam viverra orci sagittis. Potenti nullam ac tortor vitae purus. Donec ac odio tempor orci dapibus ultrices in.
</div>

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>

I really like the smooth effect that makes the header picture disappearing on this page on scroll down. Check it out.
Unfortunately looking at the code I can't find out how the developper achieved this.
Any idea?
Many thanks,
Gregory

Here's a little demo using jQuery (which is not necessary, but i assume you already use it, and it's easier to read).
$(window).scroll(function(){
if($(window).scrollTop() > 100) {
$('header').addClass('hide');
}
else {
$('header').removeClass('hide');
}
});
body {
margin:0;
padding:0;
}
header {
width:100%;
height:200px;
background:url('https://source.unsplash.com/random') center center;
background-size:cover;
transition:opacity 1s, transform 1s;
}
header.hide {
opacity:0;
transform:translateY(100px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<header></header>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna molestie at elementum eu facilisis sed odio morbi. Etiam non quam lacus suspendisse faucibus. Euismod in pellentesque massa placerat duis. Nibh venenatis cras sed felis eget. Neque viverra justo nec ultrices dui sapien eget mi proin. A iaculis at erat pellentesque adipiscing commodo elit. In fermentum et sollicitudin ac orci phasellus egestas. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet. Id leo in vitae turpis massa. Orci dapibus ultrices in iaculis nunc sed augue. Nunc consequat interdum varius sit amet.</p>
<p>Enim nec dui nunc mattis. Quisque non tellus orci ac auctor augue mauris. Sit amet aliquam id diam maecenas. Nec dui nunc mattis enim ut tellus elementum sagittis vitae. Commodo viverra maecenas accumsan lacus vel facilisis. Dignissim enim sit amet venenatis urna cursus eget. Enim nunc faucibus a pellentesque sit amet. Placerat vestibulum lectus mauris ultrices eros in. Mauris pharetra et ultrices neque ornare aenean euismod elementum nisi. Amet massa vitae tortor condimentum lacinia quis vel eros donec.</p>
<p>Auctor augue mauris augue neque gravida. Elementum pulvinar etiam non quam lacus. Enim sit amet venenatis urna cursus eget nunc scelerisque viverra. A scelerisque purus semper eget duis at tellus at. Sit amet massa vitae tortor condimentum lacinia quis. Convallis posuere morbi leo urna molestie at. Egestas diam in arcu cursus euismod quis. Integer vitae justo eget magna fermentum. Elit ut aliquam purus sit. Tortor id aliquet lectus proin nibh nisl condimentum id.</p>
<p>Porttitor leo a diam sollicitudin tempor id. Ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget. Elit at imperdiet dui accumsan. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet non. Aliquam faucibus purus in massa tempor nec feugiat nisl. Aliquet lectus proin nibh nisl. Lectus magna fringilla urna porttitor rhoncus dolor. Quisque id diam vel quam elementum pulvinar etiam non quam. Nulla posuere sollicitudin aliquam ultrices sagittis. Vitae auctor eu augue ut. Quis auctor elit sed vulputate mi. Imperdiet sed euismod nisi porta. Dis parturient montes nascetur ridiculus. Urna cursus eget nunc scelerisque. A arcu cursus vitae congue mauris rhoncus aenean vel elit. Suspendisse potenti nullam ac tortor vitae. Cras semper auctor neque vitae tempus. Quisque egestas diam in arcu. Vestibulum morbi blandit cursus risus at ultrices mi.</p>
<p>Etiam erat velit scelerisque in dictum non consectetur a. Fringilla ut morbi tincidunt augue interdum velit euismod in. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. Morbi tristique senectus et netus et malesuada. Elit eget gravida cum sociis. Nunc sed velit dignissim sodales ut eu sem integer vitae. In fermentum et sollicitudin ac orci phasellus. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae. Sed risus pretium quam vulputate. Erat pellentesque adipiscing commodo elit. Vehicula ipsum a arcu cursus vitae congue. Ut morbi tincidunt augue interdum velit euismod in pellentesque. Ut tristique et egestas quis ipsum suspendisse ultrices gravida. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed.</p>
</div>
</body>

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

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