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

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;
}

Related

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>

How to expand down a "Read more..." section using CSS and jQuery

I currently have a paragraph tag in html that has long text inside of it. I also have a button that when clicked should expand and retract the section of text. This is used because the text is too long so I am adding a "Read More" button to expand and show the full text. Right now I am unable to get the paragraph to expand. Instead when the button is clicked it fades into the background and never show.
HTML
<div class="infos">
<p class="name">Mr Big</p>
<br>
<p class="job">Founder & Co-Owner</p>
<p class="read-more"> Lorem IPsum Lorem IPsumLorem IPsumLorem IPsumLorem IPsumLorem IPsumLorem long text...</p>
</div>
<div class="button_container">
<button class="btn2">
<span>Read more...</span>
</button>
</div>
CSS
.infos .read-more{
font-size: 15px;
font-weight: 500;
color: rgb(230, 241, 255);
font-style: italic;
line-height: 1.5;
position: relative;
width: 100%;
text-align: center;
margin: 0 auto; padding: 15px 10px;
overflow: hidden;
max-height: 170px;
/* "transparent" only works here because == rgba(0,0,0,0) */
background-image: linear-gradient(to top, transparent, #434343);
}
.btn2 {
border: none;
display: block;
text-align: center;
cursor: pointer;
text-transform: uppercase;
outline: none;
overflow: hidden;
position: absolute;
color: #fff;
font-weight: 700;
font-size: 10px;
background-color: #59646c;
padding: 10px 30px;
margin: 0 auto;
box-shadow: 0 5px 15px rgba(0,0,0,0.20);
border-radius: 25px;
}
.btn2 span {
position: relative;
z-index: 1;
}
.button_container {
position: relative;
left: 0;
right: 0;
top: 30%;
}
.description, .link {
text-align: center;
}
.btn2:after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 490%;
width: 140%;
background: #78c7d2;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
transform: translateX(-98%) translateY(-25%) rotate(45deg);
}
.btn2:hover:after {
-webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
transform: translateX(-9%) translateY(-25%) rotate(45deg);
}
jQuery
let $el, $ps, $up, totalHeight;
$(".btn2").click(function() {
totalHeight = 0;
$el = $(this);
$p = $el.parent();
$up = $p.parent();
$ps = $up.find("p:not('.read-more')");
// measure how tall inside should be by adding together heights of all inside paragraphs (except read-more paragraph)
$ps.each(function() {
totalHeight += $(this).outerHeight();
});
$up
.css({
// Set height to prevent instant jumpdown when max height is removed
"height": $up.height(),
"max-height": 9999
})
.animate({
"height": totalHeight
});
// fade out read-more
$p.fadeOut();
// prevent jump-down
return false;
});

