Navbar change on scroll, can't use libraries - javascript

I'm trying to make my navbar a solid colour after scrolling from transparent. I've looked at examples but they are using bootstrap/libraries which I can't use. I've tried using JS but I cannot get any change to occur. My code is as follows:
var myNav = document.getElementById('mynav');
window.onscroll = function() {
if (document.body.scrollTop >= 200) {
myNav.classList.add("nav-bar");
myNav.classList.remove("navtransparent");
} else {
myNav.classList.add("navtransparent");
myNav.classList.remove("nav-bar");
}
};
.nav-bar {
position: fixed;
z-index: 9999;
top: 0;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #696969;
background-color: #c0c0c0;
}
.navtransparent {
background-color: transparent;
}
li.navlist {
float: right;
}
li.navlist a {
display: block;
padding: 6px;
padding-left: 10px;
padding-right: 10px;
text-align: 14px 16px;
text-decoration: none;
color: #4d4d4d;
}
li.navlist:hover a {
background-color: #d3d3d3;
}
<nav div='mynav'>
<ul class="nav-bar">
<li class="navlist">E</li>
<li class="navlist"><a href='#three'>D</a></li>
<li class="navlist"><a href='#two'>C</a></li>
<li class="navlist"><a href='#one'>B</a></li>
<li class="navlist"><a href='#home'>A</a></li>
</ul>
</nav>

The main problem (after you fix the id), is that you have the .nav-bar class already on the ul which makes that be fixed from the beginning.
So break the styling for the ul and the styling for the fixed #mynav to different rules.
You also need to check both the document.body.scrollTop and the document.documentElement.scrollTop as some browsers scroll the html and others the body.
var myNav = document.getElementById('mynav');
window.onscroll = function() {
var scroll = document.body.scrollTop || document.documentElement.scrollTop;
if (scroll >= 50) {
myNav.classList.add("navfixed");
myNav.classList.remove("navtransparent");
} else {
myNav.classList.add("navtransparent");
myNav.classList.remove("navfixed");
}
};
.nav-bar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.navfixed{
position:fixed;
z-index: 9999;
top: 0;
width: 100%;
left:0;
background-color: #c0c0c0;
border: 1px solid #696969;
}
.navtransparent {
background-color: transparent;
}
li.navlist {
float: right;
}
li.navlist a {
display: block;
padding: 6px;
padding-left: 10px;
padding-right: 10px;
text-align: 14px 16px;
text-decoration: none;
color: #4d4d4d;
}
li.navlist:hover a {
background-color: #d3d3d3;
}
<nav id='mynav'>
<ul class="nav-bar">
<li class="navlist">E</li>
<li class="navlist"><a href='#three'>D</a></li>
<li class="navlist"><a href='#two'>C</a></li>
<li class="navlist"><a href='#one'>B</a></li>
<li class="navlist"><a href='#home'>A</a></li>
</ul>
</nav>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae fringilla sapien. In nec dui erat. Pellentesque a arcu sit amet est lacinia aliquam sed nec orci. Aliquam vitae euismod eros. Proin varius quam nec eros eleifend placerat. Morbi sed maximus purus. Pellentesque odio enim, varius a viverra a, finibus id dolor. Curabitur pulvinar pellentesque leo, consequat porttitor dui laoreet at. Maecenas accumsan libero nec mi sollicitudin, sed porttitor sem tristique. Maecenas viverra faucibus urna et suscipit. Cras vulputate odio at mi egestas ornare ut sit amet ligula.
Nulla imperdiet nisi id purus dapibus, at sodales lectus ornare. Praesent vehicula diam non lorem porta iaculis eget id ante. Phasellus ullamcorper purus sit amet vestibulum fringilla. Donec auctor dignissim dolor ut consectetur. Nulla vitae nulla lectus. Etiam pretium blandit libero, vehicula varius quam pulvinar id. Etiam quis orci pellentesque, volutpat massa a, suscipit lorem.
Suspendisse posuere diam quis ex aliquam sodales. Ut vel erat in nibh aliquet iaculis. Fusce at aliquam nulla, eget tristique tortor. Donec lobortis, arcu sit amet scelerisque ullamcorper, metus augue sollicitudin velit, a placerat leo turpis eu lectus. Phasellus cursus dictum dui et venenatis. Donec non tempor odio. Aenean at ipsum sed sapien volutpat laoreet. Donec in lorem est. Fusce tortor diam, faucibus eget lectus quis, elementum tempus ex.
Vestibulum in luctus eros, vel rutrum augue. Ut ultricies velit sit amet diam convallis aliquam. Curabitur vel ipsum nisl. Proin dapibus tortor eget tortor congue faucibus. Duis sit amet purus et ipsum consectetur vulputate non at arcu. Curabitur consectetur et ipsum id aliquam. Sed auctor massa at vestibulum vehicula. In consequat scelerisque ornare. Vestibulum pharetra nisi eget congue ultrices. Nullam quis elementum libero. Proin quis nisi ut tellus ultricies pharetra. Curabitur dignissim neque id nulla dictum fringilla. Vivamus tempus elit ipsum, finibus mattis tortor consectetur vitae.

Related

Grid footer covers site content

