Develop Reference

Slider contents shifting on windows resize

Running into an issue where the width of my slide elements shift when the browser window is resized. Refreshing the page causes the slide width to be calculated correctly on reload. I'm really not sure what's causing the values to change on window resize. They kind of just run off the stage a bit and then get cut off by the overflow:hidden.
const slidesContainer = document.getElementById("slides-container");
const slide = document.querySelector(".slide");
const prevButton = document.getElementById("slide-arrow-prev");
const nextButton = document.getElementById("slide-arrow-next");
nextButton.addEventListener("click", () => {
const slideWidth = slide.clientWidth;
slidesContainer.scrollLeft += slideWidth;
});
prevButton.addEventListener("click", () => {
const slideWidth = slide.clientWidth;
slidesContainer.scrollLeft -= slideWidth;
});
.slider-wrapper {
margin: 1rem;
position: relative;
overflow: hidden;
}
.slides-container {
height: 100%;
width: calc(100% - 60px);
display: flex;
list-style: none;
margin: auto;
padding: 0;
overflow: hidden;
}
.slide-arrow {
position: absolute;
display: flex;
top: 0;
bottom: 0;
margin: auto;
height: 4rem;
background-color: white;
border: none;
width: 2rem;
font-size: 3rem;
padding: 0;
cursor: pointer;
opacity: 0.5;
transition: opacity 100ms;
}
.slide-arrow:hover,
.slide-arrow:focus {
opacity: 1;
}
#slide-arrow-prev {
left: 0;
padding-left: 0.25rem;
border-radius: 0 2rem 2rem 0;
}
#slide-arrow-next {
right: 0;
padding-left: 0.75rem;
border-radius: 2rem 0 0 2rem;
}
.slide {
width: 100%;
height: unset!important;
flex: 4 0 25%;
display: flex;
}
<section class="slider-wrapper">
<button class="slide-arrow" id="slide-arrow-prev">
‹
</button>
<button class="slide-arrow" id="slide-arrow-next">
›
</button>
<ul class="slides-container" id="slides-container">
<li class="slide">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
</li>
<li class="slide">Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
</li>
<li class="slide">Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
</li>
<li class="slide">Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
</li>
<li class="slide">Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</li>
</ul>
</section>

I had to add a function to realign the slide if the window size changed
function reportWindowSize() {
const slideWidth = slide.clientWidth;
slidesContainer.scrollLeft = slideWidth;
}
window.onresize = reportWindowSize;

How to show scrollbar on mouse over?

If you go to youtube, you can see how their sidebar scrollbar becomes visible as soon as your mouse moves over it. I've been trying to replicate this, but my div only shows the scrollbar once I start actually scrolling.
I have overflow-y: auto;, but I've also tried it with overflow-y: scroll;, which had the same effect.
How can I make the scrollbar visible right away?

