Scroll top to scroll to the bottom after first click

Scroll top to scroll to the bottom after first click - javascript

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>

Related

How to "dispatchEvent" a "wheel" event properly?

I have 2 paragraphs, I styled them with CSS in a way that they would have vertical scrollbars.
When I wheel up or down on one paragraph box, I want the wheel event to also happen on the other paragraph box.
I've done a lot of research and I've read a lot of questions regarding wheel and scroll events.
Here's my code:
document.onload = function() {
document.getElementById("p1").addEventListener("wheel", function(e) {
var n = new Event("wheel");
n.deltaY = e.deltaY;
p2.dispatchEvent(n);
});
}
p {
width: 200px;
height: 200px;
overflow: auto;
}
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros in cursus turpis massa. Libero id faucibus
nisl tincidunt eget nullam non. Donec et odio pellentesque diam. Consequat ac felis donec et odio pellentesque.
Pellentesque id nibh tortor id aliquet lectus proin. Dolor sed viverra ipsum nunc aliquet bibendum enim
facilisis. Sed vulputate odio ut enim blandit. Erat nam at lectus urna duis convallis convallis. Ipsum dolor sit
amet consectetur adipiscing elit. Mattis molestie a iaculis at erat. Risus sed vulputate odio ut. Neque egestas
congue quisque egestas diam in arcu cursus euismod. Blandit massa enim nec dui. Orci nulla pellentesque
dignissim enim sit.
Aliquam purus sit amet luctus. Mauris in aliquam sem fringilla ut morbi tincidunt augue. Vehicula ipsum a arcu
cursus vitae congue mauris rhoncus. Amet dictum sit amet justo. Semper auctor neque vitae tempus quam
pellentesque nec nam aliquam. Viverra nam libero justo laoreet sit amet. Porta lorem mollis aliquam ut
porttitor. Cursus metus aliquam eleifend mi in nulla. Lorem ipsum dolor sit amet consectetur adipiscing elit
pellentesque. Malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et. Faucibus et
molestie ac feugiat sed lectus. Eget nunc lobortis mattis aliquam. Laoreet id donec ultrices tincidunt arcu non
sodales neque.</p>
<p id="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros in cursus turpis massa. Libero id faucibus
nisl tincidunt eget nullam non. Donec et odio pellentesque diam. Consequat ac felis donec et odio pellentesque.
Pellentesque id nibh tortor id aliquet lectus proin. Dolor sed viverra ipsum nunc aliquet bibendum enim
facilisis. Sed vulputate odio ut enim blandit. Erat nam at lectus urna duis convallis convallis. Ipsum dolor sit
amet consectetur adipiscing elit. Mattis molestie a iaculis at erat. Risus sed vulputate odio ut. Neque egestas
congue quisque egestas diam in arcu cursus euismod. Blandit massa enim nec dui. Orci nulla pellentesque
dignissim enim sit.
Aliquam purus sit amet luctus. Mauris in aliquam sem fringilla ut morbi tincidunt augue. Vehicula ipsum a arcu
cursus vitae congue mauris rhoncus. Amet dictum sit amet justo. Semper auctor neque vitae tempus quam
pellentesque nec nam aliquam. Viverra nam libero justo laoreet sit amet. Porta lorem mollis aliquam ut
porttitor. Cursus metus aliquam eleifend mi in nulla. Lorem ipsum dolor sit amet consectetur adipiscing elit
pellentesque. Malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et. Faucibus et
molestie ac feugiat sed lectus. Eget nunc lobortis mattis aliquam. Laoreet id donec ultrices tincidunt arcu non
sodales neque.</p>
The event doesn't dispatch and nothing happens.