I have the following code which contains a modification of CSS code suggested by another user in one of my posted questions.
The code implements a grid which is used as a responsive footer menu, which also contains a copyright reference for the site.
The problem is that the footer covers the content of the website. Is there a way to avoid covering any of the 3 tags of the website with the tag that implements the grid?
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#content {
max-width: 720px;
margin: 100px auto 0;
}
#divleft {
position: fixed;
top: 50%;
transform: translate(-50%, -50%);
left: calc((100% - 720px)/4);
width: 200px;
height: 400px;
border: solid;
border-color: red;
}
#divright {
position: fixed;
top: 50%;
transform: translate(50%, -50%);
right: calc((100% - 720px)/4);
width: 200px;
height: 400px;
border: solid;
border-color: red;
}
/*
The Navigation Container/Block
*/
.navbar {
background-color: #333;
position: fixed;
bottom: 0%;
right: 0%;
width: 100%;
}
/*
Grid Container
*/
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
/*
Item 1
*/
.item-1 {
text-align: end;
}
/*
Item 2
*/
.item-2 {
color: white;
display: flex;
align-items: center;
justify-content: center;
}
/*
Item 3
*/
.item-3 {
text-align: end;
display: flex;
align-items: center;
justify-content: flex-end;
}
.item-3 a {
color: #f2f2f2;
text-align: center;
padding: 15px 16px;
text-decoration: none;
}
.item-3 a:hover {
background-color: #ddd;
color: black;
}
.item-3 a.active {
background-color: #04aa6d;
color: white;
}
/*
Toggle Icon For Menu
*/
.navbar .icon {
display: none;
}
/*
This Will Display In Media Queries
*/
.copyright-bottom {
display: none;
}
/*
Media Queries
*/
#media screen and (max-width: 970px) {
.item-3 a {
display: none;
}
.navbar a.icon {
display: block;
}
.navbar.responsive .icon {
position: absolute;
right: 0;
bottom: 0;
}
.navbar.responsive a {
display: block;
text-align: left;
}
.navbar.responsive .copyright-bottom {
display: block;
text-align: center;
color: white;
}
.navbar.responsive .copyright {
display: none;
}
.navbar.responsive .item-3 {
grid-column: span 3;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<section id="divleft"></section>
<section id="content">
<h2>Responsive Bottom Navbar Example</h2>
<p>Resize the browser window to see how it works.</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et viverra justo. Suspendisse quis ligula ac nibh ultricies ultrices. Etiam vel sagittis nunc. Praesent mi justo, ultrices sit amet lectus id, tincidunt volutpat nulla. Vivamus neque dolor,
elementum sit amet enim in, fringilla faucibus neque. Fusce a lectus enim. Pellentesque risus orci, efficitur et facilisis et, egestas eu eros. Sed commodo lacinia dolor eget suscipit. Ut facilisis orci lorem, et vehicula risus sollicitudin eu. Donec
aliquam urna at mi consectetur, sed condimentum velit vehicula. Nam et urna fringilla, vulputate risus ac, posuere ante. Morbi at ex et libero lobortis viverra. Donec nibh massa, faucibus a hendrerit ac, faucibus ac diam. Nunc vel gravida dui, euismod
viverra ex. Praesent elementum egestas venenatis. Duis quis nulla mi. Aliquam efficitur enim ipsum, sed venenatis tortor tempor eu. Maecenas maximus diam nec ante pellentesque, a efficitur ipsum semper. Donec sagittis enim quis nisl efficitur sodales.
Etiam porttitor tristique urna ut auctor. Mauris eget urna quis diam interdum euismod et vel turpis. Quisque vel tincidunt purus. Aliquam a mauris tortor. Vestibulum fringilla augue sit amet egestas tempus. Pellentesque pellentesque erat id porta
interdum. Vestibulum eros nibh, sagittis sit amet velit ut, auctor tincidunt tortor. Cras blandit condimentum enim ac sagittis. Nunc pretium, metus id pulvinar efficitur, nunc nunc sagittis sem, eget efficitur elit dui quis nisi. Mauris eros ex, elementum
sit amet neque at, elementum bibendum quam. Quisque ornare in lacus non maximus. Nullam volutpat, nisi vel consectetur mattis, magna ligula condimentum mauris, sed accumsan nibh augue quis dolor. Aenean id dignissim purus. Donec venenatis condimentum
nisl, quis placerat lorem suscipit nec. Vestibulum ante massa, euismod et pellentesque ut, eleifend volutpat arcu. Mauris porttitor nec orci vitae hendrerit. Suspendisse cursus urna id ullamcorper placerat. Nullam varius diam ut nibh molestie, a sodales
leo ultricies. Ut eget felis malesuada, imperdiet lectus finibus, aliquam quam. Pellentesque ac leo aliquam, viverra lorem in, dignissim nisl. Cras ligula mauris, bibendum vel ex ac, sodales ullamcorper magna. Etiam ac libero ut mi semper dignissim.
Proin eu enim at nunc porttitor mattis. Duis nec nisi vel est lacinia tincidunt. Sed interdum turpis sed ante maximus tristique. Etiam non urna placerat, ornare diam at, dictum massa. Praesent et imperdiet sem, quis varius mauris. Proin nunc elit,
vehicula non posuere sed, rhoncus vitae nunc. Duis ornare condimentum felis ut tempor. Donec tempor est nec diam gravida fermentum. Sed sit amet libero non tortor ultricies lacinia eu cursus metus. Morbi porta blandit libero sit amet laoreet. Vivamus
auctor dui sit amet turpis rutrum dapibus. Quisque tortor ipsum, interdum id sodales in, cursus at turpis. Duis dui sapien, finibus vel venenatis a, gravida nec sapien. Aenean tortor lorem, venenatis eu quam ac, ullamcorper pulvinar erat. In hac habitasse
platea dictumst. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus eleifend interdum mattis. Praesent et mi nec lacus mattis dictum quis et augue. Donec aliquam rutrum felis ac vestibulum. Sed vehicula
luctus enim. Vivamus pharetra neque nec ante tincidunt, quis lobortis quam rutrum. Nulla non consequat mauris, vel posuere nisi. Fusce varius imperdiet libero sit amet mattis. Vivamus ut efficitur velit, quis dapibus nisi. Pellentesque tempus turpis
nec tortor mollis, in euismod lectus porttitor. Proin dignissim accumsan nisi a sollicitudin. Pellentesque scelerisque ipsum eu risus mollis dapibus. Cras eget ornare odio, ac ultricies urna. Aliquam porttitor nunc leo, eleifend pretium magna congue
ac. In ut odio et ante tincidunt malesuada vel ac velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean vestibulum tempus velit, nec maximus quam. Proin pellentesque risus vel enim dictum tincidunt. Curabitur purus turpis, efficitur
eu velit in, efficitur tincidunt neque. Proin dignissim efficitur nisl sit amet efficitur. Sed dictum tellus eu turpis porta porta. Vestibulum in ipsum urna. Donec finibus sed lacus sed mattis. Fusce lacinia mauris vitae mauris lobortis, ut auctor
neque posuere. Donec scelerisque mauris in justo cursus varius. Aliquam varius sodales diam vel iaculis. In et malesuada velit, nec pulvinar lacus. Quisque eu auctor tortor. Ut iaculis placerat lacus, quis tempor erat lacinia in. Vivamus tempor purus
velit, vel mollis enim pellentesque sed. Aenean euismod lobortis ultrices. In volutpat sem vitae iaculis dignissim. Sed auctor, leo lobortis aliquam sodales, tellus tortor mattis dolor, sed iaculis elit purus eu nisi. Donec viverra laoreet ipsum eget
pulvinar. Sed nisl ipsum, congue id ornare eu, vulputate vitae turpis. Suspendisse feugiat dui at elit placerat eleifend. Morbi quam ligula, eleifend nec elit vel, lacinia vehicula nibh. Maecenas in orci ut odio aliquam sodales a vitae urna. Maecenas
eget interdum dolor. Integer vel magna mi. Suspendisse at consectetur lectus, sed accumsan erat. Aliquam erat volutpat. Mauris non mauris auctor, fringilla arcu vitae, bibendum justo. Sed pulvinar et magna eget cursus. Etiam quis risus vitae ipsum
pharetra vulputate. Vestibulum commodo ac nisl sit amet porta. Ut ultrices tristique ipsum et commodo. Integer urna ipsum, vehicula convallis metus suscipit, euismod rhoncus lectus. Mauris elementum odio ut odio aliquam, ut fringilla tellus facilisis.
In vitae arcu ut orci pellentesque consequat. Maecenas sit amet sem a sem varius porta ut a risus. Phasellus ac lacus aliquam, mollis felis vel, finibus arcu. Ut sodales nulla odio, sit amet sodales nibh bibendum ac. Sed purus dolor, iaculis et nunc
sit amet, viverra maximus nisl.
</section>
<section id="divright"></section>
<footer class="navbar" id="myNavbar">
<div class="grid-container">
<div class="item-1"></div>
<div class="item-2">
<p class="copyright">© domain.com</p>
</div>
<div class="item-3">
About
Contact
News
Home
<a href="javascript:void(0);" style="font-size: 15px" class="icon" onclick="myFunction()">☰</a
>
</div>
</div>
<p class="copyright-bottom">© domain.com</p>
</footer>
</body>
</html>
You Can Use This:
you can change the value with the one you want!
#content
{
margin-bottom:70px;
}
You can update your footer like this, so the footer doesn't cover your text.
Your two ad bars have a fixed height and width, so your footer will cover those on different screen sizes.
.navbar {
background-color: #333;
position: sticky;
bottom: 0;
right: 0;
width: 100%;
}
And then introduce flexbox to stretch your content. Your code looks then something like this:
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
display: flex;
flex-direction: column;
min-height: 100vh;
}
#content {
max-width: 720px;
margin: 100px auto 0;
flex: 1;
}
#divleft {
position: fixed;
top: 50%;
transform: translate(-50%, -50%);
left: calc((100% - 720px)/4);
width: 200px;
height: 400px;
border: solid;
border-color: red;
}
#divright {
position: fixed;
top: 50%;
transform: translate(50%, -50%);
right: calc((100% - 720px)/4);
width: 200px;
height: 400px;
border: solid;
border-color: red;
}
/*
The Navigation Container/Block
*/
.navbar {
background-color: #333;
position: sticky;
bottom: 0%;
right: 0%;
width: 100%;
}
/*
Grid Container
*/
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
/*
Item 1
*/
.item-1 {
text-align: end;
}
/*
Item 2
*/
.item-2 {
color: white;
display: flex;
align-items: center;
justify-content: center;
}
/*
Item 3
*/
.item-3 {
text-align: end;
display: flex;
align-items: center;
justify-content: flex-end;
}
.item-3 a {
color: #f2f2f2;
text-align: center;
padding: 15px 16px;
text-decoration: none;
}
.item-3 a:hover {
background-color: #ddd;
color: black;
}
.item-3 a.active {
background-color: #04aa6d;
color: white;
}
/*
Toggle Icon For Menu
*/
.navbar .icon {
display: none;
}
/*
This Will Display In Media Queries
*/
.copyright-bottom {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<section id="divleft"></section>
<section id="content">
<h2>Responsive Bottom Navbar Example</h2>
<p>Resize the browser window to see how it works.</p>
viverra ex. Praesent elementum egestas venenatis. Duis quis nulla mi. Aliquam efficitur enim ipsum, sed venenatis tortor tempor eu. Maecenas maximus diam nec ante pellentesque, a efficitur ipsum semper. Donec sagittis enim quis nisl efficitur sodales.
Etiam porttitor tristique urna ut auctor. Mauris eget urna quis diam interdum euismod et vel turpis. Quisque vel tincidunt purus. Aliquam a mauris tortor. Vestibulum fringilla augue sit amet egestas tempus. Pellentesque pellentesque erat id portaviverra ex. Praesent elementum egestas venenatis. Duis quis nulla mi. Aliquam efficitur enim ipsum, sed venenatis tortor tempor eu. Maecenas maximus diam nec ante pellentesque, a efficitur ipsum semper. Donec sagittis enim quis nisl efficitur sodales.
Etiam porttitor tristique urna ut auctor. Mauris eget urna quis diam interdum euismod et vel turpis. Quisque vel tincidunt purus. Aliquam a mauris tortor. Vestibulum fringilla augue sit amet egestas tempus. Pellentesque pellentesque erat id portaviverra ex. Praesent elementum egestas venenatis. Duis quis nulla mi. Aliquam efficitur enim ipsum, sed venenatis tortor tempor eu. Maecenas maximus diam nec ante pellentesque, a efficitur ipsum semper. Donec sagittis enim quis nisl efficitur sodales.
Etiam porttitor tristique urna ut auctor. Mauris eget urna quis diam interdum euismod et vel turpis. Quisque vel tincidunt purus. Aliquam a mauris tortor. Vestibulum fringilla augue sit amet egestas tempus. Pellentesque pellentesque erat id portaviverra ex. Praesent elementum egestas venenatis. Duis quis nulla mi. Aliquam efficitur enim ipsum, sed venenatis tortor tempor eu. Maecenas maximus diam nec ante pellentesque, a efficitur ipsum semper. Donec sagittis enim quis nisl efficitur sodales.
Etiam porttitor tristique urna ut auctor. Mauris eget urna quis diam interdum euismod et vel turpis. Quisque vel tincidunt purus. Aliquam a mauris tortor. Vestibulum fringilla augue sit amet egestas tempus. Pellentesque pellentesque erat id portaviverra ex. Praesent elementum egestas venenatis. Duis quis nulla mi. Aliquam efficitur enim ipsum, sed venenatis tortor tempor eu. Maecenas maximus diam nec ante pellentesque, a efficitur ipsum semper. Donec sagittis enim quis nisl efficitur sodales.
Etiam porttitor tristique urna ut auctor. Mauris eget urna quis diam interdum euismod et vel turpis. Quisque vel tincidunt purus. Aliquam a mauris tortor. Vestibulum fringilla augue sit amet egestas tempus. Pellentesque pellentesque erat id portaviverra ex. Praesent elementum egestas venenatis. Duis quis nulla mi. Aliquam efficitur enim ipsum, sed venenatis tortor tempor eu. Maecenas maximus diam nec ante pellentesque, a efficitur ipsum semper. Donec sagittis enim quis nisl efficitur sodales.
Etiam porttitor tristique urna ut auctor. Mauris eget urna quis diam interdum euismod et vel turpis. Quisque vel tincidunt purus. Aliquam a mauris tortor. Vestibulum fringilla augue sit amet egestas tempus. Pellentesque pellentesque erat id porta
interdum. Vestibulum eros nibh, sagittis sit amet velit ut, auctor tincidunt tortor. Cras blandit condimentum enim ac sagittis. Nunc pretium, metus id pulvinar efficitur, nunc nunc sagittis sem, eget efficitur elit dui quis nisi. Mauris eros ex, elementum
sit amet neque at, elementum bibendum quam. Quisque ornare in lacus non maximus. Nullam volutpat, nisi vel consectetur mattis, magna ligula condimentum mauris, sed accumsan nibh augue quis dolor. Aenean id dignissim purus. Donec venenatis condimentum
nisl, quis placerat lorem suscipit nec. Vestibulum ante massa, euismod et pellentesque ut, eleifend volutpat arcu. Mauris porttitor nec orci vitae hendrerit. Suspendisse cursus urna id ullamcorper placerat. Nullam varius diam ut nibh molestie, a sodales
leo ultricies. Ut eget felis malesuada, imperdiet lectus finibus, aliquam quam. Pellentesque ac leo aliquam, viverra lorem in, dignissim nisl. Cras ligula mauris, bibendum vel ex ac, sodales ullamcorper magna. Etiam ac libero ut mi semper dignissim.
Proin eu enim at nunc porttitor mattis. Duis nec nisi vel est lacinia tincidunt. Sed iut fringilla tellus facil
</section>
<section id="divright"></section>
<footer class="navbar" id="myNavbar">
<div class="grid-container">
<div class="item-1"></div>
<div class="item-2">
<p class="copyright">© domain.com</p>
</div>
<div class="item-3">
About
Contact
News
Home
<a href="javascript:void(0);" style="font-size: 15px" class="icon" onclick="myFunction()">☰</a
>
</div>
</div>
<p class="copyright-bottom">© domain.com</p>
</footer>
</body>
</html>
It will work with less content also fine.
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
display: flex;
flex-direction: column;
min-height: 100vh;
}
#content {
max-width: 720px;
margin: 100px auto 0;
flex: 1;
}
#divleft {
position: fixed;
top: 50%;
transform: translate(-50%, -50%);
left: calc((100% - 720px)/4);
width: 200px;
height: 400px;
border: solid;
border-color: red;
}
#divright {
position: fixed;
top: 50%;
transform: translate(50%, -50%);
right: calc((100% - 720px)/4);
width: 200px;
height: 400px;
border: solid;
border-color: red;
}
/*
The Navigation Container/Block
*/
.navbar {
background-color: #333;
position: sticky;
bottom: 0%;
right: 0%;
width: 100%;
}
/*
Grid Container
*/
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
/*
Item 1
*/
.item-1 {
text-align: end;
}
/*
Item 2
*/
.item-2 {
color: white;
display: flex;
align-items: center;
justify-content: center;
}
/*
Item 3
*/
.item-3 {
text-align: end;
display: flex;
align-items: center;
justify-content: flex-end;
}
.item-3 a {
color: #f2f2f2;
text-align: center;
padding: 15px 16px;
text-decoration: none;
}
.item-3 a:hover {
background-color: #ddd;
color: black;
}
.item-3 a.active {
background-color: #04aa6d;
color: white;
}
/*
Toggle Icon For Menu
*/
.navbar .icon {
display: none;
}
/*
This Will Display In Media Queries
*/
.copyright-bottom {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<section id="divleft"></section>
<section id="content">
<h2>Responsive Bottom Navbar Example</h2>
<p>Resize the browser window to see how it works.</p>
venenatis tortor tempor eu. Maecenas maximus diam nec ante pellentesque, a efficitur ipsum semper. Donec sagittis enim quis nisl efficitur sodales.
Etiam porttitor tristique urna ut auctor. Mauris eget urna quis diam interdum euismod
</section>
<section id="divright"></section>
<footer class="navbar" id="myNavbar">
<div class="grid-container">
<div class="item-1"></div>
<div class="item-2">
<p class="copyright">© domain.com</p>
</div>
<div class="item-3">
About
Contact
News
Home
<a href="javascript:void(0);" style="font-size: 15px" class="icon" onclick="myFunction()">☰</a
>
</div>
</div>
<p class="copyright-bottom">© domain.com</p>
</footer>
</body>
</html>

How to make navbar change color on scroll?

I have a transparent nav bar which on scroll is transparent. This means that if i were to scoll to a place that did not have a solid background color it would clash with other elements such as text. I would like to transtition into a different color to make it stand out more (including making the logo and a tags black) because at the moment it overlaps with text making it barely readable. How can i make it change color on scroll?
full code:
body {
font-family: 'Montserrat';
font-size: 22px;
background-color: #f1f1f1;
}
*, body{
margin: 0;
padding: 0;
}
body, html {
height: 100%;
margin: 0;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
/* ---------------------------------------------------------------------- */
/* -----------------------------Background------------------------------- */
/* ----------------------------------------------------------------------*/
/* ---------------------------------------------------------------------- */
/* -----------------------------Navigation------------------------------- */
/* ---------------------------------------------------------------------- */
/* Make the header */
.header{
height: 80px;
background: transparent;
padding: 0 20px;
color: #000000;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1030;
}
/* Set the logo */
.logo{
line-height: 80px;
float: left;
position: fixed;
top: 0;
z-index: 1030;
color: #fff;
}
/* Set the clickable nav to the right */
.menu{
float: right;
line-height: 80px;
position: fixed;
right: 0;
top: 0;
z-index: 1030;
font-size: 20px;
}
/* Transition and color of attribute tags */
.menu a{
color: #fff;
text-decoration: none;
padding: 0 20px;
transition: 0.4s;
}
/* Set color for hover */
menu a:hover {
text-decoration: underline;
}
.show-menu-btn,.hide-menu-btn{
transition: 0.4s;
font-size: 30px;
cursor: pointer;
display: none;
color: #fff;
}
.show-menu-btn{
float: right;
}
.show-menu-btn i{
line-height: 100px;
}
.menu a:hover,
.show-menu-btn:hover,
.hide-menu-btn:hover {
color: #AEC6CF;
}
#chk{
position: absolute;
visibility: hidden;
z-index: -1111;
}
/* ---------------------------------------------------------------------- */
/* --------------------------Responsive-Menu---------------------------- */
/* ---------------------------------------------------------------------- */
#media screen and (max-width:900px) {
.show-menu-btn,.hide-menu-btn{
display: block;
}
.menu{
position: fixed;
width: 100%;
height: 100vh;
background: #f1f1f1;
right: -100%;
top: 0;
text-align: center;
padding: 80px 0;
line-height: normal;
transition: 0.7s;
}
.menu a{
display: block;
padding: 20px;
color: black;
}
.hide-menu-btn{
position: absolute;
top: 40px;
right: 40px;
}
#chk:checked ~ .menu{
right: 0;
}
.header {
height: 90px;
}
.logo {
line-height: 90px;
}
.menu ul a {
line-height: 90px;
}
.show-menu-btn i, .hide-menu-btn i{
line-height: 90px;
}
.hide-menu-btn {
color: #000000;
}
}
/* ---------------------------------------------------------------------- */
/* ------------------------------Sections-------------------------------- */
/* ---------------------------------------------------------------------- */
/* Section for text */
.main {
text-align: center;
padding: 20px;
margin-top: 20px;
}
/* Make text smaller and centered on desktop screen */
.main p {
margin-top: 10px;
font-size: 18px;
padding-left: 100px;
padding-right: 100px;
}
/* Header Underline */
hr {
width: 230px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
color: #AEC6CF
}
/* Make text larger and on the left for mobile */
#media screen and (max-width:800px) {
.main p {
font-size: 20px;
padding-left: 20px;
padding-right: 20px;
text-align: left;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='style.css'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<meta charset="utf-8"/>
</head>
<body>
<div class="bg" id='home'></div>
<div class="header" id='pronav'>
<div class='logo' id='logo'>
<p style='font-size:35px;'>lunAr-creator</p>
</div>
<input type="checkbox" id="chk">
<label for="chk" class="show-menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul class="menu" id='navbar'>
Home
About
Projects
Useful Links
Contact
<label for="chk" class="hide-menu-btn">
<i class="fas fa-times"></i>
</label>
</ul>
</div>
<div class="main" id="about">
<h2 style='margin-top: 90px;'>About Me</h2>
<hr/>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris.
</p>
</div>
<div class="main" id="projects">
<h2>Projects</h2>
<hr/>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris.
</p>
</div>
</body>
</html>
You can target the parent element of the header and nav prenav and set the background color to change using a transition when the window.pageYOffset hits a certain threshold in a scroll event listener. Use another conditional to change it back if you scroll up to the fold again...
If you want to change the color of the font instead of the background-color change the el.style.backgroundColor to el.style.color and the transition from logo.style.transition = 'background .5s ease-out' to logo.style.transition = 'color .5s ease-out'.
const logo = document.querySelector('#pronav')
const getOffset = () => {
if(window.pageYOffset > 100){
logo.style.backgroundColor = 'rgba(0,0,0,0.7)'
logo.style.transition = 'background .5s ease-out'
logo.style.boxShadow = '0px 1px 4px black'
}
if(window.pageYOffset < 100){
logo.style.backgroundColor = 'rgba(0,0,0,0)'
logo.style.transition = 'background .5s ease-out'
logo.style.boxShadow = 'none'
}
}
window.addEventListener('scroll', getOffset)
body {
font-family: 'Montserrat';
font-size: 22px;
background-color: #f1f1f1;
}
*, body{
margin: 0;
padding: 0;
}
body, html {
height: 100%;
margin: 0;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
/* ---------------------------------------------------------------------- */
/* -----------------------------Background------------------------------- */
/* ----------------------------------------------------------------------*/
/* ---------------------------------------------------------------------- */
/* -----------------------------Navigation------------------------------- */
/* ---------------------------------------------------------------------- */
/* Make the header */
.header{
height: 80px;
background: transparent;
padding: 0 20px;
color: #000000;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1030;
}
/* Set the logo */
.logo{
line-height: 80px;
float: left;
position: fixed;
top: 0;
z-index: 1030;
color: #fff;
}
.pronav {
background-color: rgba(0,0,0,0.7);
transition: background .5s ease-out;
box-shadow: 1px 0px 4px black;
}
/* Set the clickable nav to the right */
.menu{
float: right;
line-height: 80px;
position: fixed;
right: 0;
top: 0;
z-index: 1030;
font-size: 20px;
}
/* Transition and color of attribute tags */
.menu a{
color: #fff;
text-decoration: none;
padding: 0 20px;
transition: 0.4s;
}
/* Set color for hover */
menu a:hover {
text-decoration: underline;
}
.show-menu-btn,.hide-menu-btn{
transition: 0.4s;
font-size: 30px;
cursor: pointer;
display: none;
color: #fff;
}
.show-menu-btn{
float: right;
}
.show-menu-btn i{
line-height: 100px;
}
.menu a:hover,
.show-menu-btn:hover,
.hide-menu-btn:hover {
color: #AEC6CF;
}
#chk{
position: absolute;
visibility: hidden;
z-index: -1111;
}
/* ---------------------------------------------------------------------- */
/* --------------------------Responsive-Menu---------------------------- */
/* ---------------------------------------------------------------------- */
#media screen and (max-width:900px) {
.show-menu-btn,.hide-menu-btn{
display: block;
}
.menu{
position: fixed;
width: 100%;
height: 100vh;
background: #f1f1f1;
right: -100%;
top: 0;
text-align: center;
padding: 80px 0;
line-height: normal;
transition: 0.7s;
}
.menu a{
display: block;
padding: 20px;
color: black;
}
.hide-menu-btn{
position: absolute;
top: 40px;
right: 40px;
}
#chk:checked ~ .menu{
right: 0;
}
.header {
height: 90px;
}
.logo {
line-height: 90px;
}
.menu ul a {
line-height: 90px;
}
.show-menu-btn i, .hide-menu-btn i{
line-height: 90px;
}
.hide-menu-btn {
color: #000000;
}
}
/* ---------------------------------------------------------------------- */
/* ------------------------------Sections-------------------------------- */
/* ---------------------------------------------------------------------- */
/* Section for text */
.main {
text-align: center;
padding: 20px;
margin-top: 20px;
}
/* Make text smaller and centered on desktop screen */
.main p {
margin-top: 10px;
font-size: 18px;
padding-left: 100px;
padding-right: 100px;
}
/* Header Underline */
hr {
width: 230px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
color: #AEC6CF
}
/* Make text larger and on the left for mobile */
#media screen and (max-width:800px) {
.main p {
font-size: 20px;
padding-left: 20px;
padding-right: 20px;
text-align: left;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='style.css'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<meta charset="utf-8"/>
</head>
<body>
<div class="bg" id='home'></div>
<div class="header" id='pronav'>
<div class='logo' id='logo'>
<p style='font-size:35px; '>lunAr-creator</p>
</div>
<input type="checkbox" id="chk">
<label for="chk" class="show-menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul class="menu" id='navbar'>
Home
About
Projects
Useful Links
Contact
<label for="chk" class="hide-menu-btn">
<i class="fas fa-times"></i>
</label>
</ul>
</div>
<div class="main" id="about">
<h2 style='margin-top: 90px;'>About Me</h2>
<hr/>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris.
</p>
</div>
<div class="main" id="projects">
<h2>Projects</h2>
<hr/>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris.
</p>
</div>
</body>
</html>

All body content moves up and below the navigation (HTML & CSS)

I've tried a few suggestions like removing overflow from the body, adding a z-index to header and padding-top but nothing seems to work.
It worked fine at first but then I implemented a lot of Lorem Ipsum text. All the content just slides up and below the navbar. I've attached a JS fiddle to explain.
I tried the whole body overflow and tried the fixed/relative header positions. Nothing works.
Any input would seriously be appreciated A LOT.
I would love some help in how can I make the nav stick but not really stay fixed when I scroll down.
And of course, how to make the contents not overflow horizontally.
Please help!
CSS
html,
body {
position: absolute;
width: 100%;
top: 0;
min-height: 100vh;
font-family: sans-serif;
margin: 0 !important;
padding: 0 !important;
}
ul {
box-sizing: border-box;
}
#logo {
max-width: 15%;
}
.menu-wrapper {
background-color: white;
}
.header {
z-index: 1000;
width: 100%;
margin: 1.2em;
position: fixed;
background-color: black;
}
#about {
position: absolute;
max-width: 100%;
top: 49%;
left: 50%;
transform: translate(-50%, -50%);
border: 5px solid purple;
padding: 20px;
text-align: center;
justify-content: center;
}
.about-par {
font-size: 1em;
}
.header ul {
padding: 0;
list-style: none;
overflow: hidden;
margin-right: 2em;
}
.header li a {
display: block;
color: blue;
text-decoration: none;
font-size: 1em;
}
.header li a:hover,
.header .menu-btn:hover {
color: black;
}
.header li a:active,
.header .menu-btn: active,
{
color: blue;
}
.header li a:active {
color: blue;
}
.header .logo {
color: black;
display: block;
float: left;
font-size: 1.1em;
padding: 12px;
margin-left: 1em;
text-decoration: none;
}
.header .menu {
clear: both;
max-height: 0;
transition: max-height 0.2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 40px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
display: block;
height: 2px;
position: relative;
transition: background 0.2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: black;
content: "";
display: block;
height: 100%;
position: absolute;
transition: all 0.2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon: before {
background: transparent;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked~.menu {
max-height: 340px;
background-color: black;
}
.header .menu-btn:checked~.menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* Responsive */
#media only screen and (max-width: 768px) {
.header li a {
padding: 15px;
border-bottom: 1px dotted #ddd;
color: white;
}
.header li a:hover {
padding: 15px;
border-bottom: 1px dotted #ddd;
color: blue;
}
}
#media only screen and (min-width: 768px) {
.menu-wrapper {
width: 100%;
}
.header li {
float: left;
}
.header .logo {
line-height: 1;
}
.header li a {
color: blue;
padding: 0px 30px;
border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src="script.js"></script>
<link href="style.css" rel="stylesheet">
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet">
<meta name="viewport" content="initial-scale=1, width=device-width shrink-to-fit=no">
<title>Hello! </title>
</head>
<body>
<div class="empty"></div>
<div class="all">
<div class="menu-wrapper">
<header class="header">
Logo
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li>Home</li>
<li>About Us</li>
<li>More</li>
<li>More2</li>
</ul>
</header>
</div>
</div>
<div class="row">
<div class="container-fluid" id="about">
<h5>Text</h5>
<div class="col-lg-12">
<article>
<p class="about-par">
Pellentesque in ipsum id orci porta dapibus. Cras ultricies ligula sed magna dictum porta. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Proin eget tortor risus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat.
<br>
Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet quam id dui posuere blandit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
<br>Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec sollicitudin molestie malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan tincidunt. Nulla quis lorem ut libero malesuada feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec sollicitudin molestie malesuada.
<br>
Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta. Proin eget tortor risus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec sollicitudin molestie malesuada. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Cras ultricies ligula sed magna dictum porta.
<br>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Quisque velit nisi, pretium ut lacinia in, elementum id enim.
<br>
Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Cras ultricies ligula sed magna dictum porta. Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla porttitor accumsan tincidunt. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.
<br>
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus suscipit tortor eget felis porttitor volutpat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Donec rutrum congue leo eget malesuada.
<br>Sed porttitor lectus nibh. Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla quis lorem ut libero malesuada feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br>
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus suscipit tortor eget felis porttitor volutpat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Donec rutrum congue leo eget malesuada.
<br>Sed porttitor lectus nibh. Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla quis lorem ut libero malesuada feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br>
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus suscipit tortor eget felis porttitor volutpat. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Donec rutrum congue leo eget malesuada.
<br>Sed porttitor lectus nibh. Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla quis lorem ut libero malesuada feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</article>
</div>
</div>
</div>
</body>
</html>
JSFIDDLE
https://jsfiddle.net/janie2000/pf3L4y1d/5/
Thank you so much.
You want for header to always stay on top, but to not cover your content, correct?
If i got you right then what you need to do is to to change your main content wrapper which is #about element, you need to have only this element scrollable, not whole page.
For this i propose this css:
#about {
max-width: 100%;
position:relative;
top:100px;
border: 5px solid purple;
padding: 20px;
text-align: center;
justify-content: center;
height:100px;
overflow:scroll;
}
So here we are chaging the position to be relative, so we can move the content down by the height of navigation (top:100px)
Then we limit the height of this component (height:100px) and making it scrollable (overflow:scrool) - so that you can scroll, and when you do - you scrolling on the content, not the whole page, so navbar with fixed position is staying on top
Here is the fiddle - https://jsfiddle.net/t2a4938f/12/
I've set approximate values, you can play around for better view
UPDATE
And if you want for the content to take full height of the screen (not limiting to some strict height like above - 100px), you could use height:100vh
Because you are using bootstrap, I link you my jsfiddle that should work for you.
No css or js needed, bootstrap will do the work for you
JSFIDDLE: https://jsfiddle.net/9yeb023u/1/
I created a basic navbar but you can customize it, if you have any problem go to the documentations of bootstrap at this link:
https://getbootstrap.com/docs/4.5/getting-started/introduction/
The header is sticky and the body content would always below the header.
h.header {
width: 100%;
top: 0;
position: sticky;
background-color: black;
}
#about {
max-width: 100%;
border: 5px solid purple;
padding: 20px;
text-align: center;
justify-content: center;
}

