Have a div move on scroll up and down
Question
I have a div positioned 74px below the top of the view, when I scroll down I want that div to move up until it's fixed at 0px to the top. Then when I scroll the page up to the top I want it to go back to 74px when it's time to.
Here is what I have so far, I am fairly new to this.
function scroll() { window.addEventListener("scroll", function(event) { var scroll = this.scrollY; document.getElementById("listBar").style.top -= scroll; }); }
.listBar { position: fixed; top: 74; }
<div id="listBar"></div>
How can I do it? Thanks!
3 answers
solution1
5 ACCPTED 2019-11-06 10:08:03
Following code help you to make it sticky on top.
div.sticky { position: -webkit-sticky; position: sticky; top: 0; background-color: yellow; padding: 50px; font-size: 20px; }
<:DOCTYPE html> <html> <head> </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 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.</p> </body> </html>
solution2
0 2019-11-06 10:07:09
Try with
position: sticky;
top: 0;
solution3
0 2019-11-06 10:19:05
I would suggest to not use the sticky property, because it isn't fully supported for all browser yet. You can check the browser support here
I've made a codepen of this a while ago, you can find it here The snippet is a copy of the codepen and it should give you the desired result.
const nav = document.querySelector('#main-nav'); const topOfNav = nav.offsetTop; function fixNav() { if (window.scrollY >= topOfNav) { document.body.style.paddingTop = nav.offsetHeight + 'px'; document.body.classList.add('fixed-nav'); } else { document.body.style.paddingTop = 0; document.body.classList.remove('fixed-nav'); } } window.addEventListener('scroll', fixNav); /* styling that you will need */ body { position: relative; }.fixed-nav #main-nav { position: fixed; top: 0; right: 0; left: 0; } /* OVERALL STYLING, IGNORE THESE */ /* further styling */ body { margin: 0; }.filler { background: #ccc; height: 200px; }.filler:nth-of-type(odd) { background: #444; } /* nav styling */ nav { height: 50px; background: #000; display: flex; align-items: center; } nav ul { display: flex; align-items: center; margin: 0; } nav ul li { color: white; list-style-type: none; display: inline-block; padding: 0 10px; }
<,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>Document</title> </head> <body> <div class="filler"></div> <nav id="main-nav"> <ul> <li>Home</li> <li>Opvul item</li> <li>Opvul item</li> <li>Opvul item</li> <li>Opvul item</li> </ul> </nav> <div class="filler"></div> <div class="filler"></div> <div class="filler"></div> <div class="filler"></div> <div class="filler"></div> <div class="filler"></div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
how to move div up & down on window scroll
Div move up or down
scroll up and down in div
How to have a scroll down and up infinite animation in an overflow div in React?
Div going up, on scroll down
Scroll a list up/down to a div
Div scroll down and scroll up with jquery
on Scroll animate scrollTop to move div up and fix it
Scroll to specific div when scroll down or scroll up
DIV move up when scrolling down
Related Tags