Manually dispatching events can trigger the associated event listeners, but I don't believe they can be used in this case to trigger an actual content scroll.
A scroll event is dispatched as a consequence of the content scroll happening. A scroll event does not cause the content scroll, it results from it.
An easier way is to just manually measure and set the scrollTop values of the relevant elements:
<script>
document.onload = function(){
var p1 = document.getElementById("p1");
var p2 = document.getElementById("p2");
p1.addEventListener("scroll", function(e){
p2.scrollTop = p1.scrollTop;
});
}
</script>
Note you should also use the scroll event, not wheel, because there are other ways of scrolling a content box aside from the mouse wheel i.e. with the keyboard.
var p1 = document.getElementById("p1");
var p2 = document.getElementById("p2");
p1.addEventListener("scroll", function(e){
p2.scrollTop = p1.scrollTop;
});
div {
display: flex;
flex-grow: 1;
border: 1px solid black;
}
p {
max-height: 100px;
overflow: scroll;
}
<div><div><p id="p1">
Nulla sit amet est. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Nunc sed turpis. Vivamus laoreet.
Sed in libero ut nibh placerat accumsan. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam quis ante. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo.
Praesent blandit laoreet nibh. Proin pretium, leo ac pellentesque mollis, felis nunc ultrices eros, sed gravida augue augue mollis justo. Aenean imperdiet. Nulla porta dolor. Vestibulum ullamcorper mauris at ligula.
Nullam accumsan lorem in dui. Etiam sit amet orci eget eros faucibus tincidunt. Nulla consequat massa quis enim. In hac habitasse platea dictumst. Vivamus laoreet.
Donec id justo. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Donec mollis hendrerit risus. Fusce ac felis sit amet ligula pharetra condimentum. Vivamus consectetuer hendrerit lacus.
</p></div><div><p id="p2">
Nulla sit amet est. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Nunc sed turpis. Vivamus laoreet.
Sed in libero ut nibh placerat accumsan. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam quis ante. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo.
Praesent blandit laoreet nibh. Proin pretium, leo ac pellentesque mollis, felis nunc ultrices eros, sed gravida augue augue mollis justo. Aenean imperdiet. Nulla porta dolor. Vestibulum ullamcorper mauris at ligula.
Nullam accumsan lorem in dui. Etiam sit amet orci eget eros faucibus tincidunt. Nulla consequat massa quis enim. In hac habitasse platea dictumst. Vivamus laoreet.
Donec id justo. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Donec mollis hendrerit risus. Fusce ac felis sit amet ligula pharetra condimentum. Vivamus consectetuer hendrerit lacus.
</p></div></div>

how to script FullPage.js?

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>

When header become top sticky I need to change background color yellow to greenn using css or scss?

I need to change color yellow to green when the header becomes top sticky using css or scss. suppose when header sticky that time I need to change color yellow to green
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: yellow;
padding: 50px;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Sticky Element: Scroll Down to See the Effect</h2>
<p>Scroll down this page to see how sticky positioning works.</p>
<div class="sticky">I will stick to the screen when you reach my scroll position</div>
<p>Some example text..</p>
<h2>Scroll back up again to "remove" the sticky position.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
</body>
</html>

