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>
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>
I am a beginner. I am trying to make a webpage. But I'm having a problem. I added a class with the help of jQuery so that the background color(white) of the navbar changes when scrolling. I also want to change the color of the link in the navbar so that it can be visible after adding the navbar background color(white) because the navbar links color is white. Scrolling changes the background color of the navbar but not the color of the link.
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$(".header-1").addClass("nav-color");
}
else {
$(".header-1").removeClass("nav-color");
}
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
text-decoration: none !important;
list-style: none;
}
a {
color: #fff;
}
.x {
border: 1px solid #fff;
}
.button {
display: block;
width: 180px;
padding: 15px 20px;
background: transparent;
color: #fff;
font-weight: bold;
text-align: center;
border: 2px solid #fff;
border-radius: 30px;
}
header {
background: green;
/* I've used an image here */
height: 100vh;
color: #fff;
width: 100%;
}
.header-1 {
position: fixed;
width: 100%;
}
/* ============================ */
/* ======= jQuery class ======= */
/* ============================ */
.nav-color {
background: #fff;
}
.nav-color a {
color: #000 !important;
}
/* ============================ */
/* ============================ */
/* ============================ */
.header-2 {
height: 100vh;
display: grid;
place-items: center;
}
.header-2-1 {
width: 50%;
text-align: center;
margin: auto;
}
.header-2-btn {
margin: auto;
}
/* Bootstrap changed */
.navbar a {
color: #fff !important;
}
.navbar-toggler {
color: #fff !important;
}
/* Responsive */
#media (max-width: 576px) {
.header-2-1 {
width: 95% !important;
}
}
#media (max-width: 768px) {
.header-2-1 {
width: 90% !important;
}
}
#media (max-width: 991px) {
.header-1 {
background: #fff;
width: 100% !important;
text-align: center;
}
.header-1 a {
color: black !important;
}
.header-2-1 {
width: 80% !important;
}
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<header id="home">
<div class="header-1">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-transparent">
<div class="container-fluid">
<a class="navbar-brand" href="#">Dabananda Mitra</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-row-reverse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link" href="#">Reviews</a>
<a class="nav-link" href="#">Portfolio</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="header-2 container">
<div class="header-2-1">
<h2>Welcome</h2>
<h1 class="my-4">I'M A WEB DEVELOPER</h1>
<p class="my-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos explicabo magni voluptates rerum laborum cum</p>
DOWNLOAD CV
</div>
</div>
</header>
<section>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor molestias rerum rem eveniet qui modi dignissimos illum, voluptates cum harum distinctio quaerat quidem a et, laboriosam vero. Dolor labore porro vel reiciendis saepe itaque, assumenda autem
quas fugiat error cupiditate ipsam ducimus nesciunt adipisci? Atque obcaecati, nemo ab, doloremque laudantium fugit veritatis inventore dicta sit dolor unde. Ipsam repellendus voluptatum voluptas enim eos consequatur veniam ipsa maxime officiis odio
quae animi fugiat, pariatur dolores quisquam deleniti qui adipisci assumenda, necessitatibus dolor similique. Accusantium vel dolores libero sint voluptate commodi et sunt consequatur doloremque totam. Exercitationem itaque consectetur unde eos iusto!
Ab ex tempore quisquam similique animi rem reiciendis dolor error fugit odio consectetur voluptate incidunt quam soluta veniam, fuga rerum. Vel soluta obcaecati numquam veniam temporibus quia? Cum ullam alias ipsam, quibusdam aut totam officiis magnam
cupiditate odio laudantium, fuga ipsum velit ex illum aspernatur doloremque impedit vitae illo maiores perspiciatis ratione. Ex hic quisquam quis odit debitis, architecto modi delectus deserunt tempore molestias officia a maiores rem eius consequuntur
eaque at iure inventore animi expedita iste, harum cumque. Ut architecto recusandae eligendi facilis sed nemo sapiente, officiis ullam ad quasi accusantium culpa nihil optio incidunt. Ipsum vero reprehenderit laudantium non minima repellat iste consectetur
nesciunt fugiat deleniti id sint asperiores vitae, minus, qui earum! Adipisci eveniet dolor, tempore repellat optio recusandae perspiciatis eos quas commodi animi, vitae voluptate maiores suscipit itaque, explicabo natus minima provident! Omnis, minima
praesentium sit voluptatem amet quibusdam quo obcaecati iusto et asperiores exercitationem nostrum nulla eligendi. Nemo facere itaque odit labore reiciendis, porro rerum, consequatur tempore ipsam repudiandae id omnis quia ea optio corporis? Accusantium,
porro eos cupiditate inventore deserunt ducimus saepe quam eveniet et excepturi sed voluptatem assumenda animi voluptatum consequuntur ut mollitia eius culpa possimus suscipit placeat soluta similique delectus provident! Debitis alias, illum obcaecati
tempore aspernatur et eos soluta repellendus, nulla repudiandae aliquam accusamus quibusdam corrupti rem! Ipsum blanditiis eligendi vel quis dolore ullam cumque excepturi! Molestias id error possimus soluta eum laborum ratione alias sequi, blanditiis
necessitatibus? Debitis officia quas accusamus ipsa. Fugiat doloremque, veniam cupiditate ad architecto enim ratione maiores velit officiis, corporis tempora eligendi! Vel quaerat dolor veniam hic earum dignissimos enim fuga est nulla architecto fugit
porro tempora sapiente culpa provident eum cum deserunt officia, expedita molestiae iste. Doloremque, porro est? Nisi earum, modi repellendus minus reprehenderit at quia, quae consectetur laudantium delectus maiores? Ad quod autem voluptate ex mollitia
illum ipsam fuga quaerat asperiores, dignissimos impedit doloremque aliquid dolorem tempore recusandae ea rem consectetur maiores. Vero sunt, consequuntur delectus provident possimus veniam fuga in iusto quos accusamus rem illum magni animi suscipit!
Reiciendis magnam nulla deserunt maxime eveniet sapiente perferendis ad laborum autem in hic maiores quod, provident cumque sequi? Debitis esse quibusdam dolorum cum? Debitis, eos doloribus obcaecati commodi ipsam error, quam iure voluptatibus deserunt
minima autem repellat ratione quibusdam voluptates quaerat iusto mollitia vel itaque aspernatur ab ut impedit quis magnam sint! Quasi mollitia doloremque iste aperiam incidunt obcaecati quos qui atque laudantium tempora distinctio quam, natus eum aspernatur
eaque sunt aut. Fugiat aperiam saepe autem architecto fuga id, laborum error voluptatum aliquid magni eius iste, soluta rerum, doloribus atque maiores unde tempora a accusantium modi. Illum, voluptas? Laboriosam est laudantium dolore repudiandae maxime,
reiciendis voluptate consequuntur? Iure velit et distinctio odio est saepe neque eum! Voluptatem placeat adipisci suscipit eaque quis nisi quas? Quam hic consectetur quasi, laborum maxime nulla cumque fugit at obcaecati. Deserunt rerum maxime provident
aut ipsum reprehenderit magnam eius nemo aliquam earum quo molestiae, accusamus, voluptatem illo quasi. Fuga dolorum minus, rem officia aliquam debitis ad aut hic ut ratione. Possimus placeat nesciunt nihil, delectus magni unde minus? Nemo quaerat ipsa
ratione sit pariatur quia qui veritatis dolor eius, corporis ea, harum dignissimos illum porro tenetur. Perferendis debitis nemo odit minima ipsam magni ullam itaque vero, rem repellendus dolorum odio iste libero officiis soluta harum quo incidunt!
Dicta magni nulla suscipit voluptatibus itaque inventore consequatur odio aliquid? Suscipit, asperiores tenetur! Nesciunt vitae fugiat mollitia quod nulla quo, quas aperiam ex inventore veniam quis quos obcaecati unde optio culpa maxime, suscipit sunt
repudiandae minima? Eveniet cum porro, sequi illo tempora iste ipsa nisi atque in earum eligendi eum? Unde ipsam explicabo alias quisquam esse delectus sunt dolore ea magni, sed nemo ut nisi, temporibus debitis, et non similique. Fuga quo minima sequi
unde quisquam labore voluptatibus, excepturi aliquid tempore, qui officiis velit in. Iste, enim iure inventore eos, delectus reprehenderit culpa distinctio quos aperiam reiciendis, molestias labore. Quam dignissimos minus unde molestias? Voluptate quae
ex dicta sit culpa! Atque quae, nobis aliquid culpa laborum laboriosam cum similique obcaecati consequatur repellendus natus corrupti quo tenetur qui molestias voluptatem. Cupiditate tempora mollitia commodi tenetur, praesentium, consectetur provident
id maxime odit voluptas perspiciatis qui ipsam facere error voluptatem adipisci quisquam, dolorem similique harum modi laborum at? Aliquam, illo sequi nobis illum veritatis minima odio unde eveniet voluptatibus natus. Eos veniam voluptate id voluptates.
Aliquam ea minima laborum magnam quaerat quibusdam fuga quas sed. Perspiciatis expedita quam hic autem, ipsam, quasi nihil nulla sed harum repellendus corporis laborum error odit quibusdam temporibus inventore nisi sunt veniam qui sapiente sint ipsa
et quas! Magni praesentium, beatae, illum vel rem voluptas porro nulla commodi hic soluta laborum blanditiis atque nostrum natus. Earum accusamus eius veniam, aspernatur quis ad nisi voluptatum? Odit, voluptates dolorum. Alias, magni dolore assumenda
repudiandae veniam ut fugiat quia nam fugit perferendis. Rerum corporis nobis amet natus alias! Nobis nostrum nemo excepturi doloribus temporibus consequuntur repellendus dignissimos rem voluptatum veritatis, similique labore optio facilis aliquid tenetur
autem! Officia praesentium velit obcaecati maiores at. Exercitationem, rem asperiores maiores minima placeat veniam iure voluptatibus illum sint nihil neque sed incidunt numquam ratione obcaecati unde ipsa velit porro tempora quo perspiciatis sit corrupti
quidem? Voluptate magnam, distinctio saepe hic amet adipisci atque reiciendis dicta aliquid nisi vero soluta ad aut animi? Omnis hic laborum eius quasi modi, inventore nesciunt, ut dicta fuga tempore recusandae aliquam autem dolores commodi cum magnam
quisquam, unde velit exercitationem nostrum perspiciatis!
</section>
How can I change the link color of navbar? Help me please.
Thank you.
Use the class like this:
.header-1.nav-color a {
color: #000 !important;
}
instead of this:
.nav-color a {
color: #000 !important;
}
where you add the jQuery classes.
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 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.