讓 div 上下滾動
[英]Have a div move on scroll up and down
問題描述
我有一個 div 位於視圖頂部下方 74px 處，當我向下滾動時，我希望該 div 向上移動，直到它固定在頂部 0px 處。 然后，當我將頁面向上滾動到頂部時，我希望它在 go 回到 74px 時。
這是我到目前為止所擁有的，我對此很陌生。
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>
我該怎么做？ 謝謝！
3 個解決方案
解決方案1
5 已采納 2019-11-06 10:08:03
以下代碼可幫助您使其粘在頂部。
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>
解決方案2
0 2019-11-06 10:07:09
嘗試
position: sticky;
top: 0;
解決方案3
0 2019-11-06 10:19:05
我建議不要使用sticky屬性，因為它還沒有被所有瀏覽器完全支持。 您可以在此處查看瀏覽器支持
我前段時間制作了這個代碼筆，你可以在這里找到它。片段是代碼筆的副本，它應該會給你想要的結果。
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>
如何在 React 的溢出 div 中向下和向上滾動無限 animation？
[英]How to have a scroll down and up infinite animation in an overflow div in React?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.