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 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.
$(function(){
$(window).scroll(function () {
var scrollVal = $(this).scrollTop();
var adscrtop =$(".header").offset().top
// 在 RWD 767以下不作動
if(window.screen.width>767){
if(scrollVal> adscrtop){
$(".banner").css({"position":"fixed","top":"60px"});
}else{
$(".banner").css({"position": "static"});
}
}
});
});
.header{
max-width:768px;
margin: 0 auto;
}
.nav{
position: sticky;
top:0px;
width: 100%;
height: 60px;
background-color: #f55c47;
z-index:99;
}
.container{
display: flex;
justify-content:space-between;
}
.main{
position: sticky;
top:60px;
flex:2;
background-color: #9fe6a0;
padding:10px;
}
.banner{
flex:1;
width: 200px;
height: 100px;
background-color: #564a4a;
}
.img{
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
<div class="nav"></div>
<div class="container">
<div class="main">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem quae maiores, quibusdam doloribus eum excepturi ab fugit dolor vel, est molestiae magni tenetur nihil, non architecto aperiam. Consectetur tempore atque doloribus exercitationem veniam. Quibusdam, odio nisi at similique magnam nobis, voluptates non iste laudantium in quo harum soluta voluptatibus vitae labore modi ullam minima enim placeat nesciunt assumenda perspiciatis cumque! A modi delectus assumenda totam, pariatur harum! Odio adipisci maxime expedita beatae hic vero natus necessitatibus! Error earum at natus nemo! Quae aliquid minima quasi exercitationem eum, iure rerum consequatur ipsa. Optio repellendus quibusdam quia incidunt accusamus beatae ex? Accusantium nam, enim esse fugit repellendus dignissimos amet reiciendis nulla porro quo quis facere unde nesciunt culpa molestias sunt a beatae non ad. Voluptatibus, velit numquam. Adipisci molestiae in commodi non officiis facilis repellendus, doloremque cupiditate dolorum nostrum neque magnam aut asperiores quo nam id optio facere nesciunt praesentium. Repellat provident vero rem, tempore ad possimus accusantium perferendis! Architecto repellendus, error numquam necessitatibus voluptatibus asperiores dolorem eius quos beatae a doloremque velit suscipit perspiciatis nisi in tempora illum quidem? In totam fugit mollitia libero sequi voluptates soluta praesentium dolor nihil! Magnam sunt animi omnis in repudiandae cum laudantium nemo unde nulla necessitatibus mollitia nihil accusantium hic voluptas ab facilis aperiam ipsum, natus suscipit corporis. Alias quidem beatae, dolore et recusandae nisi optio error laboriosam temporibus minima voluptatibus reiciendis ipsam officia expedita totam asperiores at provident? Rerum illo provident vitae asperiores optio. Quas est obcaecati consequuntur accusantium quasi possimus soluta architecto adipisci quisquam. Magni, suscipit, quisquam quasi iure architecto expedita reiciendis vitae nulla consequuntur ex illo. Nobis accusantium et eveniet animi, quibusdam sunt beatae consequatur error, qui impedit rerum exercitationem, nulla cupiditate distinctio? Repudiandae fuga excepturi hic ex unde sequi labore, nulla sapiente, distinctio tempora et, dignissimos fugiat inventore a nemo rerum maiores nihil soluta laudantium eius ipsa accusantium explicabo similique! Atque, iusto ipsam! Sequi, nam, laborum velit repellat perferendis voluptatem reprehenderit, odio commodi blanditiis doloremque corrupti quam in nesciunt! Culpa quam iure vero. Labore error, iure assumenda aliquam ea possimus! Amet aliquam eos maxime? Quos numquam quas similique ex eos tempora magni repellendus praesentium? Ad quae vel labore quisquam quidem aliquam, molestias dolorum pariatur minus cupiditate odio, velit mollitia, deleniti corrupti eius nam, optio ullam impedit amet ducimus dolores architecto, id, quaerat ratione sed quas. Qui eius labore quia maiores adipisci, quos quod omnis veritatis modi fugiat. Et, cupiditate, cumque laudantium rem praesentium error odio veniam, repellat
</div>
<div class="banner">
<img class"photo"src="https://images.unsplash.com/photo-1620706857370-e1b9770e8bb1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="">
</div>
</div>
</div>
Tonight try using jQuery to fix the brown block under the red block. When scrolling up, only the green block will go up!
The brown area is fixed below the red area, but there are some problems As I scroll up, the brown block goes to the left and goes behind the red block Would you like to help me see which side of my code I have written wrong? Which side did I get wrong? Thank you for watching my question.
PS. My English is not very good, please let me know if there is something wrong with my expression. Thank you. Below is my code`
There is a small mistake here.
Inside your scroll listener, you have written "position": "fixed".
Whereas it should've been "position": "sticky".
$(".banner").css({
"position": "sticky",
"top": "60px"
});
"position": "sticky" automatically makes the element stick at the given position while scrolling.
For more info on CSS Positioning, check this out.
Check the updated snippet
$(function() {
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
var adscrtop = $(".header").offset().top
// 在 RWD 767以下不作動
if (window.screen.width > 767) {
if (scrollVal > adscrtop) {
$(".banner").css({
"position": "sticky",
"top": "60px"
});
} else {
$(".banner").css({
"position": "static"
});
}
}
});
});
.header {
max-width: 768px;
margin: 0 auto;
}
.nav {
position: sticky;
top: 0px;
width: 100%;
height: 60px;
background-color: #f55c47;
z-index: 99;
}
.container {
display: flex;
justify-content: space-between;
}
.main {
position: sticky;
top: 60px;
flex: 2;
background-color: #9fe6a0;
padding: 10px;
}
.banner {
flex: 1;
width: 200px;
height: 100px;
background-color: #564a4a;
}
.img {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
<div class="nav"></div>
<div class="container">
<div class="main">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem quae maiores, quibusdam doloribus eum excepturi ab fugit dolor vel, est molestiae magni tenetur nihil, non architecto aperiam. Consectetur tempore atque doloribus exercitationem veniam.
Quibusdam, odio nisi at similique magnam nobis, voluptates non iste laudantium in quo harum soluta voluptatibus vitae labore modi ullam minima enim placeat nesciunt assumenda perspiciatis cumque! A modi delectus assumenda totam, pariatur harum!
Odio adipisci maxime expedita beatae hic vero natus necessitatibus! Error earum at natus nemo! Quae aliquid minima quasi exercitationem eum, iure rerum consequatur ipsa. Optio repellendus quibusdam quia incidunt accusamus beatae ex? Accusantium
nam, enim esse fugit repellendus dignissimos amet reiciendis nulla porro quo quis facere unde nesciunt culpa molestias sunt a beatae non ad. Voluptatibus, velit numquam. Adipisci molestiae in commodi non officiis facilis repellendus, doloremque
cupiditate dolorum nostrum neque magnam aut asperiores quo nam id optio facere nesciunt praesentium. Repellat provident vero rem, tempore ad possimus accusantium perferendis! Architecto repellendus, error numquam necessitatibus voluptatibus asperiores
dolorem eius quos beatae a doloremque velit suscipit perspiciatis nisi in tempora illum quidem? In totam fugit mollitia libero sequi voluptates soluta praesentium dolor nihil! Magnam sunt animi omnis in repudiandae cum laudantium nemo unde nulla
necessitatibus mollitia nihil accusantium hic voluptas ab facilis aperiam ipsum, natus suscipit corporis. Alias quidem beatae, dolore et recusandae nisi optio error laboriosam temporibus minima voluptatibus reiciendis ipsam officia expedita totam
asperiores at provident? Rerum illo provident vitae asperiores optio. Quas est obcaecati consequuntur accusantium quasi possimus soluta architecto adipisci quisquam. Magni, suscipit, quisquam quasi iure architecto expedita reiciendis vitae nulla
consequuntur ex illo. Nobis accusantium et eveniet animi, quibusdam sunt beatae consequatur error, qui impedit rerum exercitationem, nulla cupiditate distinctio? Repudiandae fuga excepturi hic ex unde sequi labore, nulla sapiente, distinctio tempora
et, dignissimos fugiat inventore a nemo rerum maiores nihil soluta laudantium eius ipsa accusantium explicabo similique! Atque, iusto ipsam! Sequi, nam, laborum velit repellat perferendis voluptatem reprehenderit, odio commodi blanditiis doloremque
corrupti quam in nesciunt! Culpa quam iure vero. Labore error, iure assumenda aliquam ea possimus! Amet aliquam eos maxime? Quos numquam quas similique ex eos tempora magni repellendus praesentium? Ad quae vel labore quisquam quidem aliquam, molestias
dolorum pariatur minus cupiditate odio, velit mollitia, deleniti corrupti eius nam, optio ullam impedit amet ducimus dolores architecto, id, quaerat ratione sed quas. Qui eius labore quia maiores adipisci, quos quod omnis veritatis modi fugiat.
Et, cupiditate, cumque laudantium rem praesentium error odio veniam, repellat
</div>
<div class="banner">
<img class "photo"src="https://images.unsplash.com/photo-1620706857370-e1b9770e8bb1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="">
</div>
</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>