This cannot be done using only CSS, the solution includes putting an observer that will listen to the event
https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned/
const el = document.querySelector(".sticky");
const observer = new IntersectionObserver(
([e]) => e.target.classList.toggle("is-pinned", e.intersectionRatio < 1),
{ threshold: [1] }
);
observer.observe(el);
div.sticky {
position: -webkit-sticky;
position: sticky;
top: -1px;
background-color: yellow;
padding: 50px;
font-size: 20px;
}
div.sticky.is-pinned {
background-color: green !important;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Sticky Element: Scroll Down to See the Effect</h2>
<p>Scroll down this page to see how sticky positioning works.</p>
<div class="sticky">I will stick to the screen when you reach my scroll position</div>
<p>Some example text..</p>
<h2>Scroll back up again to "remove" the sticky position.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
</body>
</html>

How to div scroll

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

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

Slide Down Hidden Div On Scroll

I am trying to create a hidden div (a header) that slides down once the scroll readers a certain point. Very similar to this site.
I trying to inspect it to see how they did it, but I can't figure it out. I am not sure if they use pure CSS transitions or script. Many .js and javascripts do the opposite and have a div slide up/hide, but that isn't want I want.
I know that I have to build out two headers, one visible and one hidden. I am lost as to how to make the hidden header visible when I scroll down to 200px for example.
The HTML:
<div id="logo">
</div><!-- end logo --!>
<header>
<nav class="mainnav" role="navigation">
link
link
link
link
</nav>
<ul class="socialhead">
<li>fb</li>
<li>fb</li>
<li>fb</li>
</ul>
</header>
</div><!-- end header home --!>
<div class="header_homehidden">
<div id="logo">
</div><!-- end logo --!>
<header>
<nav class="mainnav" role="navigation">
link
link
link
link
</nav>
<ul class="socialhead">
<li>fb</li>
<li>fb</li>
<li>fb</li>
</ul>
</header>
</div><!-- end header homehidden --!>
The CSS:
.header_homehidden {
webkit-transform: translateY(-90px);
-moz-transform: translateY(-90px);
transform: translateY(-90px);
}
.header_home {
position: absolute;
z-index: 999;
color: #fff;
width: 100%;
background-color: transparent;
}
.header {
position: fixed;
top: 0px;
width: 100%;
background: white;
padding-top: 20px;
z-index: 999;
color: #000;
}
</style>
Any help is much appreciated.

HTML:
<body>
<div>
<div class="header"></div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus ultricies convallis. Vivamus ornare diam sit amet nisl condimentum egestas. In mi nisi, molestie vel libero nec, facilisis egestas nulla. Integer condimentum nibh vitae rutrum consectetur. Vestibulum luctus sodales risus a elementum. Suspendisse porta felis vel urna rutrum mollis. In eleifend pharetra scelerisque. Praesent pellentesque molestie eleifend. Nulla magna nibh, vehicula vitae consectetur sed, eleifend id nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec leo id magna vulputate tristique. Fusce nec neque metus. Etiam euismod, mi ac sagittis ultrices, nisl arcu ullamcorper neque, nec blandit mauris lorem non tellus. Vivamus tincidunt orci sem, facilisis dapibus velit luctus vulputate. Fusce sed nibh velit. Nullam lacinia eget felis et interdum. Ut facilisis non turpis quis dapibus. Aliquam iaculis in magna in pulvinar. Maecenas tempor tristique augue ut elementum. Nullam commodo urna a faucibus vulputate. Nam sodales nulla ac nisl iaculis laoreet. Proin turpis justo, sagittis vitae arcu et, elementum scelerisque risus. Duis vitae nunc faucibus, adipiscing metus nec, malesuada felis. Morbi ut auctor sapien. Morbi pharetra laoreet urna nec mattis. Nullam facilisis venenatis nunc, ut adipiscing sapien accumsan quis. Sed pellentesque tincidunt sapien, in consequat libero convallis sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque imperdiet sem orci, vel venenatis purus suscipit a. Ut facilisis nunc elit, quis rhoncus nunc egestas a. Ut vitae dictum massa. Curabitur nec posuere arcu. Aliquam erat volutpat. Mauris non tortor in est commodo commodo nec eget purus. Mauris enim lorem, lacinia sollicitudin libero vel, consectetur congue diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. In pharetra fringilla velit at volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus ultricies convallis. Vivamus ornare diam sit amet nisl condimentum egestas. In mi nisi, molestie vel libero nec, facilisis egestas nulla. Integer condimentum nibh vitae rutrum consectetur. Vestibulum luctus sodales risus a elementum. Suspendisse porta felis vel urna rutrum mollis. In eleifend pharetra scelerisque. Praesent pellentesque molestie eleifend. Nulla magna nibh, vehicula vitae consectetur sed, eleifend id nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec leo id magna vulputate tristique. Fusce nec neque metus. Etiam euismod, mi ac sagittis ultrices, nisl arcu ullamcorper neque, nec blandit mauris lorem non tellus. Vivamus tincidunt orci sem, facilisis dapibus velit luctus vulputate. Fusce sed nibh velit. Nullam lacinia eget felis et interdum. Ut facilisis non turpis quis dapibus. Aliquam iaculis in magna in pulvinar. Maecenas tempor tristique augue ut elementum. Nullam commodo urna a faucibus vulputate. Nam sodales nulla ac nisl iaculis laoreet. Proin turpis justo, sagittis vitae arcu et, elementum scelerisque risus. Duis vitae nunc faucibus, adipiscing metus nec, malesuada felis. Morbi ut auctor sapien. Morbi pharetra laoreet urna nec mattis. Nullam facilisis venenatis nunc, ut adipiscing sapien accumsan quis. Sed pellentesque tincidunt sapien, in consequat libero convallis sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque imperdiet sem orci, vel venenatis purus suscipit a. Ut facilisis nunc elit, quis rhoncus nunc egestas a. Ut vitae dictum massa. Curabitur nec posuere arcu. Aliquam erat volutpat. Mauris non tortor in est commodo commodo nec eget purus. Mauris enim lorem, lacinia sollicitudin libero vel, consectetur congue diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. In pharetra fringilla velit at volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus ultricies convallis. Vivamus ornare diam sit amet nisl condimentum egestas. In mi nisi, molestie vel libero nec, facilisis egestas nulla. Integer condimentum nibh vitae rutrum consectetur. Vestibulum luctus sodales risus a elementum. Suspendisse porta felis vel urna rutrum mollis. In eleifend pharetra scelerisque. Praesent pellentesque molestie eleifend. Nulla magna nibh, vehicula vitae consectetur sed, eleifend id nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec leo id magna vulputate tristique. Fusce nec neque metus. Etiam euismod, mi ac sagittis ultrices, nisl arcu ullamcorper neque, nec blandit mauris lorem non tellus. Vivamus tincidunt orci sem, facilisis dapibus velit luctus vulputate. Fusce sed nibh velit. Nullam lacinia eget felis et interdum. Ut facilisis non turpis quis dapibus. Aliquam iaculis in magna in pulvinar. Maecenas tempor tristique augue ut elementum. Nullam commodo urna a faucibus vulputate. Nam sodales nulla ac nisl iaculis laoreet. Proin turpis justo, sagittis vitae arcu et, elementum scelerisque risus. Duis vitae nunc faucibus, adipiscing metus nec, malesuada felis. Morbi ut auctor sapien. Morbi pharetra laoreet urna nec mattis. Nullam facilisis venenatis nunc, ut adipiscing sapien accumsan quis. Sed pellentesque tincidunt sapien, in consequat libero convallis sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque imperdiet sem orci, vel venenatis purus suscipit a. Ut facilisis nunc elit, quis rhoncus nunc egestas a. Ut vitae dictum massa. Curabitur nec posuere arcu. Aliquam erat volutpat. Mauris non tortor in est commodo commodo nec eget purus. Mauris enim lorem, lacinia sollicitudin libero vel, consectetur congue diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. In pharetra fringilla velit at volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus ultricies convallis. Vivamus ornare diam sit amet nisl condimentum egestas. In mi nisi, molestie vel libero nec, facilisis egestas nulla. Integer condimentum nibh vitae rutrum consectetur. Vestibulum luctus sodales risus a elementum. Suspendisse porta felis vel urna rutrum mollis. In eleifend pharetra scelerisque. Praesent pellentesque molestie eleifend. Nulla magna nibh, vehicula vitae consectetur sed, eleifend id nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec leo id magna vulputate tristique. Fusce nec neque metus. Etiam euismod, mi ac sagittis ultrices, nisl arcu ullamcorper neque, nec blandit mauris lorem non tellus. Vivamus tincidunt orci sem, facilisis dapibus velit luctus vulputate. Fusce sed nibh velit. Nullam lacinia eget felis et interdum. Ut facilisis non turpis quis dapibus. Aliquam iaculis in magna in pulvinar. Maecenas tempor tristique augue ut elementum. Nullam commodo urna a faucibus vulputate. Nam sodales nulla ac nisl iaculis laoreet. Proin turpis justo, sagittis vitae arcu et, elementum scelerisque risus. Duis vitae nunc faucibus, adipiscing metus nec, malesuada felis. Morbi ut auctor sapien. Morbi pharetra laoreet urna nec mattis. Nullam facilisis venenatis nunc, ut adipiscing sapien accumsan quis. Sed pellentesque tincidunt sapien, in consequat libero convallis sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque imperdiet sem orci, vel venenatis purus suscipit a. Ut facilisis nunc elit, quis rhoncus nunc egestas a. Ut vitae dictum massa. Curabitur nec posuere arcu. Aliquam erat volutpat. Mauris non tortor in est commodo commodo nec eget purus. Mauris enim lorem, lacinia sollicitudin libero vel, consectetur congue diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. In pharetra fringilla velit at volutpat.</div>
</div>
</body>
CSS:
body {
margin: 0px;
}
.header {
background: black;
width: 100%;
height: 50px;
position: fixed;
display: none;
}
Jquery:
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$(".header").slideDown();
}
if ($(window).scrollTop() < 100) {
$(".header").slideUp();
}
});
Fiddle:
http://jsfiddle.net/mzz2J/

Try this code:
$(function() {
var bar = $('#headerSlideContainer');
var top = bar.css('top');
$(window).scroll(function() {
if($(this).scrollTop() > 50) {
bar.stop().animate({'top' : '0px'}, 500);
} else {
bar.stop().animate({'top' : top}, 500);
}
});
});
Working Example
Source: http://return-true.com/2010/04/scroll-activated-slide-down-header-with-jquery/

Develop Reference

JavaScript is the programming language of the Web.