Resize background image of div to always fit div on mobile

I would like to know how I make it so that my background in the 'header' div always has the right size no matter on what screen you're on. It schould take 90% of the window. I think you'll see what I mean if you look at my code.
My background image is 3840x2400. If you were to use an image of that size I think you'd understand where my problem lies ?
EDIT:
#MarcHjorth solution worked for me on the desktop, but thi image is to big and cropped now when looking at it on the phone..
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
}
body {
padding: 0;
margin: 0;
border: 0;
background-color: grey;
background-attachment: fixed;
background-size: 100% auto;
}
ul#horizontal-list {
list-style: none;
}
ul#horizontal-list li {
display: inline;
}
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: center;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
.navbar {
position: fixed;
top: 0;
height: 50px;
width: 100%;
background-color: black;
color: white;
text-align: center;
left: 0;
right: 0;
z-index: 1;
}
.navbar ul {
display: flex;
align-items: center;
justify-content: center;
list-style-type: none;
margin-top: 0px;
}
.header {
width: 100%;
height: 100%;
background-image: url("img/bg/background1.png");
background-color: grey;
background-repeat: no-repeat;
background-size: cover;
}
.body {
width: 100%;
background-color: white;
color: black;
padding-left: 5%;
padding-right: 5%;
overflow: hidden;
}
.content {
margin: auto;
width: 100%;
background-color: white;
color: black;
border-right: double;
border-left: double;
text-align: justify;
font-size: 20px;
font-family: arial;
padding: 10% 5%;
}
.footer {
height: 50px;
width: 100%;
background-color: black;
color: white;
margin: auto;
vertical-align: middle;
}
#copyright {
display: table;
}
#cpy {
display: table-cell;
vertical-align: middle;
}
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<meta name="description" content="My Personal Portfolio">
<title>John's Work</title>
</head>
<body>
<div class="navbar">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
<div class="header"></div>
<div class="body">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac ipsum non diam faucibus dignissim. Praesent a dolor tincidunt, rutrum diam ut, convallis orci. Maecenas eleifend, sapien id blandit rutrum, enim augue cursus magna, vitae varius orci nulla eu arcu. Cras ultrices condimentum libero nec vulputate. Praesent id ante dignissim, congue elit id, iaculis eros. Aliquam lacus quam, facilisis et pulvinar quis, hendrerit varius erat. Duis feugiat imperdiet lobortis. Ut et faucibus dui. Integer quis bibendum tortor, at mattis dolor. Sed id lacus nec nisi iaculis blandit. Duis nec ligula orci. Quisque tincidunt, orci id tincidunt consequat, eros erat dictum urna, vel ultricies sem nisl eu nunc. Nulla facilisi. Suspendisse at malesuada magna, in suscipit purus.
Fusce facilisis pharetra dui, ut cursus orci maximus non. Cras nec magna ac odio ornare ornare. Proin id commodo eros. Phasellus dui est, malesuada non mi sit amet, fringilla rhoncus ante. Phasellus non elit id est cursus malesuada. Maecenas accumsan erat in urna pulvinar, sit amet egestas felis facilisis. Nullam tincidunt porta nulla, a consectetur sapien venenatis in. Phasellus elementum est sit amet sem accumsan tincidunt. In semper vulputate risus, sed sollicitudin libero consectetur eget. Curabitur pulvinar eleifend augue. Sed facilisis ligula sed arcu vulputate tempus.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut mi nisi, mattis sed est a, luctus aliquet metus. Integer fringilla, massa nec laoreet dapibus, odio sem convallis massa, a vestibulum tellus mi in massa. Sed at vulputate velit, id sagittis sem. Vestibulum ac libero massa. Vivamus et libero vel orci auctor sodales a a quam. Vivamus semper tortor eget lacus euismod, non dignissim tellus feugiat. Donec tincidunt nisi at ornare ullamcorper. Nulla at mi nulla. Phasellus ligula ante, vehicula sit amet mauris et, consectetur mollis odio.
Donec massa risus, ultricies et enim quis, vestibulum consectetur arcu. Nunc sed convallis dui, sagittis imperdiet metus. Sed non ultrices velit. Nullam arcu sem, varius non pulvinar id, convallis eget erat. Nam porta tincidunt lorem, non venenatis sapien hendrerit vitae. Suspendisse nec est leo. Nunc commodo, lectus nec facilisis laoreet, ex velit dapibus dui, et aliquet lacus est non velit. Vestibulum nisl velit, tempor vel lacus at, ultricies pellentesque nisi. Mauris velit tortor, aliquam a magna eget, efficitur fringilla erat. Praesent massa nisl, maximus sit amet viverra in, varius vel urna.
Pellentesque eget leo vitae neque dictum egestas at ullamcorper nulla. Aenean lacinia venenatis metus, in faucibus dolor sollicitudin eget. Sed volutpat sit amet urna vel molestie. Donec dignissim velit tortor, a blandit ligula commodo dapibus. Vestibulum ac dolor facilisis mauris maximus mattis. Nullam vitae libero ut ligula sodales accumsan et vel dui. Quisque dapibus, lacus accumsan interdum efficitur, tellus augue maximus ipsum, quis ultricies dolor justo in diam. Pellentesque id lobortis diam. Suspendisse mollis eget orci eu auctor. Nullam porttitor arcu mi, nec varius magna viverra quis. Fusce eleifend sodales turpis et hendrerit.
</div>
</div>
<div class="footer" id="copyright" style="text-align:center">
<div id="cpy">© DA COSTA JOAO (2019)</div>
</div>
</body>
</html>
Use background-size: 100% 100%; instead of background-size: contain; like that your image will fit width <div>
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
}
body {
padding: 0;
margin: 0;
border: 0;
background-color: grey;
background-attachment: fixed;
background-size: 100% auto;
}
ul#horizontal-list {
list-style: none;
}
ul#horizontal-list li {
display: inline;
}
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: center;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
.navbar {
position: fixed;
top: 0;
height: 50px;
width: 100%;
background-color: black;
color: white;
text-align: center;
left: 0;
right: 0;
z-index: 1;
}
.navbar ul {
display: flex;
align-items: center;
justify-content: center;
list-style-type: none;
margin-top: 0px;
}
.header {
width: 100%;
height: 100%;
background-image: url("https://dummyimage.com/3840x2400/ccc/333");
background-color: grey;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.body {
/*height: 100%;*/
width: 100%;
background-color: white;
color: black;
padding-left: 5%;
padding-right: 5%;
overflow: hidden;
}
.content {
margin: auto;
width: 100%;
background-color: white;
color: black;
border-right: double;
border-left: double;
text-align: justify;
font-size: 20px;
font-family: arial;
padding-top: 10%;
padding-bottom: 10%;
padding-left: 5%;
padding-right: 5%;
}
.footer {
height: 50px;
width: 100%;
background-color: black;
color: white;
margin: auto;
vertical-align: middle;
}
#copyright {
display: table;
}
#cpy{
display: table-cell;
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<meta name="description" content="My Personal Portfolio">
<title>John's Work</title>
</head>
<body>
<div class="navbar">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
<div class="header">
</div>
<div class="body">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac ipsum non diam faucibus dignissim. Praesent a dolor tincidunt, rutrum diam ut, convallis orci. Maecenas eleifend, sapien id blandit rutrum, enim augue cursus magna, vitae varius orci nulla eu arcu. Cras ultrices condimentum libero nec vulputate. Praesent id ante dignissim, congue elit id, iaculis eros. Aliquam lacus quam, facilisis et pulvinar quis, hendrerit varius erat. Duis feugiat imperdiet lobortis. Ut et faucibus dui. Integer quis bibendum tortor, at mattis dolor. Sed id lacus nec nisi iaculis blandit. Duis nec ligula orci. Quisque tincidunt, orci id tincidunt consequat, eros erat dictum urna, vel ultricies sem nisl eu nunc. Nulla facilisi. Suspendisse at malesuada magna, in suscipit purus.
Fusce facilisis pharetra dui, ut cursus orci maximus non. Cras nec magna ac odio ornare ornare. Proin id commodo eros. Phasellus dui est, malesuada non mi sit amet, fringilla rhoncus ante. Phasellus non elit id est cursus malesuada. Maecenas accumsan erat in urna pulvinar, sit amet egestas felis facilisis. Nullam tincidunt porta nulla, a consectetur sapien venenatis in. Phasellus elementum est sit amet sem accumsan tincidunt. In semper vulputate risus, sed sollicitudin libero consectetur eget. Curabitur pulvinar eleifend augue. Sed facilisis ligula sed arcu vulputate tempus.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut mi nisi, mattis sed est a, luctus aliquet metus. Integer fringilla, massa nec laoreet dapibus, odio sem convallis massa, a vestibulum tellus mi in massa. Sed at vulputate velit, id sagittis sem. Vestibulum ac libero massa. Vivamus et libero vel orci auctor sodales a a quam. Vivamus semper tortor eget lacus euismod, non dignissim tellus feugiat. Donec tincidunt nisi at ornare ullamcorper. Nulla at mi nulla. Phasellus ligula ante, vehicula sit amet mauris et, consectetur mollis odio.
Donec massa risus, ultricies et enim quis, vestibulum consectetur arcu. Nunc sed convallis dui, sagittis imperdiet metus. Sed non ultrices velit. Nullam arcu sem, varius non pulvinar id, convallis eget erat. Nam porta tincidunt lorem, non venenatis sapien hendrerit vitae. Suspendisse nec est leo. Nunc commodo, lectus nec facilisis laoreet, ex velit dapibus dui, et aliquet lacus est non velit. Vestibulum nisl velit, tempor vel lacus at, ultricies pellentesque nisi. Mauris velit tortor, aliquam a magna eget, efficitur fringilla erat. Praesent massa nisl, maximus sit amet viverra in, varius vel urna.
Pellentesque eget leo vitae neque dictum egestas at ullamcorper nulla. Aenean lacinia venenatis metus, in faucibus dolor sollicitudin eget. Sed volutpat sit amet urna vel molestie. Donec dignissim velit tortor, a blandit ligula commodo dapibus. Vestibulum ac dolor facilisis mauris maximus mattis. Nullam vitae libero ut ligula sodales accumsan et vel dui. Quisque dapibus, lacus accumsan interdum efficitur, tellus augue maximus ipsum, quis ultricies dolor justo in diam. Pellentesque id lobortis diam. Suspendisse mollis eget orci eu auctor. Nullam porttitor arcu mi, nec varius magna viverra quis. Fusce eleifend sodales turpis et hendrerit.
</div>
</div>
<div class="footer" id="copyright" style="text-align:center">
<div id="cpy">© DA COSTA JOAO (2019)</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
}
body {
padding: 0;
margin: 0;
border: 0;
background-color: grey;
/*background-attachment: fixed;*/
/*background-size: 100% auto;*/
}
ul#horizontal-list {
list-style: none;
}
ul#horizontal-list li {
display: inline;
}
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: center;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
.navbar {
position: fixed;
top: 0;
height: 50px;
width: 100%;
background-color: black;
color: white;
text-align: center;
left: 0;
right: 0;
z-index: 1;
}
.navbar ul {
display: flex;
align-items: center;
justify-content: center;
list-style-type: none;
margin-top: 0px;
}
.header {
width: 100%;
height: 90vh;
position: relative;
}
.header:before {
content: "";
width: 100%;
height: 100%;
background-image: url("https://dummyimage.com/3840x2400/ccc/333");
background-color: grey;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: absolute;
margin: auto;
}
#media (max-width: 1960px) {
.header:before {
background-image: url("https://dummyimage.com/1960x1225/ccc/333");
}
}
#media (max-width: 1024px) {
.header:before {
background-image: url("https://dummyimage.com/1024x640/ccc/333");
}
}
#media (max-width: 800px) {
.header:before {
background-image: url("https://dummyimage.com/800x500/ccc/333");
}
}
.body {
/*height: 100%;*/
width: 100%;
background-color: white;
color: black;
padding-left: 5%;
padding-right: 5%;
overflow: hidden;
}
.content {
margin: auto;
width: 100%;
background-color: white;
color: black;
border-right: double;
border-left: double;
text-align: justify;
font-size: 20px;
font-family: arial;
padding-top: 5%;
padding-bottom: 5%;
padding-left: 5%;
padding-right: 5%;
}
.footer {
height: 50px;
width: 100%;
background-color: black;
color: white;
margin: auto;
vertical-align: middle;
}
#copyright {
display: table;
}
#cpy {
display: table-cell;
vertical-align: middle;
}
<div class="navbar">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
<div class="header">
</div>
<div class="body">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac ipsum non diam faucibus dignissim. Praesent a dolor tincidunt, rutrum diam ut, convallis orci. Maecenas eleifend, sapien id blandit rutrum, enim augue cursus magna, vitae varius orci nulla
eu arcu. Cras ultrices condimentum libero nec vulputate. Praesent id ante dignissim, congue elit id, iaculis eros. Aliquam lacus quam, facilisis et pulvinar quis, hendrerit varius erat. Duis feugiat imperdiet lobortis. Ut et faucibus dui. Integer
quis bibendum tortor, at mattis dolor. Sed id lacus nec nisi iaculis blandit. Duis nec ligula orci. Quisque tincidunt, orci id tincidunt consequat, eros erat dictum urna, vel ultricies sem nisl eu nunc. Nulla facilisi. Suspendisse at malesuada magna,
in suscipit purus. Fusce facilisis pharetra dui, ut cursus orci maximus non. Cras nec magna ac odio ornare ornare. Proin id commodo eros. Phasellus dui est, malesuada non mi sit amet, fringilla rhoncus ante. Phasellus non elit id est cursus malesuada.
Maecenas accumsan erat in urna pulvinar, sit amet egestas felis facilisis. Nullam tincidunt porta nulla, a consectetur sapien venenatis in. Phasellus elementum est sit amet sem accumsan tincidunt. In semper vulputate risus, sed sollicitudin libero
consectetur eget. Curabitur pulvinar eleifend augue. Sed facilisis ligula sed arcu vulputate tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut mi nisi, mattis sed est a, luctus aliquet metus. Integer
fringilla, massa nec laoreet dapibus, odio sem convallis massa, a vestibulum tellus mi in massa. Sed at vulputate velit, id sagittis sem. Vestibulum ac libero massa. Vivamus et libero vel orci auctor sodales a a quam. Vivamus semper tortor eget lacus
euismod, non dignissim tellus feugiat. Donec tincidunt nisi at ornare ullamcorper. Nulla at mi nulla. Phasellus ligula ante, vehicula sit amet mauris et, consectetur mollis odio. Donec massa risus, ultricies et enim quis, vestibulum consectetur arcu.
Nunc sed convallis dui, sagittis imperdiet metus. Sed non ultrices velit. Nullam arcu sem, varius non pulvinar id, convallis eget erat. Nam porta tincidunt lorem, non venenatis sapien hendrerit vitae. Suspendisse nec est leo. Nunc commodo, lectus
nec facilisis laoreet, ex velit dapibus dui, et aliquet lacus est non velit. Vestibulum nisl velit, tempor vel lacus at, ultricies pellentesque nisi. Mauris velit tortor, aliquam a magna eget, efficitur fringilla erat. Praesent massa nisl, maximus
sit amet viverra in, varius vel urna. Pellentesque eget leo vitae neque dictum egestas at ullamcorper nulla. Aenean lacinia venenatis metus, in faucibus dolor sollicitudin eget. Sed volutpat sit amet urna vel molestie. Donec dignissim velit tortor,
a blandit ligula commodo dapibus. Vestibulum ac dolor facilisis mauris maximus mattis. Nullam vitae libero ut ligula sodales accumsan et vel dui. Quisque dapibus, lacus accumsan interdum efficitur, tellus augue maximus ipsum, quis ultricies dolor
justo in diam. Pellentesque id lobortis diam. Suspendisse mollis eget orci eu auctor. Nullam porttitor arcu mi, nec varius magna viverra quis. Fusce eleifend sodales turpis et hendrerit.
</div>
</div>
<div class="footer" id="copyright" style="text-align:center">
<div id="cpy">© DA COSTA JOAO (2019)</div>
</div>