Consider the following code example.
$(function() {
$(".btn2").click(function(e) {
var self = $(this);
var par = self.parent();
var target = par.prev(".infos").find(".read-more");
self.fadeOut("fast", function() {
target.animate({
height: target[0].scrollHeight
}, 600);
});
});
});
.infos .read-more {
font-size: 15px;
font-weight: 500;
color: rgb(230, 241, 255);
font-style: italic;
line-height: 1.5;
position: relative;
width: 100%;
text-align: center;
margin: 0 auto;
padding: 15px 10px;
overflow: hidden;
height: 170px;
/* "transparent" only works here because == rgba(0,0,0,0) */
background-image: linear-gradient(to top, transparent, #434343);
text-overflow: ellipsis;
}
.btn2 {
border: none;
display: block;
text-align: center;
cursor: pointer;
text-transform: uppercase;
outline: none;
overflow: hidden;
position: absolute;
color: #fff;
font-weight: 700;
font-size: 10px;
background-color: #59646c;
padding: 10px 30px;
margin: 0 auto;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.20);
border-radius: 25px;
}
.btn2 span {
position: relative;
z-index: 1;
}
.button_container {
position: relative;
left: 0;
right: 0;
top: 30%;
}
.description,
.link {
text-align: center;
}
.btn2:after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 490%;
width: 140%;
background: #78c7d2;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
transform: translateX(-98%) translateY(-25%) rotate(45deg);
}
.btn2:hover:after {
-webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
transform: translateX(-9%) translateY(-25%) rotate(45deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="infos">
<p class="name">Mr Big</p>
<br>
<p class="job">Founder & Co-Owner</p>
<div class="read-more">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt eget nullam non nisi est sit amet facilisis. Vitae purus faucibus ornare suspendisse sed nisi lacus. Ornare arcu
odio ut sem nulla pharetra diam sit. Amet dictum sit amet justo donec enim diam vulputate. Lectus magna fringilla urna porttitor rhoncus dolor purus non. Eget gravida cum sociis natoque penatibus. Aliquam sem et tortor consequat id porta nibh. Et
netus et malesuada fames ac. Velit aliquet sagittis id consectetur purus ut.</p>
<p>Arcu risus quis varius quam quisque. Faucibus purus in massa tempor nec. Sed vulputate mi sit amet mauris commodo quis. Lorem sed risus ultricies tristique. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Et ligula ullamcorper malesuada
proin libero nunc. Facilisis gravida neque convallis a. Facilisis magna etiam tempor orci eu lobortis elementum nibh. Amet est placerat in egestas. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Porta lorem mollis aliquam ut
porttitor leo a. Semper risus in hendrerit gravida rutrum quisque. Leo integer malesuada nunc vel risus commodo viverra maecenas. Arcu non odio euismod lacinia at quis risus sed vulputate. Donec et odio pellentesque diam volutpat commodo sed. Aliquam
malesuada bibendum arcu vitae elementum curabitur vitae. Ut etiam sit amet nisl purus in. Massa enim nec dui nunc mattis enim ut. Donec ac odio tempor orci.</p>
<p>Massa ultricies mi quis hendrerit dolor magna eget est. Augue interdum velit euismod in pellentesque massa placerat. Vel pharetra vel turpis nunc. Id faucibus nisl tincidunt eget nullam non. Id ornare arcu odio ut sem nulla. Tortor id aliquet lectus
proin nibh nisl condimentum id. Id semper risus in hendrerit gravida rutrum quisque. Dapibus ultrices in iaculis nunc sed augue lacus. Quis ipsum suspendisse ultrices gravida dictum. Ornare aenean euismod elementum nisi quis. Rhoncus mattis rhoncus
urna neque viverra justo nec ultrices dui. Congue quisque egestas diam in arcu. Orci phasellus egestas tellus rutrum tellus. Nisl suscipit adipiscing bibendum est ultricies integer. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices.
Elit at imperdiet dui accumsan sit amet. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Faucibus in ornare quam viverra.</p>
<p>Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Non consectetur a erat nam at lectus urna duis. Facilisi cras fermentum odio eu feugiat pretium nibh. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Vel orci porta
non pulvinar neque laoreet. Et odio pellentesque diam volutpat commodo sed egestas egestas. Adipiscing enim eu turpis egestas pretium. Nulla pellentesque dignissim enim sit amet venenatis urna. Porta non pulvinar neque laoreet suspendisse. Quam
nulla porttitor massa id neque aliquam vestibulum morbi blandit. Duis ut diam quam nulla porttitor massa. Justo donec enim diam vulputate ut pharetra sit amet aliquam. Fringilla urna porttitor rhoncus dolor purus non enim. Blandit turpis cursus
in hac habitasse. Sed blandit libero volutpat sed. Mattis pellentesque id nibh tortor id aliquet lectus proin nibh.</p>
<p>Sed risus pretium quam vulputate dignissim suspendisse in est ante. Urna cursus eget nunc scelerisque viverra mauris. Tincidunt eget nullam non nisi. Praesent elementum facilisis leo vel fringilla est ullamcorper eget nulla. Nulla facilisi nullam
vehicula ipsum a arcu cursus. Risus nec feugiat in fermentum posuere. Lobortis feugiat vivamus at augue eget arcu. Eget est lorem ipsum dolor. Fames ac turpis egestas sed tempus urna. Phasellus vestibulum lorem sed risus ultricies tristique. Erat
nam at lectus urna duis convallis convallis tellus id. Non odio euismod lacinia at quis risus sed vulputate odio. Nisl nunc mi ipsum faucibus.</p>
</div>
</div>
<div class="button_container">
<button class="btn2">
<span>Read more...</span>
</button>
</div>
You can use .animate() to animate changes with CSS. For this script, it would be best then set the height to meet that of the entire text. The scrollHeight property of the element gives us this the number of pixels that is equal to the full height of the box even though we have no overflow and the height is already set.
I use the callback option in .fadeOut() to ensure that the fade animation completes before we start a new animation to reveal the text.
I also found this article if you want to fiddle with ellipse like styling: http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/
Update
$(function() {
$(".btn2").click(function(e) {
var self = $(this);
var par = self.parent();
var target = par.prev(".infos").find(".read-more");
if (self.data("action") == undefined) {
self.data({
action: "more",
height: target.css("height").slice(0,-2)
});
}
if (self.data("action") == "more") {
console.log("Expand to " + target[0].scrollHeight);
target.animate({
height: target[0].scrollHeight
}, 600);
self.text("Read Less...");
self.data("action", "less");
} else {
console.log("Shrink to " + self.data("height"));
target.animate({
height: self.data("height")
}, 600);
self.text("Read More...");
self.data("action", "more");
}
});
});
.infos .read-more {
font-size: 15px;
font-weight: 500;
color: rgb(230, 241, 255);
font-style: italic;
line-height: 1.5;
position: relative;
width: 100%;
text-align: center;
margin: 0 auto;
padding: 15px 10px;
overflow: hidden;
height: 170px;
/* "transparent" only works here because == rgba(0,0,0,0) */
background-image: linear-gradient(to top, transparent, #434343);
text-overflow: ellipsis;
}
.btn2 {
border: none;
display: block;
text-align: center;
cursor: pointer;
text-transform: uppercase;
outline: none;
overflow: hidden;
position: absolute;
color: #fff;
font-weight: 700;
font-size: 10px;
background-color: #59646c;
padding: 10px 30px;
margin: 0 auto;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.20);
border-radius: 25px;
}
.btn2 span {
position: relative;
z-index: 1;
}
.button_container {
position: relative;
left: 0;
right: 0;
top: 30%;
}
.description,
.link {
text-align: center;
}
.btn2:after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 490%;
width: 140%;
background: #78c7d2;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
transform: translateX(-98%) translateY(-25%) rotate(45deg);
}
.btn2:hover:after {
-webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
transform: translateX(-9%) translateY(-25%) rotate(45deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="infos">
<p class="name">Mr Big</p>
<br>
<p class="job">Founder & Co-Owner</p>
<div class="read-more">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt eget nullam non nisi est sit amet facilisis. Vitae purus faucibus ornare suspendisse sed nisi lacus. Ornare arcu
odio ut sem nulla pharetra diam sit. Amet dictum sit amet justo donec enim diam vulputate. Lectus magna fringilla urna porttitor rhoncus dolor purus non. Eget gravida cum sociis natoque penatibus. Aliquam sem et tortor consequat id porta nibh. Et
netus et malesuada fames ac. Velit aliquet sagittis id consectetur purus ut.</p>
<p>Arcu risus quis varius quam quisque. Faucibus purus in massa tempor nec. Sed vulputate mi sit amet mauris commodo quis. Lorem sed risus ultricies tristique. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Et ligula ullamcorper malesuada
proin libero nunc. Facilisis gravida neque convallis a. Facilisis magna etiam tempor orci eu lobortis elementum nibh. Amet est placerat in egestas. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Porta lorem mollis aliquam ut
porttitor leo a. Semper risus in hendrerit gravida rutrum quisque. Leo integer malesuada nunc vel risus commodo viverra maecenas. Arcu non odio euismod lacinia at quis risus sed vulputate. Donec et odio pellentesque diam volutpat commodo sed. Aliquam
malesuada bibendum arcu vitae elementum curabitur vitae. Ut etiam sit amet nisl purus in. Massa enim nec dui nunc mattis enim ut. Donec ac odio tempor orci.</p>
<p>Massa ultricies mi quis hendrerit dolor magna eget est. Augue interdum velit euismod in pellentesque massa placerat. Vel pharetra vel turpis nunc. Id faucibus nisl tincidunt eget nullam non. Id ornare arcu odio ut sem nulla. Tortor id aliquet lectus
proin nibh nisl condimentum id. Id semper risus in hendrerit gravida rutrum quisque. Dapibus ultrices in iaculis nunc sed augue lacus. Quis ipsum suspendisse ultrices gravida dictum. Ornare aenean euismod elementum nisi quis. Rhoncus mattis rhoncus
urna neque viverra justo nec ultrices dui. Congue quisque egestas diam in arcu. Orci phasellus egestas tellus rutrum tellus. Nisl suscipit adipiscing bibendum est ultricies integer. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices.
Elit at imperdiet dui accumsan sit amet. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Faucibus in ornare quam viverra.</p>
<p>Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Non consectetur a erat nam at lectus urna duis. Facilisi cras fermentum odio eu feugiat pretium nibh. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Vel orci porta
non pulvinar neque laoreet. Et odio pellentesque diam volutpat commodo sed egestas egestas. Adipiscing enim eu turpis egestas pretium. Nulla pellentesque dignissim enim sit amet venenatis urna. Porta non pulvinar neque laoreet suspendisse. Quam
nulla porttitor massa id neque aliquam vestibulum morbi blandit. Duis ut diam quam nulla porttitor massa. Justo donec enim diam vulputate ut pharetra sit amet aliquam. Fringilla urna porttitor rhoncus dolor purus non enim. Blandit turpis cursus
in hac habitasse. Sed blandit libero volutpat sed. Mattis pellentesque id nibh tortor id aliquet lectus proin nibh.</p>
<p>Sed risus pretium quam vulputate dignissim suspendisse in est ante. Urna cursus eget nunc scelerisque viverra mauris. Tincidunt eget nullam non nisi. Praesent elementum facilisis leo vel fringilla est ullamcorper eget nulla. Nulla facilisi nullam
vehicula ipsum a arcu cursus. Risus nec feugiat in fermentum posuere. Lobortis feugiat vivamus at augue eget arcu. Eget est lorem ipsum dolor. Fames ac turpis egestas sed tempus urna. Phasellus vestibulum lorem sed risus ultricies tristique. Erat
nam at lectus urna duis convallis convallis tellus id. Non odio euismod lacinia at quis risus sed vulputate odio. Nisl nunc mi ipsum faucibus.</p>
</div>
</div>
<div class="button_container">
<button class="btn2">
<span>Read more...</span>
</button>
</div>

Methods
.toggleClass('.more .less') Toggles .more and .less classes on each clicked button. When clicked the button text changes accordingly:
button.read.more Read More...
button.read.less Read Less...
.animate({height: "toggle", opacity: "toggle"}) When a button is clicked the paragraph (p.extra) that follows said button will slide up/down and fade in/out.
Demo
Note: Details commented in demo
/*
Delegate click event to all button.read
Toggle the .more and .less classes on the clicked button.read
The p.extra that follows the clicked button.read will slide up/down and fade in/out
*/
$('.read').on('click', function() {
$(this).toggleClass('more less').next('.extra').animate({
height: "toggle",
opacity: "toggle"
});
return false;
});
:root,
body {
font: 500 3vw/1.45 Verdana;
background: #fff;
}
button.read {
font: inherit;
width: 16ch;
cursor: pointer;
}
button.read.more::after {
content: ' More...'
}
button.read.less::after {
content: ' Less...'
}
p.extra {
display: none
}
<article>
<h3>Mr. Big</h3>
<p>Founder & Co-Owner</p>
<button class='read more'>Read</button>
<p class="extra"> Lorem IPsum Lorem IPsumLorem IPsumLorem IPsumLorem IPsumLorem IPsumLorem long text...</p>
</article>
<hr>
<article>
<h3>Mr. Small</h3>
<p>Founder & Co-Owner</p>
<button class='read more'>Read</button>
<p class="extra"> Lorem IPsum Lorem IPsumLorem IPsumLorem IPsumLorem IPsumLorem IPsumLorem long text...</p>
</article>
<hr>
<article>
<h3>Ms. Big</h3>
<p>Founder & Co-Owner</p>
<button class='read more'>Read</button>
<p class="extra"> Lorem IPsum Lorem IPsumLorem IPsumLorem IPsumLorem IPsumLorem IPsumLorem long text...</p>
</article>
<hr>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

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.

Sticking a fixed div on scrolling down

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

Modify your css with this
#left {
background: #73CC66;
width: 50%;
height: 300px;
font-size: 16px;
color: #fff;
float:left;
position: static;
}
and apply this javascript
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript" ></script>
<script>
window.onscroll = function(){
if( window.XMLHttpRequest ) {
var position=window.pageYOffset;
if ( position > 160) {
$('#left').css({'position':'fixed', 'top':'0' });
} else {
$('#left').css({'position':'static', 'top':'auto' });
}
}
}
</script>
Hope this works

Categories

Resources