I am working on a website. Link to website. You can see the code on Github. Link to code.
If you don't want to do that here is HTML and CSS.
HTML:
<!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">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<link rel="stylesheet" href="Assets/Style.css">
<title>Vaibhav Acharya</title>
</head>
<body>
<div class="notsp">Sorry! Your device is not supported. Try on a device with bigger width/height.</div>
<div class="blur">
<div class="mobnav">
<div class="mbtn mhomeI mactive" onclick="home()">Home</div>
<div class="mbtn maboutI" onclick="about()">About</div>
<div class="mbtn mcontactI" onclick="contact()">Contact</div>
<div class="mbtn">Blog</div>
</div>
</div>
<div class="title"><span>Vaibhav Acharya</span></div>
<nav>
<div class="btn homeI active" onclick="home()"><span class="fa fa-home"></span></div>
<div class="btn aboutI" onclick="about()"><span class="fa fa-info"></span></div>
<div class="btn contactI" onclick="contact()"><span class="far fa-address-book"></span></div>
<div class="btn"><span class="far fa-newspaper"></span></div>
</nav>
<div class="containers" id="home">
<div class="heading">Home</div>
Hey there, Blah blah Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est officiis similique exercitationem architecto provident totam reprehenderit ratione saepe laborum culpa quaerat illo temporibus molestias ducimus explicabo quas sequi quae ipsa, velit deleniti consequuntur! Soluta, non assumenda at esse sequi libero tempora perferendis rerum est nihil sunt pariatur atque dolorum, perspiciatis natus. Ipsa nemo velit dolorum laudantium est deserunt quae eligendi facere ut quo ab, saepe reiciendis nesciunt fugiat, eveniet odit et ratione sapiente veritatis? Ipsum totam sit quisquam dolor dolorum dignissimos qui, laudantium enim mollitia nisi omnis ea pariatur minima optio, libero, atque odio architecto itaque sed iusto officia. Libero vel provident assumenda officiis earum totam impedit sequi dolorem a aspernatur, veniam, consectetur, ducimus laudantium delectus excepturi. Sunt, repudiandae? Laudantium assumenda doloremque aliquid, aut, quas dolorum, excepturi culpa officia iste ratione maxime odit debitis nostrum est dolor. Molestias itaque sint officiis harum perspiciatis hic, fugit aliquid praesentium, unde a, eos quo delectus. Asperiores placeat voluptate itaque! Quae, delectus velit, aut at ea accusamus illum nisi veniam reiciendis quaerat repellendus quibusdam animi est sequi totam ipsa quidem inventore soluta veritatis accusantium assumenda fuga magnam a. Commodi hic eaque facilis doloribus illum voluptas quae ut impedit. Veniam amet fugiat quasi modi aspernatur!
</div>
<div class="containers" id="about">
<div class="heading">About</div>
Hey there, Blah blah Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est officiis similique exercitationem architecto provident totam reprehenderit ratione saepe laborum culpa quaerat illo temporibus molestias ducimus explicabo quas sequi quae ipsa, velit deleniti consequuntur! Soluta, non assumenda at esse sequi libero tempora perferendis rerum est nihil sunt pariatur atque dolorum, perspiciatis natus. Ipsa nemo velit dolorum laudantium est deserunt quae eligendi facere ut quo ab, saepe reiciendis nesciunt fugiat, eveniet odit et ratione sapiente veritatis? Ipsum totam sit quisquam dolor dolorum dignissimos qui, laudantium enim mollitia nisi omnis ea pariatur minima optio, libero, atque odio architecto itaque sed iusto officia. Libero vel provident assumenda officiis earum totam impedit sequi dolorem a aspernatur, veniam, consectetur, ducimus laudantium delectus excepturi. Sunt, repudiandae? Laudantium assumenda doloremque aliquid, aut, quas dolorum, excepturi culpa officia iste ratione maxime odit debitis nostrum est dolor. Molestias itaque sint officiis harum perspiciatis hic, fugit aliquid praesentium, unde a, eos quo delectus. Asperiores placeat voluptate itaque! Quae, delectus velit, aut at ea accusamus illum nisi veniam reiciendis quaerat repellendus quibusdam animi est sequi totam ipsa quidem inventore soluta veritatis accusantium assumenda fuga magnam a. Commodi hic eaque facilis doloribus illum voluptas quae ut impedit. Veniam amet fugiat quasi modi aspernatur!
</div>
<div class="containers" id="contact">
<div class="heading">Contact</div>
Hey there, Blah blah Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est officiis similique exercitationem architecto provident totam reprehenderit ratione saepe laborum culpa quaerat illo temporibus molestias ducimus explicabo quas sequi quae ipsa, velit deleniti consequuntur! Soluta, non assumenda at esse sequi libero tempora perferendis rerum est nihil sunt pariatur atque dolorum, perspiciatis natus. Ipsa nemo velit dolorum laudantium est deserunt quae eligendi facere ut quo ab, saepe reiciendis nesciunt fugiat, eveniet odit et ratione sapiente veritatis? Ipsum totam sit quisquam dolor dolorum dignissimos qui, laudantium enim mollitia nisi omnis ea pariatur minima optio, libero, atque odio architecto itaque sed iusto officia. Libero vel provident assumenda officiis earum totam impedit sequi dolorem a aspernatur, veniam, consectetur, ducimus laudantium delectus excepturi. Sunt, repudiandae? Laudantium assumenda doloremque aliquid, aut, quas dolorum, excepturi culpa officia iste ratione maxime odit debitis nostrum est dolor. Molestias itaque sint officiis harum perspiciatis hic, fugit aliquid praesentium, unde a, eos quo delectus. Asperiores placeat voluptate itaque! Quae, delectus velit, aut at ea accusamus illum nisi veniam reiciendis quaerat repellendus quibusdam animi est sequi totam ipsa quidem inventore soluta veritatis accusantium assumenda fuga magnam a. Commodi hic eaque facilis doloribus illum voluptas quae ut impedit. Veniam amet fugiat quasi modi aspernatur!
</div>
<div class="foot">© Vaibhav Acharya 2018</div>
<div class="mobnavbtn" onclick="mobNav()"><span class="fa fa-bars"></span></div>
<script src="Assets/jquery-3.3.1.min.js"></script>
<script src="Assets/Script.js"></script>
</body>
</html>
CSS:
#import url('https://fonts.googleapis.com/css?family=K2D:100');
html, body{
margin: 0%;
padding: 0%;
max-width: 100%;
}
body{
background: linear-gradient(294deg, #9C27B0, #303F9F);
background-attachment: fixed;
color: white;
font-family: 'K2D','Open Sans', sans-serif;
}
.notsp{
display: none;
}
a{
text-decoration: none;
color: currentColor;
}
.blur{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0,0,0,0.8);
z-index: 2;
display: none;
}
.title{
font-size: 2em;
font-weight: 900;
display: block;
text-align: center;
padding: 15px;
}
.title span{
background-color: rgba(255,255,255,0.6);
padding: 5px;
border-radius: 10px;
border-left: 10px solid rgba(255,255,255,0.6);
cursor: pointer;
}
nav{
display: block;
margin: 0px;
padding: 0px;
text-align: center;
}
.btn{
display: inline-block;
font-size: 3em;
padding: 5px;
padding-left: 50px;
padding-right: 50px;
transition: 0.5s all ease;
opacity: 0.3;
cursor: pointer;
}
.btn:hover{
opacity: 1;
}
.active{
text-shadow: 0 0 016px white;
opacity: 1;
}
.containers{
background-color: rgba(255,255,255,0.4);
min-height: 50vh;
display: block;
padding: 20px;
font-size: 1.3em;
}
#about, #contact{
display: none;
}
.heading{
display: block;
font-size: 2em;
text-align: center;
margin: 0px;
padding: 10px;
padding-top: 0px;
}
.foot{
display: block;
text-align: center;
padding: 10px;
}
.mobnavbtn{
position: fixed;
bottom: 0;
right: 0;
background: linear-gradient(294deg, #9C27B0, #303F9F);
z-index: 3;
margin: 10px;
padding: 15px;
border-radius: 40%;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
cursor: pointer;
display: none;
}
.mobnav{
margin: 0px;
padding: 0px;
}
.mbtn{
display: block;
padding: 5px;
margin: 0px;
font-size: 3.5em;
text-align: center;
background-color: rgba(255,255,255,0.6);
cursor: pointer;
}
.mactive{
background: linear-gradient(294deg, #9C27B0, #303F9F);
}
#media only screen and (max-width: 630px){
nav{
display: none;
}
.mobnavbtn{
display: block;
}
}
#media only screen and (max-width: 319px){
div:not(.notsp), nav{
display: none;
}
.notsp{
display: block;
}
}
#media only screen and (max-height: 550px){
div:not(.notsp), nav{
display: none;
}
.notsp{
display: block;
}
}
So when i try to scroll it on mobile(Google Chrome) a white box appears on bottom of page. It disappears when i take my finger off screen.
Here is a image:
I want to know why it happens and how to remove it?
Issue is caused because of this property being set on the body.
"background-attachemnt:fixed;". removing this property fixes it.
Related
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.
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>
Hello everyone~ I would like to ask that I am currently making a pop-up window, and I have a problem!
It’s because of the excessive content of the website that scrolls will appear when the pop-up window appears, so when the mouse is scrolled, the text behind it will still scroll.
I am a beginner in programming and I don’t know how to prevent scrolls from appearing. Don't let the content of the rear website scroll?
// 點按鈕彈出廣告
$(function(){
$('.js-btn').click(function(){
$('.js-ad').fadeIn();
});
})
// 點關閉按鈕關閉廣告
$(function(){
$('.js-close').click(function(){
$('.js-ad').fadeOut();
});
})
// 點灰色區域關閉廣告，但是藍色區域不關閉
$(function(){
$('.js-ad').click(function(e){
if(e.target.classList.contains('js-ad')){
$(this).fadeOut();
}
})
})
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.btn {
text-decoration: none;
padding: 30px;
background-color: #ee3f4d;
color: #fff;
border-radius: 8px;
transition: 0.5s;
}
.btn:hover {
background-color: #ea1725;
box-shadow: 0px 6px 2px rgba(0, 0, 0, 0.1);
}
.ad {
position: fixed;
justify-content: center;
align-items: center;
display: none;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
z-index: 99999;
}
.card {
width: 300px;
height: 300px;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
background-color: #0f7bff;
color: #fff;
border-radius: 20px;
padding: 10px;
line-height: 2;
}
.card .close {
display: inline-block;
text-decoration: none;
padding: 10px;
background-color: #e5f75b;
color: #222;
border-radius: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
點擊出現廣告視窗
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam inventore et reiciendis id commodi vero dignissimos laborum rem. Unde qui nam quia totam ut dolores. Pariatur debitis a eveniet ipsum voluptatum, maxime corporis praesentium nesciunt labore facere culpa voluptate rerum neque laborum perspiciatis. Officiis mollitia, provident ut aliquid incidunt corporis sapiente id. Architecto dicta ipsam neque dignissimos autem cum quae distinctio assumenda, doloribus nulla numquam corporis beatae quidem voluptatum? Vero consequuntur aperiam inventore fugit odio temporibus reprehenderit voluptate maiores. Magni magnam fugit reprehenderit adipisci explicabo, eius, esse odio tempore modi nihil obcaecati dolorem vel ad veniam labore amet molestiae, nostrum eligendi aliquid. Placeat autem, odio nihil consequuntur dolorem expedita fugiat quae accusamus distinctio sit tempora. Fugit, quidem expedita aspernatur ipsum non praesentium ad harum nemo animi aliquid nulla voluptates ducimus laudantium. Ex, nesciunt autem totam et minima, libero a dicta magnam unde ullam repudiandae! Ab quis tenetur beatae reiciendis, omnis quidem dignissimos, mollitia deleniti a eaque, possimus blanditiis impedit eveniet amet distinctio? Eaque veritatis repudiandae voluptatum. Nobis reiciendis rem, provident autem aliquam deserunt voluptatibus, omnis possimus temporibus, sequi dolorum? Doloribus, obcaecati? Quae ut cupiditate iste nesciunt, ratione quod quis porro ea explicabo dolorem vitae deleniti commodi fugiat sit. Recusandae natus hic magnam dolor aliquam deleniti aperiam quisquam iure, voluptates dolorum nam repudiandae similique temporibus, totam, perspiciatis iusto eum nemo? Quibusdam incidunt culpa officia blanditiis unde debitis, dolore cum perferendis veniam, velit eos. Tempore vel modi pariatur eius saepe nihil necessitatibus hic, fugiat minima qui est id at! Ducimus quaerat veritatis adipisci nemo ut quos ipsum hic architecto, incidunt eveniet laborum eligendi, doloribus quod beatae numquam aspernatur quis porro illum qui, magni maiores natus aliquid. Atque, amet. Repellendus odio eveniet nisi, animi voluptates voluptatum maxime quae consequatur deserunt corporis repellat odit maiores provident alias ipsa earum ipsam! Alias deleniti officiis cumque repellat. Voluptates nemo repellendus cumque suscipit veniam distinctio dolor voluptatem rem debitis, consectetur molestias perferendis neque, impedit quam non ipsa. Corporis ipsa laborum iusto quidem commodi, quas corrupti recusandae officiis qui animi, dolores velit eius dicta ratione iure voluptatibus! Unde voluptatibus praesentium animi. Magnam minus illum nulla repellendus, sapiente, repellat earum illo omnis, maxime quia tenetur consectetur pariatur eos sit deserunt corrupti commodi dolores. Dolore impedit optio nemo quis at, nesciunt consectetur harum cupiditate. Nesciunt voluptatum sequi saepe sit omnis ut at vitae neque, beatae consequatur, sunt modi, voluptas doloremque natus. Eveniet, autem suscipit libero molestias iusto velit accusamus accusantium tenetur vel minus nesciunt, enim unde esse officia omnis. Fugiat dolore rem blanditiis necessitatibus qui, sit eaque corporis labore ipsa placeat fugit dolorum dolores assumenda dolor. Velit, a alias dicta fugiat vitae nisi doloremque amet quisquam natus porro asperiores perferendis nobis illum consequuntur veritatis cupiditate suscipit veniam. Praesentium dignissimos ex debitis nihil, numquam earum ad voluptatibus iste pariatur atque repellat consectetur reprehenderit? Nobis quisquam, sapiente consectetur reprehenderit modi doloremque nulla iste veniam esse recusandae facere ab quo officiis, placeat accusantium, aliquid fugit rerum similique voluptate. Dolorum magni quas sequi corporis architecto, dignissimos cupiditate recusandae! Temporibus suscipit at mollitia odio ipsa! Saepe harum odit esse dolores magnam eos rem quo animi laboriosam. Debitis repudiandae laborum, ex dolores natus dolorum! Rerum nam, sunt corrupti voluptatum quisquam debitis pariatur molestias repudiandae consectetur, rem quae inventore saepe vitae dolor. Repudiandae quas laudantium quo dignissimos ad ea illum delectus, dolorum animi culpa. Impedit dolorem expedita soluta quisquam id consequatur quam esse laborum maxime amet, quae ipsum iusto et nihil voluptas aut magnam laboriosam repudiandae, facere optio architecto officia, quidem ex eos. Doloremque saepe praesentium amet deleniti dolor culpa illo itaque quibusdam, quia, iusto id! Blanditiis fuga deserunt perspiciatis similique nisi ea, sed quia ipsum perferendis dolor porro quibusdam explicabo, itaque quam voluptates laboriosam repudiandae commodi a dolore tempora autem sunt vero? In doloremque voluptas quae, possimus ducimus blanditiis maxime laudantium aliquid ex. Dolor ipsam rerum unde asperiores ipsa fugiat eum. Explicabo quos sequi expedita rerum amet suscipit, possimus non illo accusamus, enim praesentium mollitia rem recusandae pariatur sapiente error. Quod in, aliquid aliquam eum sequi nemo sint, enim facilis cupiditate laboriosam incidunt praesentium atque recusandae laborum sapiente ducimus. Aperiam laboriosam distinctio non velit, itaque a illum blanditiis sequi provident architecto? Dolorum quibusdam laboriosam officia asperiores labore exercitationem ipsa animi odit! Rem saepe nobis tempore quis modi, odit quidem odio. Maxime magni animi ipsum enim vitae, eaque omnis eos, perspiciatis soluta architecto iste? Consequatur maxime sed eaque accusamus expedita. Delectus nam perferendis totam? Error labore voluptate maiores esse. Molestiae, laborum eligendi. Tempora est culpa, hic quas nemo iste numquam doloribus sunt qui dolores nostrum odio fugit labore voluptates modi cupiditate laboriosam odit architecto quasi ullam! Quo laudantium modi aperiam dignissimos harum repellendus? Maiores, rerum praesentium dolor, magni eos, provident officia libero aliquid optio architecto repudiandae nostrum deserunt cum earum accusantium nobis itaque commodi facilis. Eius optio vel adipisci nesciunt iste, quae recusandae sint cumque, corrupti, reprehenderit enim quas maiores totam facere illo labore porro sapiente sed ea quod atque quam. Maxime quidem voluptates error sequi ullam! Ipsa, ex incidunt commodi cupiditate exercitationem modi dicta. Assumenda, earum modi eum commodi officiis architecto quibusdam cumque molestias porro sapiente repellat, sequi dolores, voluptatibus odio. Qui dignissimos numquam repudiandae consequatur corrupti. Sit corrupti beatae vel, labore quam, cum aspernatur aliquam minima tempora commodi velit eveniet nostrum neque necessitatibus sunt ea mollitia porro eligendi, fuga possimus veniam quia. Mollitia magnam minima dolorem ex molestias quis esse vel dolore qui, aut commodi quasi aliquam vitae blanditiis in voluptatibus obcaecati consequatur consequuntur ducimus ipsa facilis illum. Vel laboriosam nihil necessitatibus, incidunt cupiditate nisi corrupti ipsam vero velit accusamus, dolore voluptatibus exercitationem atque. Molestiae necessitatibus error sint. Iusto temporibus error voluptas corrupti tenetur dignissimos mollitia similique aspernatur, quas, ipsam iste voluptate? Adipisci vel animi ea, id aspernatur maiores ipsam labore quia perferendis delectus. Debitis autem praesentium quae, nulla sapiente, cupiditate quo iure dignissimos dolores deserunt magni laudantium nostrum facere earum odio accusantium reprehenderit fugit laboriosam. Pariatur rem delectus, perferendis provident distinctio iste tempora cumque! Vero error ab amet praesentium expedita debitis ut, soluta alias dolores ea dolore placeat architecto reiciendis voluptatum totam eaque laboriosam.</p>
<div class="ad js-ad">
<div class="card js-card">
<h2>我是廣告</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, fugiat.</p>
關閉
</div>
</div>
</body>
You can toggle a class in your function that will add an overflow-y: hidden to your body and remove it when you run the fadeOut() function.
NOTE: I changed the elements in the modal as something in your code was breaking the snippit. Prolly the javascript in the a href.
// 點按鈕彈出廣告
$(function() {
$('.js-btn').click(function() {
$('.modal').fadeIn();
// optional to add flex display when faded in
$('.modal').css('display', 'flex')
$(document.body).addClass('no-scroll');
});
})
// 點關閉按鈕關閉廣告
$(function() {
$('.modal-close').click(function() {
$('.modal').fadeOut();
$(document.body).removeClass('no-scroll');
});
})
// 點灰色區域關閉廣告，但是藍色區域不關閉
$(function() {
$('.modal').click(function(e) {
if (e.target.classList.contains('modal')) {
$(this).fadeOut();
$(document.body).removeClass('no-scroll');
}
})
})
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: start;
position: relative;
}
.par {
height: 3000px;
}
.btn {
text-decoration: none;
padding: 30px;
background-color: #ee3f4d;
color: #fff;
border-radius: 8px;
transition: 0.5s;
}
.btn:hover {
background-color: #ea1725;
box-shadow: 0px 6px 2px rgba(0, 0, 0, 0.1);
}
.modal {
position: fixed;
justify-content: center;
align-items: center;
display: none;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
z-index: 99999;
}
.modal-card {
width: 300px;
height: 300px;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
background-color: #0f7bff;
color: #fff;
border-radius: 20px;
padding: 10px;
line-height: 2;
}
/* added the class to toggle the overflow-y on the body
when the JS function to fadeIn()/fadeOut() is fired */
.no-scroll {
overflow: hidden;
}
.modal-card .close {
display: inline-block;
text-decoration: none;
padding: 10px;
background-color: #e5f75b;
color: #222;
border-radius: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
點擊出現廣告視窗
<p class="par"> Mollitia magnam minima dolorem ex molestias quis esse vel dolore qui, aut commodi quasi aliquam vitae blanditiis in voluptatibus obcaecati consequatur consequuntur ducimus ipsa facilis illum. Vel laboriosam nihil necessitatibus, incidunt cupiditate nisi
corrupti ipsam vero velit accusamus, dolore voluptatibus exercitationem atque. Molestiae necessitatibus error sint. Iusto temporibus error voluptas corrupti tenetur dignissimos mollitia similique aspernatur, quas, ipsam iste voluptate? Adipisci vel
animi ea, id aspernatur maiores ipsam labore quia perferendis delectus. Debitis autem praesentium quae, nulla sapiente, cupiditate quo iure dignissimos dolores deserunt magni laudantium nostrum facere earum odio accusantium reprehenderit fugit laboriosam.
Pariatur rem delectus, perferendis provident distinctio iste tempora cumque! Vero error ab amet praesentium expedita debitis ut, soluta alias dolores ea dolore placeat architecto reiciendis voluptatum totam eaque laboriosam.</p>
<div class="modal">
<div class="modal-card">
<h2>This is a header</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, fugiat.</p>
<button class="modal-close">Close</button>
</div>
</div>
I have a problem but my thoughts are knotted, I want to get help here!
"Requirement"
when the mouse hoveres to the yellow block, the blue block should be slowly slid down from its original place.
When the mouse leaves, the blue block can be slowly folded upwards.
I don’t know how to write it here, it’s easier?
Thank you everyone for watching my question, and thank you again.
$(document).scroll(function(){
var scrollH=$(document).scrollTop();
if(scrollH > 60){
$('.nav').addClass('up');
$('.nav2').addClass('down');
}else if(scrollH < 90){
$('.nav').removeClass('up');
$('.nav2').removeClass('down');
}
})
$(function() {
$(".nav2").on("mouseover", function() {
window.scrollTo(0,0);
});
})
//Here is the code I am trying to complete
$(function(){
$('.nav').mouseenter().css({
'top':'100px',
'transition':'1s',
});
})
.header {
padding: 10px;
text-align: center;
height: 60px;
background-color: red;
color: #fff;
font-size: 60px;
position: sticky;
top: 0;
left: 0;
z-index: 2;
}
.nav2 {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #e5d549;
color: #222;
padding: 20px;
position: fixed;
top: 80px;
left: 0px;
right: 0px;
opacity: 0;
z-index: -1;
}
.nav2.down {
-webkit-animation: fadeIn 1s forwards;
animation: fadeIn 1s forwards;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
z-index: 2;
}
.nav2 .breadcrumb {
display: flex;
}
.nav2 .breadcrumb .item::after {
content: ">";
padding: 0px 8px;
}
.nav2 .breadcrumb .item::after:last-child {
display: none;
}
.nav2 .search {
display: flex;
align-items: center;
border: 1px solid #222;
padding: 3px;
}
.nav2 .search .fas {
color: #fff;
padding: 6px;
}
.nav2 .search .btn {
display: inline-block;
padding: 2px;
text-decoration: none;
background-color: #e5d549;
color: #222;
border-radius: 4px;
margin-left: 3px;
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.nav {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
background-color: #1768ac;
padding: 20px;
z-index: 1;
margin-bottom: 10px;
}
.nav.up {
-webkit-animation: fadeout 1s forwards;
animation: fadeout 1s forwards;
}
.nav .filter {
display: flex;
width: 100%;
order: 1;
color: #fff;
padding-left: 10px;
padding-bottom: 20px;
}
.nav .filter .item {
margin: 10px;
padding-bottom: 10px;
border-bottom: 2px solid #fff;
}
.nav .category {
display: flex;
order: 2;
}
.nav .category .item {
color: #fff;
margin-left: 20px;
}
.nav .search {
display: flex;
align-items: center;
border: 1px solid #ccc;
padding: 3px;
order: 3;
}
.nav .search .fas {
color: #fff;
padding: 6px;
}
.nav .search .btn {
display: inline-block;
padding: 2px;
text-decoration: none;
background-color: #e5d549;
color: #222;
border-radius: 4px;
margin-left: 3px;
}
#-webkit-keyframes fadeout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes fadeout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.content {
padding: 20px;
background-color: #222;
color: #fff;
margin-top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="header">LOGO</div>
<!-- 第一個顯示的畫面 -->
<div class="nav">
<ul class="filter">
<li class="item">hot</li>
<li class="item">NEW</li>
</ul>
<ul class="category">
<li class="item">item</li>
<li class="item">item</li>
<li class="item">item</li>
<li class="item">item</li>
<li class="item">item</li>
<li class="item">item</li>
</ul>
<div class="search">
<label><i class="fas fa-search"></i></label>
<input class="search_input" type="text" >
<a class="btn" href="javascript:;">BTN</a>
</div>
</div>
<!-- 滑動後會顯示的畫面 -->
<div class="nav2">
<ul class="breadcrumb">
<li class="item">item</li>
<li class="item">item</li>
<li class="item">item</li>
</ul>
<div class="search">
<label><i class="fas fa-search"></i></label>
<input class="search_input" type="text" >
<a class="btn" href="javascript:;">BTN</a>
</div>
</div>
<div class="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.lorem100Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.
</div>
</div>
Although it's not jquery I think it does what you want. Your button placement cause the blue and yellow divs to go beyond the screen because of your padding. You'll want to clean that up. You can change the transition times and also have different times by not using all but rather listed opacity and height separalty.
let nav = document.getElementById("nav");
let navBounds = nav.getBoundingClientRect();
let nav2 = document.getElementById("nav2");
let nav2Bounds = nav2.getBoundingClientRect();
let bodyBounds = document.body.getBoundingClientRect();
let content = document.getElementById("content");
let contentBounds = content.getBoundingClientRect();
window.addEventListener("scroll", (e) => {
navBounds = nav.getBoundingClientRect();
nav2Bounds = nav2.getBoundingClientRect();
bodyBounds = document.body.getBoundingClientRect();
contentBounds = content.getBoundingClientRect();
if (window.scrollY == 0) {
nav.style.height = "min-content";
nav.style.opacity = "1";
nav2.style.height = "0";
nav2.style.opacity = "0";
content.style.top = 60 + navBounds.y + navBounds.height + "px";
} else if (e) {
nav.style.height = "0";
nav.style.opacity = "0";
nav2.style.height = "50px";
nav2.style.opacity = "1";
}
});
nav2.addEventListener("mouseover", (e) => {
nav.style.height = "min-content";
nav.style.opacity = "1";
nav2.style.height = "0";
nav2.style.opacity = "0";
});
.header {
padding: 10px;
text-align: center;
height: 60px;
background-color: red;
color: #fff;
font-size: 60px;
position: sticky;
top: 0;
left: 0;
z-index: 2;
}
.nav2 {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #e5d549;
color: #222;
height: 0;
padding: 20px;
position: fixed;
top: 80px;
left: 0px;
right: 0px;
opacity: 0;
z-index: 2;
transition: all 0.5s linear;
}
.nav2 .breadcrumb {
display: flex;
}
.nav2 .breadcrumb .item::after {
content: ">";
padding: 0px 8px;
}
.nav2 .breadcrumb .item::after:last-child {
display: none;
}
.nav2 .search {
display: flex;
align-items: center;
border: 1px solid #222;
padding: 3px;
}
.nav2 .search .fas {
color: #fff;
padding: 6px;
}
.nav2 .search .btn {
display: inline-block;
left: -20px;
padding: 2px;
text-decoration: none;
background-color: #e5d549;
color: #222;
border-radius: 4px;
margin-left: 3px;
}
.nav {
position: fixed;
top: 80px;
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
height: min-content;
background-color: #1768ac;
padding: 20px;
z-index: 1;
margin-bottom: 10px;
transition: all 1s linear;
}
.nav .filter {
display: flex;
width: 100%;
order: 1;
color: #fff;
padding-left: 10px;
padding-bottom: 20px;
}
.nav .filter .item {
margin: 10px;
padding-bottom: 10px;
border-bottom: 2px solid #fff;
}
.nav .category {
display: flex;
order: 2;
}
.nav .category .item {
color: #fff;
margin-left: 20px;
}
.nav .search {
display: flex;
align-items: center;
border: 1px solid #ccc;
padding: 3px;
order: 3;
}
.nav .search .fas {
color: #fff;
padding: 6px;
}
.nav .search .btn {
display: inline-block;
padding: 2px;
text-decoration: none;
background-color: #e5d549;
color: #222;
border-radius: 4px;
margin-left: 3px;
}
.content {
position: relative;
top: 220px;
padding: 20px;
background-color: #222;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="header">LOGO</div>
<!-- 第一個顯示的畫面 -->
<div class="nav" id="nav">
<ul class="filter">
<li class="item">hot</li>
<li class="item">NEW</li>
</ul>
<ul class="category">
<li class="item">item</li>
<li class="item">item</li>
<li class="item">item</li>
<li class="item">item</li>
<li class="item">item</li>
<li class="item">item</li>
</ul>
<div class="search">
<label><i class="fas fa-search"></i></label>
<input class="search_input" type="text">
<a class="btn" href="javascript:;">BTN</a>
</div>
</div>
<!-- 滑動後會顯示的畫面 -->
<div class="nav2" id='nav2'>
<ul class="breadcrumb">
<li class="item">item</li>
<li class="item">item</li>
<li class="item">item</li>
</ul>
<div class="search">
<label><i class="fas fa-search"></i></label>
<input class="search_input" type="text">
<a class="btn" href="javascript:;">BTN</a>
</div>
</div>
<div class="content" id='content'>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.lorem100Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita vitae dolores accusantium voluptas facilis sint corporis, soluta esse nostrum culpa voluptatem temporibus est quidem adipisci laboriosam, mollitia suscipit nobis eveniet tenetur maxime! Explicabo quos, vitae officia commodi asperiores nobis dolorem mollitia minima reiciendis praesentium porro, eum soluta fuga. Eius dolorum debitis reprehenderit aut provident maiores iusto inventore molestiae tempora beatae fugit itaque hic, ad illo accusamus id quasi harum quis amet, incidunt nostrum nam. Expedita, nostrum. Enim, aperiam. Illum alias iure quas illo sint, deleniti optio porro velit deserunt! Quasi molestiae, nisi doloremque veniam earum veritatis libero ea assumenda est.
</div>
</div>
Taking an intro web design class so my knowledge is very limited. I'm working on a page that is supposed to display modals after clicking on an image. It seems to be working fine except for when they scroll down first then click the modal. When that happens the modal is cut off and doesn't display in the whole page. After some searching, I know Height 100% doesn't work if the user scrolls so is there any way to solve that? Here is my code, apologies if it's not written well, modals haven't been taught in class yet so I had watch some videos on youtube to make this.
Use the main model wrapper position: fixed; height: 100%; width: 100%; and for stopping the scrolling makes body overflow: hidden; as you already did. After close the modal make the body overflow: auto/scroll.
For better understanding use this guideline [ similar to bootstrap 4 ]
document.getElementById('modal-btn').addEventListener('click', function(){
document.querySelector('.modal').classList.add('active');
document.body.classList.add('modal-has-opened');
});
document.getElementById('modal-hide').addEventListener('click', function(){
document.querySelector('.modal').classList.remove('active');
document.body.classList.remove('modal-has-opened');
})
.modal{
position: fixed;
top: 0;
left: 0;
z-index: 9999999999;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
overflow-y: auto;
display: none;
}
.modal.active{
display: block;
}
.modal-content{
width: 80%;
background-color: #fff;
padding: 50px;
border: 1px solid #000;
margin: 1rem auto;
box-sizing: border-box;
}
body{
background-color: #f4f8ff;
font-family: segoe ui;
font-size: 1rem;
line-height: 1.5;
}
.wp{
width: 90%;
margin: 1rem auto;
background-color: #fff;
border: 1px solid #000;
padding: 20px;
box-sizing: border-box;
}
#modal-btn{
padding: .25rem 1.25rem;
font-family: segoe ui;
font-size: 1rem;
line-height: 1.5;
cursor: pointer;
}
#media(max-width: 442px){
.modal-content{
width: 98%;
}
}
.modal-has-opened{
overflow: hidden;
padding-right: 17px !important;
}
<div class="wp">
<div class="title">
I am fine
</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel ipsa hic recusandae dolor. Cumque, ea. Fugiat ratione laudantium blanditiis dolore expedita? Adipisci inventore saepe minus quisquam natus officiis enim! Quia in explicabo aliquid illo voluptate nam laboriosam ad minus voluptas, repellendus provident. Temporibus voluptatum ut quia cum possimus inventore ratione?</p>
<button id="modal-btn">
Open Modal
</button>
</div>
<div class="wp">
<div class="title">
I am fine
</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel ipsa hic recusandae dolor. Cumque, ea. Fugiat ratione laudantium blanditiis dolore expedita? Adipisci inventore saepe minus quisquam natus officiis enim! Quia in explicabo aliquid illo voluptate nam laboriosam ad minus voluptas, repellendus provident. Temporibus voluptatum ut quia cum possimus inventore ratione?</p>
</div>
<!-- Main Modal -->
<div class="modal">
<div class="modal-content">
I am the content
<button id="modal-hide">
Close Modal
</button>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, fugit quo? Illo saepe magni molestias, accusantium molestiae, similique quibusdam officia fuga id adipisci suscipit architecto, omnis quo cum labore fugiat. Facere vel nulla blanditiis, voluptatem animi debitis, asperiores alias error sed tempora cum, architecto quia cumque distinctio sit ab nemo minima eveniet esse possimus deleniti omnis? Modi unde repellat quasi reiciendis suscipit corporis explicabo! Quaerat eveniet, ad iusto commodi officia ea quae dolor, quia architecto quibusdam voluptate autem vero. Eaque quasi temporibus recusandae. Quasi assumenda vero in odio sit neque modi deleniti quaerat laborum. Reiciendis dicta sunt laborum assumenda aliquid cumque sint recusandae temporibus itaque nisi, velit magnam officia inventore, id laboriosam! Aliquam expedita voluptate vel neque aspernatur obcaecati minus, tempora laudantium illum, eveniet totam eum incidunt. Quo consectetur dolorum, aliquid quas dicta quasi nisi soluta eaque earum nostrum exercitationem possimus tempore quisquam distinctio ducimus deleniti modi consequatur quod obcaecati maxime rem. Totam quos nisi natus laudantium nobis culpa fugit aspernatur quis voluptatum consequuntur perferendis incidunt fugiat alias quaerat architecto deserunt at, consequatur dolorum sequi sed, fuga quia! Officia dignissimos non id quam quibusdam ipsam cupiditate laborum blanditiis placeat minus cumque, harum expedita accusantium eligendi quo similique debitis fugiat eius natus? Placeat quis consectetur hic natus quam veritatis earum ipsam minima dolorem molestiae nemo fuga exercitationem vero repudiandae facere delectus autem iste at saepe sapiente, veniam doloremque! Error dolor dolorem cupiditate ab qui doloribus sapiente, cum eaque consectetur debitis aliquid maiores perspiciatis dignissimos officia ea possimus molestias? Earum rerum reiciendis possimus amet, voluptas qui minima velit veniam at consequuntur optio iusto repellat eveniet placeat autem ea, ipsam sunt ab commodi quos maiores. Ad a voluptatem quasi in molestiae expedita dolorem rerum eius id dignissimos neque sunt officia magnam et repellat suscipit, soluta fuga temporibus porro ab omnis nesciunt! Deleniti itaque quae, accusamus reprehenderit minus repellendus cupiditate nihil earum in, dolorem illum nobis excepturi velit ipsam modi dolores praesentium? Necessitatibus doloribus animi aut quos provident iusto reiciendis, asperiores corrupti voluptatem ipsa veniam libero ullam illo iure rem harum laborum porro at, neque, cum maxime tempora? Deleniti cupiditate omnis nesciunt error asperiores delectus quo architecto dolorem ut nostrum. Dolorem blanditiis quos est delectus quo soluta illo officiis, eum rem ad minus corporis optio minima cumque voluptates maiores ipsa quas! At numquam tempora explicabo soluta. Natus perferendis cumque fuga iusto nostrum porro nihil exercitationem incidunt suscipit voluptatum vero, rem molestias, commodi sit, corporis animi aliquid aperiam quam. Blanditiis, minima necessitatibus. Maxime, optio officiis quia commodi consectetur dignissimos omnis accusantium, nesciunt reiciendis illum voluptates id aspernatur officia suscipit, numquam earum recusandae voluptas voluptate eum illo nemo. Ea ipsam laboriosam similique veniam nesciunt labore esse laborum nulla. Laboriosam pariatur ex ipsa assumenda ad soluta alias, explicabo id accusamus nulla non reprehenderit perspiciatis quas nisi. Unde ad voluptatem quis, quo repellendus odit sint tempore non ex, similique architecto dolor. Eius quaerat enim accusamus nobis animi dignissimos earum eaque atque culpa optio esse iusto iure adipisci, deleniti qui voluptate. Dolor velit possimus placeat a quidem commodi quod?
</p>
</div>
</div>
I'm trying to modify the look of the scrollbar in my ReactJS application.
Basically, I would like to have something like the following:
I've tried to use CSS properties, e.g. -webkit-scrollbar, -webkit-scrollbar-track and -webkit-scrollbar-thumb, but I don't see any changes.
I searched online, but all I can find are 3rd party libraries which provide custom scrollbars.
Is there any way to do that without having to rely on an external dependency?
You can definitely do this using css only but browser support isn't that great which is why many JavaScript solutions exist. You can reduce the width of the -webkit-scrollbar-track by modifying the border-right and left:
border-left: 5px solid gray;
border-right: 5px solid gray;
As for the -webkit-scrollbar-thumb you can make it look as the image you provided by modifying the border radius:
border-radius: 10px;
the width of the scrollbar can be modified using the -webkit-scrollbar:
body::-webkit-scrollbar {
width: 15px;
}
Modifying a pen I found to look close to your desired design:
https://codepen.io/rasso/pen/QWWxPQo
html {
background: #2a2d46;
height: 100%;
overflow: hidden;
}
body {
height: 100%;
overflow: scroll;
width: 80%;
max-width: 600px;
margin: 0 auto;
padding: 3em;
font: 100%/1.4 serif;
border: 1px solid rgba(0, 0, 0, 0.25);
}
p {
margin: 0 0 1.5em;
}
body::-webkit-scrollbar {
width: 15px;
background: #4d4e5a;
color: #333;
}
body::-webkit-scrollbar-track {
background: #595a62;
border-left: 5px solid #2a2d46;
border-right: 5px solid #2a2d46;
}
body::-webkit-scrollbar-thumb {
background-color: #fff;
border-radius: 10px;
}
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem deleniti accusantium quasi ab ad officia cupiditate sed aliquam nobis expedita velit dolorum perspiciatis pariatur nam vero et magnam soluta tempora!</div>
<div>Eveniet deserunt consequatur porro molestiae nulla optio quis totam libero iste nemo odit eum facilis sapiente. Harum similique cupiditate voluptas ea optio sunt molestias eius ab qui obcaecati nesciunt id?</div>
<div>Necessitatibus delectus sint vitae eos quasi optio esse dignissimos enim laborum ipsum harum perspiciatis eaque. Magnam fugiat delectus neque laboriosam in accusamus a veniam inventore asperiores consequatur nihil quae quo.</div>
<div>Eligendi quaerat nesciunt sint nobis qui? Temporibus maiores esse molestiae hic cum culpa sed recusandae dolore sequi modi. Quos illum debitis odio consequatur voluptatum error aliquam rem similique officia recusandae.</div>
<div>Ex suscipit earum reiciendis eaque dolorem inventore accusantium modi voluptatum saepe cum quam tempora autem corrupti illum deleniti iure rerum mollitia quo ducimus soluta ea! Illum aliquid consectetur vitae quod?</div>
<div>Minus rem tempora quo. Deleniti mollitia dignissimos laborum quis quos facilis dolore soluta error provident recusandae veniam minus consequatur blanditiis. Facere tempore praesentium soluta fugiat quia eligendi dolores ullam doloribus!</div>
<div>Aut nulla perferendis officiis accusamus ut aspernatur hic possimus amet blanditiis incidunt repudiandae ullam inventore ipsam recusandae nihil provident facilis totam quibusdam natus eligendi optio quia sapiente rerum quos illo?</div>
<div>Porro soluta nisi impedit voluptatem ex accusantium facilis amet quod blanditiis quia similique totam enim id ratione minus quo modi sequi nam dicta iste aliquid itaque velit accusamus quibusdam consequuntur.</div>
<div>Ab assumenda in ad nesciunt recusandae labore voluptates vero suscipit tenetur ullam sint beatae odio harum quo aperiam quas temporibus pariatur consectetur saepe eveniet minus voluptatem atque iusto similique repudiandae?</div>
<div>In enim odit repellat maxime harum eum expedita fuga vel eaque quaerat optio hic sapiente eveniet neque dolorum eligendi pariatur possimus aliquid minus officiis mollitia quia voluptates sunt nulla est!</div>