you can try this .. maybe it will help you..
it's not looking good but i think it should work..
i use scroll event . if you need use wheel event . set time delay as you need...
(function () {
var timer;
document.querySelector('div').addEventListener('scroll', function (event) {
if (event.type == 'scroll') {
addCSS = document.createElement('style');
addCSS.innerHTML = "::-webkit-scrollbar { display: block; }";
document.body.append(addCSS);
}
clearTimeout(timer);
timer = setTimeout(refresh, 300);
});
var refresh = function () {
addCSS = document.createElement('style');
addCSS.innerHTML = "::-webkit-scrollbar { display: none; }";
document.body.append(addCSS);
};
})();
.customized-scrollbar {
display: block;
width: 10em;
overflow: auto;
height: 2em;
margin: 10px;
}
::-webkit-scrollbar {
display: none;
}
.customized-scrollbar:hover::-webkit-scrollbar {
/* display: block; */
cursor: pointer;
}
/* Demonstrate a "mostly customized" scrollbar
* (won't be visible otherwise if width/height is specified) */
.customized-scrollbar::-webkit-scrollbar {
width: 5px;
height: 50px;
/* background-color: #aaa; */
background-color: transparent;
}
/* Add a thumb */
.customized-scrollbar::-webkit-scrollbar-thumb {
background: #000;
height: 100px;
}
<div class="customized-scrollbar hidden-scrollbar" style="height:150px;background:red;width:200px;margin:0 auto;">
Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor.
Proin at nulla elementum, consectetur ex eget, commodo ante.
Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus
blandit quam turpis, at mollis velit pretium ut. Nunc consequat
efficitur ultrices. Nullam hendrerit posuere est. Nulla libero
sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum
tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
consectetur ipsum a ornare blandit. Aenean tempus at lorem sit
amet faucibus. Curabitur nibh justo, faucibus sed velit cursus,
mattis cursus dolor. Pellentesque id pretium est. Quisque
convallis nisi a diam malesuada mollis. Aliquam at enim ligula
</div>
by mouseover and mouseleave event..
document.querySelector('div').addEventListener('mouseover', function (event) {
addCSS = document.createElement('style');
addCSS.innerHTML = "::-webkit-scrollbar { display: block; }";
document.body.append(addCSS);
});
document.querySelector('div').addEventListener('mouseleave', function (event) {
addCSS = document.createElement('style');
addCSS.innerHTML = "::-webkit-scrollbar { display: none; }";
document.body.append(addCSS);
});
html{
scroll-behavior: smooth;
}
.customized-scrollbar {
display: block;
width: 10em;
overflow: auto;
height: 2em;
margin: 10px;
}
::-webkit-scrollbar {
display: none;
position: fixed;
margin-right: -10px;
}
.customized-scrollbar:hover::-webkit-scrollbar {
/* display: block; */
cursor: pointer;
}
/* Demonstrate a "mostly customized" scrollbar
* (won't be visible otherwise if width/height is specified) */
.customized-scrollbar::-webkit-scrollbar {
width: 5px;
height: 50px;
/* background-color: #aaa; */
background-color: transparent;
}
/* Add a thumb */
.customized-scrollbar::-webkit-scrollbar-thumb {
background: #000;
height: 100px;
}
<div class="customized-scrollbar hidden-scrollbar" style="height:150px;background:red;width:200px;margin:0 auto;">
Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor.
Proin at nulla elementum, consectetur ex eget, commodo ante.
Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus
blandit quam turpis, at mollis velit pretium ut. Nunc consequat
efficitur ultrices. Nullam hendrerit posuere est. Nulla libero
sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum
tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
consectetur ipsum a ornare blandit. Aenean tempus at lorem sit
amet faucibus. Curabitur nibh justo, faucibus sed velit cursus,
mattis cursus dolor. Pellentesque id pretium est. Quisque
convallis nisi a diam malesuada mollis. Aliquam at enim ligula
</div>
by hover effect
.mostly-customized-scrollbar {
display: block;
width: 10em;
overflow: auto;
height: 2em;
margin:10px;
}
.mostly-customized-scrollbar::-webkit-scrollbar {
display: none;
}
.mostly-customized-scrollbar:hover::-webkit-scrollbar {
display: block;
cursor:pointer;
}
/* Demonstrate a "mostly customized" scrollbar
* (won't be visible otherwise if width/height is specified) */
.mostly-customized-scrollbar::-webkit-scrollbar {
width: 5px;
height: 50px;
/* background-color: #aaa; */
background-color: transparent;
}
/* Add a thumb */
.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
background: #000;
height: 100px;
}
<div class="mostly-customized-scrollbar" style="height:150px;background:red;width:200px;margin:0 auto;">
Etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor.
Proin at nulla elementum, consectetur ex eget, commodo ante.
Sed eros mi, bibendum ut dignissim et, maximus eget nibh. Phasellus
blandit quam turpis, at mollis velit pretium ut. Nunc consequat
efficitur ultrices. Nullam hendrerit posuere est. Nulla libero
sapien, egestas ac felis porta, cursus ultricies quam. Vestibulum
tincidunt accumsan sapien, a fringilla dui semper in. Vivamus
consectetur ipsum a ornare blandit. Aenean tempus at lorem sit
amet faucibus. Curabitur nibh justo, faucibus sed velit cursus,
mattis cursus dolor. Pellentesque id pretium est. Quisque
convallis nisi a diam malesuada mollis. Aliquam at enim ligula
</div>

try this:
#container {
margin: 20px;
height: 100px;
border: solid 1px red;
background-color: #ddd;
overflow-y: hidden;
}
#container:hover {
overflow-y: scroll;
}
<body>
<div id="container">
<br> hello
<br> hello
<br> hello
<br> hello
<br> hello
<br> hello
<br> hello
</div>
</body>

Disable and Enable Scrolling with Javascript

