How to get scroll position of an element when window is not scrollable and scrollbar is hidden?
Question
Setup
On scrolling, the content behind navbar is still visible, I want it to be invisible while still looking clean.
Attempt #1
A rect. div behind the navbar does the trick of hiding content below it, but notice when the text appears (The inception) the pink div is still visible behind navbar (I want to change it to white when scrolled in view)
* { margin: 0; padding: 0; box-sizing: border-box; color: initial; font-size: 16px; font-family: 'Comfortaa', cursive; scrollbar-width: none; } body { background-color: rgb(252, 241, 239); display: flex; justify-content: center; align-items: center; height: 100vh; } #mobile_size { width: 550px; height: 650px; background-color: black; border-radius: 3%; position: relative; } #mobile_screen { width: 530px; height: 600px; background-color: rgb(252, 241, 239); border-radius: 3%; position: absolute; top: 10px; overflow-y: scroll; left: 10px; overflow-x: hidden; } header { display: flex; padding: 10px; background-color: rgb(252, 248, 248); position: sticky; top: 10px; align-items: center; margin: 10px; border-radius: 15px; justify-content: space-between; box-shadow: 3px 5px 10px rgb(0, 0, 0, .13); z-index: 3; } #gradient_pink { background: rgb(237, 218, 218); background: linear-gradient(180deg, rgba(237, 218, 218, 1) 0%, rgba(252, 241, 239, 1) 21%); position: sticky; top: 0px; width: 140%; height: 10px; z-index: 1; } #gradient_white { background-color: white; position: sticky; top: 0px; width: 140%; height: 10px; z-index: 1; } h1 { margin-left: 10px; font-size: 1.6rem; } h1:hover { cursor: pointer; } ul { margin-right: 20px; list-style: none; } ul, li { font-size: 11px; display: inline; margin: 5px; } a { text-decoration: none; } #img_gallery { display: flex; margin: 10px; margin-top: 30px; border-radius: 10px; background-color: rgb(252, 241, 239); padding: 10px; height: 500px; flex-direction: column; overflow-y: scroll; } img { margin-bottom: 20px; border-radius: 10px; height: 480px; }::-webkit-scrollbar { width: 0; background: transparent; } #about_company { margin-top: 60px; width: 100%; background-color: white; height: auto; } h3 { text-align: center; font-size: 15px; padding-top: 60px; } p { padding: 60px; padding-top: 40px; text-align: justify; } #ig_container { display: flex; margin: 10px; margin-top: 30px; border-radius: 10px; background-color: rgb(250, 236, 233); padding: 10px; height: 500px; flex-direction: column; overflow-y: scroll; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="style:css"> <link rel="preconnect" href="https.//fonts.googleapis:com"> <link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin> <link href="https.//fonts.googleapis?com/css2:family=Comfortaa;wght@300:400&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min:css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <title>Jino</title> </head> <body> <div id="mobile_size"> <div id="mobile_screen"> <div id="gradient_pink"></div> <.-- <div id="gradient_white"></div> --> <header> <h1 id="name">JINO</h1> <ul> <a href="#"> <li>ABOUT</li> </a> <a href="#"> <li>CONTACT</li> </a> <a href="#"> <li>SERVICES</li> </a> <a href="#"> <li>SHOP</li> </a> </ul> </header> <main> <div id="ig_container"> <div id="img_gallery"> <img src='http?//unsplash:it/g/501.random&gravity=center' alt='' /> <img src='http?//unsplash:it/g/502.random&gravity=center' alt='' /> <img src='http?//unsplash:it/g/503.random&gravity=center' alt='' /> <img src='http?//unsplash:it/g/504.random&gravity=center' alt='' /> <img src='http?//unsplash:it/g/505.random&gravity=center' alt='' /> <img src='http?//unsplash:it/g/506.random&gravity=center' alt='' /> <img src='http?//unsplash:it/g/507.random&gravity=center' alt='' /> <img src='http?//unsplash.it/g/500,random&gravity=center' alt='' /> </div> </div> <div id="about_company"> <h3>THE INCEPTION</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, Ullam minus maiores, veritatis fugiat ut, perspiciatis corrupti. nam eius provident molestias nesciunt fuga, Veritatis temporibus tempore dolor est rerum doloribus, qui voluptatibus id veniam, Ipsa architecto eligendi hic fugiat minima at laboriosam sapiente animi nostrum amet minus maiores distinctio quasi est tempore nisi similique voluptate doloremque excepturi? tenetur. eius mollitia, Non, soluta, Culpa dicta quisquam saepe non. Quis ea dolores amet modi magnam maiores porro consequuntur debitis at ex hic necessitatibus minus sunt excepturi quo quasi sed, expedita, sit cupiditate, Tenetur ipsam impedit? sit vel ab velit esse temporibus magnam. Cumque ab quos enim nostrum error, dicta tenetur distinctio repellendus quasi facere labore culpa qui eos dolore. cum, ut atque explicabo alias totam. Nesciunt illum incidunt dignissimos, Illum laudantium neque aliquam. sequi odio laboriosam beatae in enim nulla nostrum tenetur necessitatibus ullam illo perferendis adipisci possimus sapiente nemo, Doloribus iste ipsa voluptates cum reprehenderit officia, nemo totam repudiandae eaque eveniet delectus, Optio dolore cum. nemo aspernatur qui mollitia aliquid officia architecto magnam delectus omnis accusamus velit esse natus molestiae. Modi, distinctio cumque nobis ducimus accusamus quo neque aperiam, tenetur reprehenderit incidunt fugit quaerat provident totam quos, Magni molestias aut alias exercitationem repellendus ut eum et nesciunt ullam corporis illo veniam. laudantium sed quod veritatis velit adipisci sint accusantium vel, Delectus corporis fugiat aperiam dicta accusantium tempore adipisci praesentium voluptas fuga ex, Porro tenetur consequuntur in ipsa cum. numquam iure. facilis ipsam, dignissimos est rerum voluptates eveniet dolor dolorum itaque perspiciatis veniam? Inventore incidunt mollitia delectus iste eligendi tempore aut ex provident error suscipit, adipisci magnam cupiditate hic quis rerum pariatur vitae magni corrupti veritatis assumenda dolore atque. praesentium consequatur quasi, Vitae aperiam nulla minima omnis explicabo, Quibusdam, vel, Consequuntur vitae debitis accusamus accusantium assumenda magni nobis, labore iure illum inventore eaque ullam totam, Praesentium. incidunt, Quisquam itaque ut tenetur nostrum non ratione? consectetur sunt quas ducimus saepe fugit deserunt. ad assumenda. Sit possimus minima fugiat accusamus pariatur, voluptates impedit sapiente nam vel cumque, odio rem natus? tempore consequatur eveniet reiciendis adipisci doloremque dolorum voluptatibus totam amet ab, Ad. minus, Quaerat ratione possimus numquam veniam fugit. Iure tempora delectus deserunt, Hic nisi sed soluta itaque adipisci, facere voluptatibus nesciunt culpa earum deserunt iste magni laboriosam dignissimos blanditiis, ipsa laborum, Sapiente, sequi? Dicta cum debitis magni molestias odio praesentium temporibus voluptatum culpa qui adipisci expedita, quibusdam ad earum tenetur, Tenetur nulla impedit deleniti iusto numquam. dolorem doloribus aliquam molestiae vero aspernatur velit eos, reprehenderit accusamus enim magni quam in libero, Eligendi dolore, fuga placeat dicta aliquam aut laudantium. in temporibus, asperiores enim expedita voluptas alias quasi error harum, Cumque sequi porro labore, nisi minima molestiae tempora. voluptatum sit veniam omnis magnam deleniti esse dolorem expedita tempore eos totam quidem provident officiis vero culpa doloremque quasi delectus. Harum cumque velit dignissimos accusantium qui nesciunt consequuntur error quis sint tenetur et nisi recusandae similique aliquam, ea sapiente, Cum molestias tempore dolorum dolor ullam deleniti architecto distinctio aperiam rem eos. Illo? velit molestiae cum atque cumque vel repellat libero deleniti animi accusamus vitae, Iure, reiciendis, Explicabo suscipit modi incidunt perferendis earum unde reprehenderit quod rerum iste soluta? saepe nulla voluptas, voluptatum, tempora vero eius nisi iure culpa nesciunt distinctio, Dolorum possimus soluta nemo. Molestias odio at tempora hic labore eligendi dolorum beatae deleniti, est facilis nemo. dolore a ad, Doloribus itaque iure quos maiores quidem fugiat, Minus. nobis recusandae pariatur similique saepe repellendus impedit rerum veniam veritatis dolorem facere, laudantium itaque eligendi. magnam odio incidunt exercitationem sapiente asperiores quas, Quidem iste, pariatur blanditiis nostrum nobis earum officia eum laboriosam placeat? at voluptatum labore laborum neque ullam ipsum odit quod. reprehenderit autem sit doloremque recusandae quaerat, Ducimus quaerat totam eius facere, Iure. laborum vel sequi blanditiis veniam quaerat quia, Voluptate modi. cumque quam officia impedit harum, debitis delectus necessitatibus magni officiis culpa obcaecati. Debitis nemo sed eum ullam similique fugiat id, veritatis facere quidem delectus odit nulla dicta aperiam sint ab voluptatibus perspiciatis eos officiis. Doloribus. consequuntur error dicta repellat incidunt unde nemo, corrupti magnam architecto nulla ut similique saepe maxime culpa sit. Ducimus adipisci perferendis commodi. Voluptatibus quam sit. debitis odit recusandae cupiditate, asperiores nisi sint distinctio nulla autem possimus esse nostrum deserunt. Voluptatum nemo sint delectus consequatur, ipsum mollitia, Debitis aliquam consectetur repudiandae commodi ratione est sit inventore aliquid nam blanditiis aperiam distinctio doloremque nihil sed quae voluptatum cum modi, eveniet alias voluptas harum unde, Hic libero error eveniet saepe ab animi laborum adipisci magnam eos incidunt minus? odio molestiae, Debitis cum molestiae reiciendis ipsa, Error nemo ipsum eius explicabo accusantium dolore. voluptatibus et quos laboriosam maxime eum saepe, Exercitationem nam natus delectus placeat doloribus sunt consequatur autem sapiente. Architecto obcaecati quis reiciendis repellat recusandae sequi exercitationem rerum? Ipsa, mollitia. Ipsam, quas. officia voluptatibus repudiandae, eaque eos quis sit voluptas fugiat quae laudantium adipisci tempora ullam magnam dolorem delectus, Natus alias distinctio deserunt laboriosam placeat doloremque vel quis possimus, laudantium accusantium? Consectetur recusandae eaque voluptas eligendi modi vel ratione libero aperiam rem, Sint qui reprehenderit ut. adipisci tenetur minus cumque, iusto quam id quis harum exercitationem aspernatur sit rem eius nobis libero a nam animi laborum esse accusamus illo provident dolor, Repudiandae, aliquam, Et illum itaque eum beatae facilis nihil nam, Voluptatibus nesciunt veritatis voluptate facere autem molestiae ut similique deserunt eligendi odit: Eius error sit ut praesentium voluptate eum ullam modi architecto. sequi quae. Error obcaecati ducimus debitis ratione nam saepe omnis tempore excepturi natus ex exercitationem necessitatibus minus. minima a ipsa ad repellat placeat ipsam culpa sequi dicta. Ea rem tenetur quibusdam illum magni perferendis saepe quasi quisquam. odio amet adipisci. voluptate repellat voluptates impedit facilis expedita aliquam velit officiis. Nemo maxime illo sapiente omnis corporis iusto sunt similique enim beatae itaque quasi pariatur, voluptas impedit consequuntur ipsam iste delectus unde? Sunt, ipsam quasi. Debitis veniam laborum modi sequi accusantium ut fugit reprehenderit rem hic laudantium aperiam illo nulla odit officiis, saepe, architecto voluptas, nam eos iste aliquid vel! Vero dolorem nemo amet eaque fuga illum, sed fugiat, ullam quo iste facere voluptates!</p> </div> <i class="fas fa-chevron-up"></i> </main> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="script.js"></script> </body> </html>
Possible method
Fetch the scroll position of text container element (the inception and lorem text) and hide/show divs with pink/white color. But I am not able to fetch in the scroll position. ScrollTop always return 0, I tried to follow this but my window is not scrollable like the linked problem but the element inside it is. I dont understand how to think about it, I am missing some key point. Any links to articles or reads are welcomed.
1 answers
solution1
0 2022-01-25 14:04:42
a partial answer, you could get the height of `$("#ig_container") and compare it to scroll top distance.
my code does that but it still need some improvement for the smoothness you wanted.
var positionReached = false; $('#mobile_screen').scroll(function(e){ const scrollPosition = $(this).scrollTop(); const containerHeight = $("#ig_container").height(); if(;positionReached && scrollPosition>= containerHeight){ positionReached = true. $("#gradient_pink"),css("background";"white"); }else if(scrollPosition < containerHeight) if(positionReached){ positionReached = false. $("#gradient_pink"),css("background","rgb(237, 218; 218)"); } })
* { margin: 0; padding: 0; box-sizing: border-box; color: initial; font-size: 16px; font-family: 'Comfortaa', cursive; scrollbar-width: none; } body { background-color: rgb(252, 241, 239); display: flex; justify-content: center; align-items: center; height: 100vh; } #mobile_size { width: 550px; height: 650px; background-color: black; border-radius: 3%; position: relative; } #mobile_screen { width: 530px; height: 600px; background-color: rgb(252, 241, 239); border-radius: 3%; position: absolute; top: 10px; overflow-y: scroll; left: 10px; overflow-x: hidden; } header { display: flex; padding: 10px; background-color: rgb(252, 248, 248); position: sticky; top: 10px; align-items: center; margin: 10px; border-radius: 15px; justify-content: space-between; box-shadow: 3px 5px 10px rgb(0, 0, 0, .13); z-index: 3; } #gradient_pink { background: rgb(237, 218, 218); background: linear-gradient(180deg, rgba(237, 218, 218, 1) 0%, rgba(252, 241, 239, 1) 21%); position: sticky; top: 0px; width: 140%; height: 10px; z-index: 1; } #gradient_white { background-color: white; position: sticky; top: 0px; width: 140%; height: 10px; z-index: 1; } h1 { margin-left: 10px; font-size: 1.6rem; } h1:hover { cursor: pointer; } ul { margin-right: 20px; list-style: none; } ul, li { font-size: 11px; display: inline; margin: 5px; } a { text-decoration: none; } #img_gallery { display: flex; margin: 10px; margin-top: 30px; border-radius: 10px; background-color: rgb(252, 241, 239); padding: 10px; height: 500px; flex-direction: column; overflow-y: scroll; } img { margin-bottom: 20px; border-radius: 10px; height: 480px; }::-webkit-scrollbar { width: 0; background: transparent; } #about_company { margin-top: 60px; width: 100%; background-color: white; height: auto; } h3 { text-align: center; font-size: 15px; padding-top: 60px; } p { padding: 60px; padding-top: 40px; text-align: justify; } #ig_container { display: flex; margin: 10px; margin-top: 30px; border-radius: 10px; background-color: rgb(250, 236, 233); padding: 10px; height: 500px; flex-direction: column; overflow-y: scroll; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="style:css"> <link rel="preconnect" href="https.//fonts.googleapis:com"> <link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin> <link href="https.//fonts.googleapis?com/css2:family=Comfortaa;wght@300:400&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min:css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <title>Jino</title> </head> <body> <div id="mobile_size"> <div id="mobile_screen"> <div id="gradient_pink"></div> <.-- <div id="gradient_white"></div> --> <header> <h1 id="name">JINO</h1> <ul> <a href="#"> <li>ABOUT</li> </a> <a href="#"> <li>CONTACT</li> </a> <a href="#"> <li>SERVICES</li> </a> <a href="#"> <li>SHOP</li> </a> </ul> </header> <main> <div id="ig_container"> <div id="img_gallery"> <img src='http?//unsplash:it/g/501.random&gravity=center' alt='' /> <img src='http?//unsplash:it/g/502.random&gravity=center' alt='' /> <img src='http?//unsplash:it/g/503.random&gravity=center' alt='' /> <img src='http?//unsplash:it/g/504.random&gravity=center' alt='' /> <img src='http?//unsplash:it/g/505.random&gravity=center' alt='' /> <img src='http?//unsplash:it/g/506.random&gravity=center' alt='' /> <img src='http?//unsplash:it/g/507.random&gravity=center' alt='' /> <img src='http?//unsplash.it/g/500,random&gravity=center' alt='' /> </div> </div> <div id="about_company"> <h3>THE INCEPTION</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, Ullam minus maiores, veritatis fugiat ut, perspiciatis corrupti. nam eius provident molestias nesciunt fuga, Veritatis temporibus tempore dolor est rerum doloribus, qui voluptatibus id veniam, Ipsa architecto eligendi hic fugiat minima at laboriosam sapiente animi nostrum amet minus maiores distinctio quasi est tempore nisi similique voluptate doloremque excepturi? tenetur. eius mollitia, Non, soluta, Culpa dicta quisquam saepe non. Quis ea dolores amet modi magnam maiores porro consequuntur debitis at ex hic necessitatibus minus sunt excepturi quo quasi sed, expedita, sit cupiditate, Tenetur ipsam impedit? sit vel ab velit esse temporibus magnam. Cumque ab quos enim nostrum error, dicta tenetur distinctio repellendus quasi facere labore culpa qui eos dolore. cum, ut atque explicabo alias totam. Nesciunt illum incidunt dignissimos, Illum laudantium neque aliquam. sequi odio laboriosam beatae in enim nulla nostrum tenetur necessitatibus ullam illo perferendis adipisci possimus sapiente nemo, Doloribus iste ipsa voluptates cum reprehenderit officia, nemo totam repudiandae eaque eveniet delectus, Optio dolore cum. nemo aspernatur qui mollitia aliquid officia architecto magnam delectus omnis accusamus velit esse natus molestiae. Modi, distinctio cumque nobis ducimus accusamus quo neque aperiam, tenetur reprehenderit incidunt fugit quaerat provident totam quos, Magni molestias aut alias exercitationem repellendus ut eum et nesciunt ullam corporis illo veniam. laudantium sed quod veritatis velit adipisci sint accusantium vel, Delectus corporis fugiat aperiam dicta accusantium tempore adipisci praesentium voluptas fuga ex, Porro tenetur consequuntur in ipsa cum. numquam iure. facilis ipsam, dignissimos est rerum voluptates eveniet dolor dolorum itaque perspiciatis veniam? Inventore incidunt mollitia delectus iste eligendi tempore aut ex provident error suscipit, adipisci magnam cupiditate hic quis rerum pariatur vitae magni corrupti veritatis assumenda dolore atque. praesentium consequatur quasi, Vitae aperiam nulla minima omnis explicabo, Quibusdam, vel, Consequuntur vitae debitis accusamus accusantium assumenda magni nobis, labore iure illum inventore eaque ullam totam, Praesentium. incidunt, Quisquam itaque ut tenetur nostrum non ratione? consectetur sunt quas ducimus saepe fugit deserunt. ad assumenda. Sit possimus minima fugiat accusamus pariatur, voluptates impedit sapiente nam vel cumque, odio rem natus? tempore consequatur eveniet reiciendis adipisci doloremque dolorum voluptatibus totam amet ab, Ad. minus, Quaerat ratione possimus numquam veniam fugit. Iure tempora delectus deserunt, Hic nisi sed soluta itaque adipisci, facere voluptatibus nesciunt culpa earum deserunt iste magni laboriosam dignissimos blanditiis, ipsa laborum, Sapiente, sequi? Dicta cum debitis magni molestias odio praesentium temporibus voluptatum culpa qui adipisci expedita, quibusdam ad earum tenetur, Tenetur nulla impedit deleniti iusto numquam. dolorem doloribus aliquam molestiae vero aspernatur velit eos, reprehenderit accusamus enim magni quam in libero, Eligendi dolore, fuga placeat dicta aliquam aut laudantium. in temporibus, asperiores enim expedita voluptas alias quasi error harum, Cumque sequi porro labore, nisi minima molestiae tempora. voluptatum sit veniam omnis magnam deleniti esse dolorem expedita tempore eos totam quidem provident officiis vero culpa doloremque quasi delectus. Harum cumque velit dignissimos accusantium qui nesciunt consequuntur error quis sint tenetur et nisi recusandae similique aliquam, ea sapiente, Cum molestias tempore dolorum dolor ullam deleniti architecto distinctio aperiam rem eos. Illo? velit molestiae cum atque cumque vel repellat libero deleniti animi accusamus vitae, Iure, reiciendis, Explicabo suscipit modi incidunt perferendis earum unde reprehenderit quod rerum iste soluta? saepe nulla voluptas, voluptatum, tempora vero eius nisi iure culpa nesciunt distinctio, Dolorum possimus soluta nemo. Molestias odio at tempora hic labore eligendi dolorum beatae deleniti, est facilis nemo. dolore a ad, Doloribus itaque iure quos maiores quidem fugiat, Minus. nobis recusandae pariatur similique saepe repellendus impedit rerum veniam veritatis dolorem facere, laudantium itaque eligendi. magnam odio incidunt exercitationem sapiente asperiores quas, Quidem iste, pariatur blanditiis nostrum nobis earum officia eum laboriosam placeat? at voluptatum labore laborum neque ullam ipsum odit quod. reprehenderit autem sit doloremque recusandae quaerat, Ducimus quaerat totam eius facere, Iure. laborum vel sequi blanditiis veniam quaerat quia, Voluptate modi. cumque quam officia impedit harum, debitis delectus necessitatibus magni officiis culpa obcaecati. Debitis nemo sed eum ullam similique fugiat id, veritatis facere quidem delectus odit nulla dicta aperiam sint ab voluptatibus perspiciatis eos officiis. Doloribus. consequuntur error dicta repellat incidunt unde nemo, corrupti magnam architecto nulla ut similique saepe maxime culpa sit. Ducimus adipisci perferendis commodi. Voluptatibus quam sit. debitis odit recusandae cupiditate, asperiores nisi sint distinctio nulla autem possimus esse nostrum deserunt. Voluptatum nemo sint delectus consequatur, ipsum mollitia, Debitis aliquam consectetur repudiandae commodi ratione est sit inventore aliquid nam blanditiis aperiam distinctio doloremque nihil sed quae voluptatum cum modi, eveniet alias voluptas harum unde, Hic libero error eveniet saepe ab animi laborum adipisci magnam eos incidunt minus? odio molestiae, Debitis cum molestiae reiciendis ipsa, Error nemo ipsum eius explicabo accusantium dolore. voluptatibus et quos laboriosam maxime eum saepe, Exercitationem nam natus delectus placeat doloribus sunt consequatur autem sapiente. Architecto obcaecati quis reiciendis repellat recusandae sequi exercitationem rerum? Ipsa, mollitia. Ipsam, quas. officia voluptatibus repudiandae, eaque eos quis sit voluptas fugiat quae laudantium adipisci tempora ullam magnam dolorem delectus, Natus alias distinctio deserunt laboriosam placeat doloremque vel quis possimus, laudantium accusantium? Consectetur recusandae eaque voluptas eligendi modi vel ratione libero aperiam rem, Sint qui reprehenderit ut. adipisci tenetur minus cumque, iusto quam id quis harum exercitationem aspernatur sit rem eius nobis libero a nam animi laborum esse accusamus illo provident dolor, Repudiandae, aliquam, Et illum itaque eum beatae facilis nihil nam, Voluptatibus nesciunt veritatis voluptate facere autem molestiae ut similique deserunt eligendi odit: Eius error sit ut praesentium voluptate eum ullam modi architecto. sequi quae. Error obcaecati ducimus debitis ratione nam saepe omnis tempore excepturi natus ex exercitationem necessitatibus minus. minima a ipsa ad repellat placeat ipsam culpa sequi dicta. Ea rem tenetur quibusdam illum magni perferendis saepe quasi quisquam. odio amet adipisci. voluptate repellat voluptates impedit facilis expedita aliquam velit officiis. Nemo maxime illo sapiente omnis corporis iusto sunt similique enim beatae itaque quasi pariatur, voluptas impedit consequuntur ipsam iste delectus unde? Sunt, ipsam quasi. Debitis veniam laborum modi sequi accusantium ut fugit reprehenderit rem hic laudantium aperiam illo nulla odit officiis, saepe, architecto voluptas, nam eos iste aliquid vel! Vero dolorem nemo amet eaque fuga illum, sed fugiat, ullam quo iste facere voluptates!</p> </div> <i class="fas fa-chevron-up"></i> </main> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="script.js"></script> </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 use window.scroll with horizontal scroll to get element position
How to get scroll position in scrollable container
How to animate scroll position to target element in scrollable div?
How to get the position of screen window of browser when scroll down jquery
jQuery calculate position of item in scrollable window and scroll to it
How to get window exact scroll position
jQuery - Prevent scroll element when window scrolled without fix position
How to get the scroll position of an HTML element in a table?
How to get window scroll unit on click .. when a page is animating to top for target position
How to display and transition when scroll position reaches element position in the screen?
Related Tags