Sticking a fixed div on scrolling down - javascript

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

Related

Laggy CSS animation with transform property

I have a pretty simple animation with only one element, but when I scroll, it turns out to be pretty laggy, though I use requestAnimationFrame() and transform property instead of top/left. What's the problem with my code?
var floating = document.getElementsByClassName('floating');
function moveFloating(offset) {
for (let i = 0; i < floating.length; i++) {
floating[i].style.transform = 'translate(0px, ' + offset +'px)';
}
}
function loop() {
let scrollOffset = window.scrollY;
moveFloating(scrollOffset);
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
html,
body {
height: 100%;
width: 100%;
margin: 0 0;
padding: 0;
font-family: 'Courier New', Courier, monospace;
}
.frame {
height: auto;
width: 100%;
position: relative;
box-sizing: border-box;
padding: 50px;
}
.static {
width: 30%;
}
.floating {
position: absolute;
margin-left: auto;
margin-right: auto;
top: 50px;
left: 0;
right: 0;
text-align: center;
}
<body>
<div class="container">
<div class="frame">
<p class="static">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et volutpat tortor. Phasellus
dignissim euismod ante, vel vulputate sapien vehicula dapibus. Phasellus sollicitudin est ac neque
interdum, non vulputate augue efficitur. In feugiat convallis nunc. Etiam at luctus erat. Pellentesque
in scelerisque tortor, vitae sodales lorem. Morbi vitae maximus massa. Donec aliquet dolor neque, porta
tristique massa efficitur id. Ut ac odio justo. Maecenas accumsan justo id turpis lobortis vulputate.
Aliquam ut sapien purus. Vestibulum vel sagittis purus. Quisque et gravida odio. Curabitur pretium
lacinia nunc, nec dignissim lacus tristique sed. Vivamus ligula mi, interdum id hendrerit eget, posuere
quis neque. Nulla eu eleifend arcu.
</p>
<h2 class="floating">Floating text</h2>
</div>
</div>
<script src="script.js"></script>
</body>
Event listeners perform better than requestNextAnimationFrame, so it's better to add an event listner for a scroll event. Thanks to #CasperKuethe

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>

Navbar change on scroll, can't use libraries

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.

Categories

Resources