I've been trying to find a solution to enable/disable scrolling with Javascript from the same element but I haven't find anything that worked for me.
In my mind I want to create an if statement that triggers onclick when the hamburger icon is clicked and I see the menu I want to disable the scrolling else I want the scroll effect back since I click again the hamburger icon.
So far the only thing that I have found is only to disable the scroll but I cant bring the scroll back.
Is there a way to achieve that?
HTML
<nav>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li>About</li>
<li>Work</li>
<li>Contact
</li>
</ul>
</nav>
<section>
<p class="par">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer gravida neque ac egestas venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed pharetra purus libero, vestibulum vulputate mauris tristique et. Cras auctor hendrerit mi sed pharetra. Ut convallis dolor vel vestibulum tristique. Sed feugiat metus ut euismod rutrum. Aenean eu nulla mattis felis aliquam placerat nec quis nunc. In aliquam ornare diam, non faucibus massa semper sed. Curabitur id tellus diam.
Duis lorem nunc, varius a orci ut, interdum gravida mi. Proin blandit purus eu dolor mattis faucibus. Praesent mauris dolor, maximus ac ipsum vel, auctor suscipit diam. Nullam non cursus felis. Ut lobortis lacus facilisis molestie tempus. Duis in enim vel mi posuere consectetur vel eu sem. Aliquam pretium condimentum metus in euismod. Duis sed luctus mi. Nunc iaculis suscipit mi, at dictum neque euismod ac. Praesent diam tellus, elementum id ultricies aliquet, efficitur nec dui. Nullam ut sodales elit.
Curabitur suscipit rutrum ligula a consequat. Suspendisse iaculis urna nec rutrum tristique. Phasellus et dui arcu. Donec finibus sagittis venenatis. Donec eu mauris augue. Morbi vitae ligula imperdiet ligula malesuada bibendum in sit amet nibh. Nunc a urna odio. Nam posuere justo ut turpis finibus, ac cursus leo suscipit. Proin lectus justo, finibus auctor faucibus eget, sodales ac tortor. Nam ut ligula mollis, vulputate orci eget, commodo justo. Proin sagittis, ante et iaculis pretium, sapien eros tristique risus, sed imperdiet risus leo laoreet mauris.
Nulla eros arcu, commodo in cursus nec, commodo ut sem. Proin dapibus nunc metus, id efficitur arcu pretium quis. Etiam ut felis vestibulum magna malesuada fringilla eu ac felis. Fusce ac ex arcu. Nam nec dapibus nulla. Aenean eu tincidunt velit. Curabitur eget felis eros. Fusce vitae efficitur nisl. Nam eu facilisis nibh. Sed cursus interdum ex vel tempus. Proin fermentum lacinia ligula, rutrum iaculis magna varius eget. Sed nec auctor purus. Donec viverra, est a volutpat pharetra, tortor lectus sodales erat, a scelerisque enim lectus nec ante. Nullam eu tristique lorem, ut dignissim neque. Aliquam in ipsum iaculis justo gravida sagittis id at felis. Vestibulum iaculis facilisis quam at eleifend.
</p>
</section>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
background-color: #191818;
color: blue;
}
nav {
height: 10vh;
}
.par {
line-height:2rem;
}
.nav-links {
display: flex;
list-style: none;
width: 30%;
height: 100%;
justify-content: space-around;
align-items: center;
margin-left: auto;
}
.nav-links li a {
color: white;
text-decoration: none;
font-size: 16px;
}
#media screen and (max-width: 768px) {
.line{
width: 30px;
height: 3px;
background: white;
margin: 5px;
}
nav{
position: relative;
}
.hamburger {
position: absolute;
cursor: pointer;
right: 5%;
top: 50%;
transform: translate(-5%, -50%);
z-index: 2;
}
.nav-links {
position: fixed;
height: 100vh;
width: 100%;
flex-direction: column;
transition: all 1s ease-out;
pointer-events: none;
}
.nav-links.open {
pointer-events: all;
}
.landing {
flex-direction: column;
}
.nav-links li {
opacity: 0;
}
.nav-links li a {
font-size: 25px;
}
.nav-links li:nth-child(1) {
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2) {
transition: all 0.5s ease 0.4s;
}
.nav-links li:nth-child(3) {
transition: all 0.5s ease 0.6s;
}
li.fade{
opacity: 1;
}
}
JS
const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");
hamburger.addEventListener('click', () => {
navLinks.classList.toggle("open");
links.forEach(link =>{
link.classList.toggle("fade");
})
function noScroll() {
window.scrollTo(0, 0);
}
window.removeEventListener("scroll", noScroll);
window.addEventListener("scroll", noScroll);
});

remove the scrolling JS
instead, create a toggle for a css class that targets your content, you'd just toggle a no-scroll class on and off
let css handle the scrolling logic: Prevent body scrolling but allow overlay scrolling

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