Sticking a fixed div on scrolling down

Im trying to make a fixed div stick to the top once scrolled down.
See example - Desired effect would be for the green left column to remain anchored to the top once you have scrolled down past the red block.
Example - JS FIDDLE
HTML
<div id="block">block</div>
<div id="content">
<div id="left">fixed</div>
<div id="right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consequat neque ac diam pulvinar aliquet. Sed cursus mauris a ipsum ultricies malesuada. Integer vel velit accumsan, sagittis ipsum et, lacinia tellus.</p>
<p>Praesent consequat lacus sed dui sagittis, nec interdum tellus viverra. Donec tincidunt augue justo, in eleifend leo rutrum id. Nam feugiat iaculis neque a tincidunt. In condimentum tortor quis vestibulum pharetra. Vestibulum in elit ut tortor ultricies faucibus a eu augue. Quisque dignissim nec nibh non malesuada.</p>
<p>In ligula tellus, facilisis ac purus sed, congue congue justo. Aliquam consequat nunc lorem, nec mattis lorem facilisis quis. Aliquam vel eleifend nunc.</p>
<p>Praesent consequat lacus sed dui sagittis, nec interdum tellus viverra. Donec tincidunt augue justo, in eleifend leo rutrum id. Nam feugiat iaculis neque a tincidunt. In condimentum tortor quis vestibulum pharetra. Vestibulum in elit ut tortor ultricies faucibus a eu augue. Quisque dignissim nec nibh non malesuada.</p>
<p>In ligula tellus, facilisis ac purus sed, congue congue justo. Aliquam consequat nunc lorem, nec mattis lorem facilisis quis. Aliquam vel eleifend nunc.</p>
</div>
</div>
CSS
#block {
background: #B84B3D;
width: 100%;
height: 200px;
position: fixed;
z-index: 0;
font-size: 16px;
color: #fff;
text-align: right;
}
#content {
margin-top: 160px;
float: left;
}
#left {
background: #73CC66;
width: 50%;
height: 100%;
font-size: 16px;
color: #fff;
position: absolute;
}
#right {
background-color: rgba(255,255,255,0.8);
width: 50%;
float: right;
color: #ccc;
z-index: 10;
position: relative;
}
Is there a way to do this with CSS or more practical with JS?
Thanks in advance
Modify your css with this
#left {
background: #73CC66;
width: 50%;
height: 300px;
font-size: 16px;
color: #fff;
float:left;
position: static;
}
and apply this javascript
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript" ></script>
<script>
window.onscroll = function(){
if( window.XMLHttpRequest ) {
var position=window.pageYOffset;
if ( position > 160) {
$('#left').css({'position':'fixed', 'top':'0' });
} else {
$('#left').css({'position':'static', 'top':'auto' });
}
}
}
</script>
Hope this works

Categories

Resources