Grid footer covers site content - javascript

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

You Can Use This:
you can change the value with the one you want!
#content
{
margin-bottom:70px;
}

You can update your footer like this, so the footer doesn't cover your text.
Your two ad bars have a fixed height and width, so your footer will cover those on different screen sizes.
.navbar {
background-color: #333;
position: sticky;
bottom: 0;
right: 0;
width: 100%;
}
And then introduce flexbox to stretch your content. Your code looks then something like this:
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
display: flex;
flex-direction: column;
min-height: 100vh;
}
#content {
max-width: 720px;
margin: 100px auto 0;
flex: 1;
}
#divleft {
position: fixed;
top: 50%;
transform: translate(-50%, -50%);
left: calc((100% - 720px)/4);
width: 200px;
height: 400px;
border: solid;
border-color: red;
}
#divright {
position: fixed;
top: 50%;
transform: translate(50%, -50%);
right: calc((100% - 720px)/4);
width: 200px;
height: 400px;
border: solid;
border-color: red;
}
/*
The Navigation Container/Block
*/
.navbar {
background-color: #333;
position: sticky;
bottom: 0%;
right: 0%;
width: 100%;
}
/*
Grid Container
*/
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
/*
Item 1
*/
.item-1 {
text-align: end;
}
/*
Item 2
*/
.item-2 {
color: white;
display: flex;
align-items: center;
justify-content: center;
}
/*
Item 3
*/
.item-3 {
text-align: end;
display: flex;
align-items: center;
justify-content: flex-end;
}
.item-3 a {
color: #f2f2f2;
text-align: center;
padding: 15px 16px;
text-decoration: none;
}
.item-3 a:hover {
background-color: #ddd;
color: black;
}
.item-3 a.active {
background-color: #04aa6d;
color: white;
}
/*
Toggle Icon For Menu
*/
.navbar .icon {
display: none;
}
/*
This Will Display In Media Queries
*/
.copyright-bottom {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<section id="divleft"></section>
<section id="content">
<h2>Responsive Bottom Navbar Example</h2>
<p>Resize the browser window to see how it works.</p>
viverra ex. Praesent elementum egestas venenatis. Duis quis nulla mi. Aliquam efficitur enim ipsum, sed venenatis tortor tempor eu. Maecenas maximus diam nec ante pellentesque, a efficitur ipsum semper. Donec sagittis enim quis nisl efficitur sodales.
Etiam porttitor tristique urna ut auctor. Mauris eget urna quis diam interdum euismod et vel turpis. Quisque vel tincidunt purus. Aliquam a mauris tortor. Vestibulum fringilla augue sit amet egestas tempus. Pellentesque pellentesque erat id portaviverra ex. Praesent elementum egestas venenatis. Duis quis nulla mi. Aliquam efficitur enim ipsum, sed venenatis tortor tempor eu. Maecenas maximus diam nec ante pellentesque, a efficitur ipsum semper. Donec sagittis enim quis nisl efficitur sodales.
Etiam porttitor tristique urna ut auctor. Mauris eget urna quis diam interdum euismod et vel turpis. Quisque vel tincidunt purus. Aliquam a mauris tortor. Vestibulum fringilla augue sit amet egestas tempus. Pellentesque pellentesque erat id portaviverra ex. Praesent elementum egestas venenatis. Duis quis nulla mi. Aliquam efficitur enim ipsum, sed venenatis tortor tempor eu. Maecenas maximus diam nec ante pellentesque, a efficitur ipsum semper. Donec sagittis enim quis nisl efficitur sodales.
Etiam porttitor tristique urna ut auctor. Mauris eget urna quis diam interdum euismod et vel turpis. Quisque vel tincidunt purus. Aliquam a mauris tortor. Vestibulum fringilla augue sit amet egestas tempus. Pellentesque pellentesque erat id portaviverra ex. Praesent elementum egestas venenatis. Duis quis nulla mi. Aliquam efficitur enim ipsum, sed venenatis tortor tempor eu. Maecenas maximus diam nec ante pellentesque, a efficitur ipsum semper. Donec sagittis enim quis nisl efficitur sodales.
Etiam porttitor tristique urna ut auctor. Mauris eget urna quis diam interdum euismod et vel turpis. Quisque vel tincidunt purus. Aliquam a mauris tortor. Vestibulum fringilla augue sit amet egestas tempus. Pellentesque pellentesque erat id portaviverra ex. Praesent elementum egestas venenatis. Duis quis nulla mi. Aliquam efficitur enim ipsum, sed venenatis tortor tempor eu. Maecenas maximus diam nec ante pellentesque, a efficitur ipsum semper. Donec sagittis enim quis nisl efficitur sodales.
Etiam porttitor tristique urna ut auctor. Mauris eget urna quis diam interdum euismod et vel turpis. Quisque vel tincidunt purus. Aliquam a mauris tortor. Vestibulum fringilla augue sit amet egestas tempus. Pellentesque pellentesque erat id portaviverra ex. Praesent elementum egestas venenatis. Duis quis nulla mi. Aliquam efficitur enim ipsum, sed venenatis tortor tempor eu. Maecenas maximus diam nec ante pellentesque, a efficitur ipsum semper. Donec sagittis enim quis nisl efficitur sodales.
Etiam porttitor tristique urna ut auctor. Mauris eget urna quis diam interdum euismod et vel turpis. Quisque vel tincidunt purus. Aliquam a mauris tortor. Vestibulum fringilla augue sit amet egestas tempus. Pellentesque pellentesque erat id porta
interdum. Vestibulum eros nibh, sagittis sit amet velit ut, auctor tincidunt tortor. Cras blandit condimentum enim ac sagittis. Nunc pretium, metus id pulvinar efficitur, nunc nunc sagittis sem, eget efficitur elit dui quis nisi. Mauris eros ex, elementum
sit amet neque at, elementum bibendum quam. Quisque ornare in lacus non maximus. Nullam volutpat, nisi vel consectetur mattis, magna ligula condimentum mauris, sed accumsan nibh augue quis dolor. Aenean id dignissim purus. Donec venenatis condimentum
nisl, quis placerat lorem suscipit nec. Vestibulum ante massa, euismod et pellentesque ut, eleifend volutpat arcu. Mauris porttitor nec orci vitae hendrerit. Suspendisse cursus urna id ullamcorper placerat. Nullam varius diam ut nibh molestie, a sodales
leo ultricies. Ut eget felis malesuada, imperdiet lectus finibus, aliquam quam. Pellentesque ac leo aliquam, viverra lorem in, dignissim nisl. Cras ligula mauris, bibendum vel ex ac, sodales ullamcorper magna. Etiam ac libero ut mi semper dignissim.
Proin eu enim at nunc porttitor mattis. Duis nec nisi vel est lacinia tincidunt. Sed iut fringilla tellus facil
</section>
<section id="divright"></section>
<footer class="navbar" id="myNavbar">
<div class="grid-container">
<div class="item-1"></div>
<div class="item-2">
<p class="copyright">© domain.com</p>
</div>
<div class="item-3">
About
Contact
News
Home
<a href="javascript:void(0);" style="font-size: 15px" class="icon" onclick="myFunction()">☰</a
>
</div>
</div>
<p class="copyright-bottom">© domain.com</p>
</footer>
</body>
</html>
It will work with less content also fine.
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
display: flex;
flex-direction: column;
min-height: 100vh;
}
#content {
max-width: 720px;
margin: 100px auto 0;
flex: 1;
}
#divleft {
position: fixed;
top: 50%;
transform: translate(-50%, -50%);
left: calc((100% - 720px)/4);
width: 200px;
height: 400px;
border: solid;
border-color: red;
}
#divright {
position: fixed;
top: 50%;
transform: translate(50%, -50%);
right: calc((100% - 720px)/4);
width: 200px;
height: 400px;
border: solid;
border-color: red;
}
/*
The Navigation Container/Block
*/
.navbar {
background-color: #333;
position: sticky;
bottom: 0%;
right: 0%;
width: 100%;
}
/*
Grid Container
*/
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
/*
Item 1
*/
.item-1 {
text-align: end;
}
/*
Item 2
*/
.item-2 {
color: white;
display: flex;
align-items: center;
justify-content: center;
}
/*
Item 3
*/
.item-3 {
text-align: end;
display: flex;
align-items: center;
justify-content: flex-end;
}
.item-3 a {
color: #f2f2f2;
text-align: center;
padding: 15px 16px;
text-decoration: none;
}
.item-3 a:hover {
background-color: #ddd;
color: black;
}
.item-3 a.active {
background-color: #04aa6d;
color: white;
}
/*
Toggle Icon For Menu
*/
.navbar .icon {
display: none;
}
/*
This Will Display In Media Queries
*/
.copyright-bottom {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<section id="divleft"></section>
<section id="content">
<h2>Responsive Bottom Navbar Example</h2>
<p>Resize the browser window to see how it works.</p>
venenatis tortor tempor eu. Maecenas maximus diam nec ante pellentesque, a efficitur ipsum semper. Donec sagittis enim quis nisl efficitur sodales.
Etiam porttitor tristique urna ut auctor. Mauris eget urna quis diam interdum euismod
</section>
<section id="divright"></section>
<footer class="navbar" id="myNavbar">
<div class="grid-container">
<div class="item-1"></div>
<div class="item-2">
<p class="copyright">© domain.com</p>
</div>
<div class="item-3">
About
Contact
News
Home
<a href="javascript:void(0);" style="font-size: 15px" class="icon" onclick="myFunction()">☰</a
>
</div>
</div>
<p class="copyright-bottom">© domain.com</p>
</footer>
</body>
</html>

Related

Have one text element track the position of another text element

I would like to have the red "Aliquam" text inside of the div with class ".absolute" track on top of the exact position of the (blue) "Aliquam" text inside ".aliquam-span", including on browser resize.
I've tried a few different ways to do this but haven't had much luck - hoping that someone here can help.
Nesting the text as a child of the span is not an option, unfortunately.
Thank you!
let aliquam = document.querySelector('.aliquam-span')
let aliquamAbsolute = document.querySelector('.red-text')
let aliquamRect = aliquam.getBoundingClientRect()
let aliquamAbsoluteRect = aliquamAbsolute.getBoundingClientRect()
let xOffset = aliquamRect.left - aliquamAbsoluteRect.left
let yOffset = aliquamRect.top - aliquamAbsoluteRect.top
console.log({xOffset})
aliquamAbsolute.style.left = `${xOffset}px`
aliquamAbsolute.style.top = `${yOffset}px`
.container {
width: 100%;
max-width: 60rem;
margin-left: auto;
margin-right: auto;
}
p {
font-size: 1.5rem;
}
.wrap {
position: relative;
}
.absolute {
position: absolute;
inset: 0;
}
.red-text {
position: relative;
color: red;
left: '200px';
}
.aliquam-span {
color: blue;
}
<div class="container">
<div class="wrap">
<p>Maecenas a finibus sapien. Duis pulvinar ligula vel arcu cursus, in euismod nunc iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce facilisis quis libero nec bibendum. Donec suscipit eros sit amet ex condimentum ullamcorper. Aliquam dictum, risus id pharetra congue, nisl nisi facilisis enim, sit amet facilisis nunc diam condimentum eros. Aenean euismod turpis id enim commodo sagittis. <span class="aliquam-span">Aliquam</span> eget dolor eget nulla tempus imperdiet. Praesent gravida, nisl quis malesuada faucibus, orci purus ultrices velit, ut porttitor libero ante at nisl. Duis eget convallis risus. Nunc vitae orci non tellus ultricies vestibulum in a augue. Vestibulum hendrerit leo ac nunc rutrum imperdiet. Integer sem tellus, maximus vel interdum ut, accumsan vel orci. Mauris maximus leo vitae felis dapibus euismod. Nulla facilisi. Donec ac ullamcorper justo.</p>
<div class="absolute">
<p class="red-text">Aliquam</p>
</div>
</div>
</div>
It works for me, try it:
function changePosition () {
let aliquam = document.querySelector('.aliquam-span');
let aliquamAbsolute = document.querySelector('.red-text').parentElement;
let aliquamRect = aliquam.getBoundingClientRect();
aliquamAbsolute.style.top = aliquamRect.top + 'px';
aliquamAbsolute.style.right = aliquamRect.right + 'px';
aliquamAbsolute.style.left = aliquamRect.left + 'px';
aliquamAbsolute.style.bottom = aliquamRect.bottom + 'px';
}
window.onresize = changePosition;
window.onload = changePosition;
.container {
width: 100%;
max-width: 60rem;
margin-left: auto;
margin-right: auto;
}
p {
font-size: 1.5rem;
}
.wrap {
}
.absolute {
position: absolute;
inset: 0;
}
.red-text {
position: relative;
color: red;
left: '200px';
margin: 0;
}
.aliquam-span {
color: blue;
}
<div class="container">
<div class="wrap">
<p>Maecenas a finibus sapien. Duis pulvinar ligula vel arcu cursus, in euismod nunc iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce facilisis quis libero nec bibendum. Donec suscipit eros sit amet ex condimentum ullamcorper. Aliquam dictum, risus id pharetra congue, nisl nisi facilisis enim, sit amet facilisis nunc diam condimentum eros. Aenean euismod turpis id enim commodo sagittis. <span class="aliquam-span">Aliquam</span> eget dolor eget nulla tempus imperdiet. Praesent gravida, nisl quis malesuada faucibus, orci purus ultrices velit, ut porttitor libero ante at nisl. Duis eget convallis risus. Nunc vitae orci non tellus ultricies vestibulum in a augue. Vestibulum hendrerit leo ac nunc rutrum imperdiet. Integer sem tellus, maximus vel interdum ut, accumsan vel orci. Mauris maximus leo vitae felis dapibus euismod. Nulla facilisi. Donec ac ullamcorper justo.</p>
<div class="absolute">
<p class="red-text">Aliquam</p>
</div>
</div>
</div>
You should target the div that is being set as the absolutely positioned one. So select .absolute instead of the .red-text.
let aliquam = document.querySelector('.aliquam-span')
let aliquamAbsolute = document.querySelector('.absolute')
let aliquamRect = aliquam.getBoundingClientRect()
let aliquamAbsoluteRect = aliquamAbsolute.getBoundingClientRect()
let xOffset = aliquamRect.left - aliquamAbsoluteRect.left
let yOffset = aliquamRect.top - aliquamAbsoluteRect.top
console.log({xOffset, yOffset})
aliquamAbsolute.style.left = `${xOffset}px`
aliquamAbsolute.style.top = `${yOffset}px`
.container {
width: 100%;
max-width: 60rem;
margin-left: auto;
margin-right: auto;
}
p {
font-size: 1.5rem;
}
.wrap {
position: relative;
}
.absolute {
position: absolute;
top: 0;
left: 0;
inset: 0;
}
.red-text {
color: red;
margin: 0;
}
.aliquam-span {
color: blue;
}
<div class="container">
<div class="wrap">
<p>Maecenas a finibus sapien. Duis pulvinar ligula vel arcu cursus, in euismod nunc iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce facilisis quis libero nec bibendum. Donec suscipit eros sit amet ex condimentum ullamcorper. Aliquam dictum, risus id pharetra congue, nisl nisi facilisis enim, sit amet facilisis nunc diam condimentum eros. Aenean euismod turpis id enim commodo sagittis. <span class="aliquam-span">Aliquam</span> eget dolor eget nulla tempus imperdiet. Praesent gravida, nisl quis malesuada faucibus, orci purus ultrices velit, ut porttitor libero ante at nisl. Duis eget convallis risus. Nunc vitae orci non tellus ultricies vestibulum in a augue. Vestibulum hendrerit leo ac nunc rutrum imperdiet. Integer sem tellus, maximus vel interdum ut, accumsan vel orci. Mauris maximus leo vitae felis dapibus euismod. Nulla facilisi. Donec ac ullamcorper justo.</p>
<div class="absolute">
<p class="red-text">Aliquam</p>
</div>
</div>
</div>
The folks at GSAP helped me out on this one!
Three different answers here:
https://greensock.com/forums/topic/35705-tracking-position-of-a-text-span-with-javascript/

Is it possible to align child items based on parents border-radius

I am creating a custom scrollbar with absolute positioned divs at the right(for vertical) and bottom(for horizontal).
When there is a border radius on parent, both scrollbars edge gets hidden.
Is there a way we can align the child elements based on border-radius of parent?
Like this:
Below is my html:
<div class=“content-container”>
<div class=“content”>SOME OVERFLOW CONTENT</div>
<div class=“scrollbar-y”>
<div class=“scrollbar-track”>
<div class=“scrollbar-thumb”></div>
</div>
</div>
</div>
Below is my css:
.content-container {
position: relative;
height: 400px;
width: 600px;
}
.content {
height: 100%;
width: 100%;
overflow: auto;
}
.scrollbar-y {
position: absolute;
top: 0;
right: 0;
height: 100%;
}
.scrollbar-track {
width: 16px;
height: 100%;
border: 4px;
background: transparent;
position: relative;
}
.scrollbar-thumb {
top: 0; // calculated based on scroll event
width: 8px;
background: grey;
height: 42px; // calculated based on clientHeight and scrollHeight
}
Here. You have to set height of "scrollbar-button".
.container {
overflow-y: auto;
max-height: 170px;
border: 1px solid #b9b9b9;
border-radius: 20px;
padding: 10px;
}
.container::-webkit-scrollbar {
width: 6px;
}
.container::-webkit-scrollbar-track {
background: #7070705e 0% 0% no-repeat padding-box;
border-radius: 100px;
}
.container::-webkit-scrollbar-button {
height: 14px;
}
.container::-webkit-scrollbar-thumb {
background: #707070 0% 0% no-repeat padding-box;
border-radius: 100px;
}
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu tellus elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut at erat in purus fermentum sodales. Nulla vel nunc vel metus interdum venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce tincidunt porttitor massa, in aliquam mauris vehicula id. In non volutpat velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc nisi dolor, viverra et efficitur ornare, lobortis vel velit. Integer volutpat, justo eleifend cursus pellentesque, lectus turpis fringilla elit, sit amet ultrices est magna ac leo. Sed dolor ipsum, bibendum ac viverra vel, vehicula ac quam. Sed eu justo vitae turpis vehicula interdum.
Cras ultricies leo eu aliquet ullamcorper. Pellentesque eu placerat velit. Sed sit amet gravida metus, nec auctor lectus. Donec blandit purus id est vehicula gravida. Aenean viverra enim id leo pretium, rhoncus mollis magna fringilla. Ut ullamcorper tempus urna id efficitur. Integer sit amet mattis nibh, ac sagittis diam. Morbi feugiat lacinia tortor nec dapibus. Pellentesque lobortis nec risus ac lacinia. Maecenas iaculis nisl nec lacus vehicula vulputate. Sed nec tortor id dui condimentum pulvinar. Donec nulla nisi, convallis at consectetur gravida, suscipit eu ante. In bibendum congue nisi, eget ullamcorper lectus bibendum in. Integer semper tortor elementum dui vestibulum tincidunt. Suspendisse potenti. Mauris vel velit vel felis fringilla dignissim.
Sed mauris nunc, auctor ac velit at, tempor sagittis diam. Nullam volutpat rutrum faucibus. Mauris ultrices tempor tempor. Mauris varius mauris sed viverra sollicitudin. Praesent nec eros sed enim consequat commodo. Donec id dui at nisi elementum condimentum. Nulla luctus lacus eu aliquam condimentum. Morbi vel dapibus massa. In nibh lectus, commodo vel elit in, sagittis varius elit. Donec in ex lorem. Vivamus id mattis dolor, nec finibus augue. Curabitur ut justo eu velit congue maximus. Maecenas non augue erat. Nam euismod leo ut enim dignissim, vitae semper dolor rhoncus.
</div>

Parallax scrolling issue (infinite scrolling)

I don't have any experience, just messing around with some code. I am trying to make a parallax page, there are three rows of buildings layered on top of eachother. (The first layer moves up, the second layer moves down and the third layer also moves down but faster). At first everything goes well but if I scroll to the bottom of the page the last row of buildings keeps moving down infinitly. Is there a way to stop it from moving?
here is the full code;
let city2 = document.getElementById('city-2');
let city3 = document.getElementById('city-3');
let header = document.getElementById('header');
window.addEventListener('scroll', function() {
let value = window.scrollY;
city2.style.top = value * 0.5 + 'px';
city3.style.top = value * 1.2 + 'px';
header.style.top = value * 0.8 + 'px';
})
#import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Rancho&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Langar&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #fff;
min-height: 100hv;
}
#header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10000;
}
#header .logo {
color: #094b65;
font-weight: 700;
font-size: 2em;
text-decoration: none;
}
#header ul {
display: flex;
justify-content: center;
align-items: center;
}
#header ul li {
list-style: none;
margin-left: 20px;
}
#header ul li a {
text-decoration: none;
padding: 6px 15px;
color: #094b65;
border-radius: 20px;
}
#header ul li a:hover,
#header ul li a.active {
background: #094b65;
color: #fff;
}
section {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
section::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
/*background: linear-gradient(to top, #98A6B3,transparent);*/
z-index: 10;
}
section img {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
section #text {
position: absolute;
color: #094b65;
font-size: 10vw;
text-align: center;
line-height: 0.55em;
font-family: 'Rancho', cursive;
transform: translateY(-50%);
}
section #text span {
font-size: 0.20em;
letter-spacing: 2px;
font-weight: 400;
font-family: 'Poppins', sans-serif;
}
.sec {
position: relative;
padding: 100px;
background: #98A6B3;
}
.sec h2 {
font-size: 3.5em;
color: #fff;
margin-bottom: 10px;
}
.sec p {
font-size: 1em;
color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header id="header">
Logo
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Menu</li>
</ul>
</header>
<section>
<img src="https://website-2.quintendesaever.repl.co/images/city-3.png" id="city-3">
<img src="https://website-2.quintendesaever.repl.co/images/city-2.png" id="city-2">
<img src="https://website-2.quintendesaever.repl.co/images/city-1.png" id="city-1">
</section>
<div class="sec">
<h2>Parallax Scrolling Effects</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras fermentum odio eu feugiat. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan. Mi tempus imperdiet nulla malesuada pellentesque. Urna molestie at elementum eu. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Ut faucibus pulvinar elementum integer enim neque volutpat. Elementum sagittis vitae et leo duis ut diam quam. Facilisis magna etiam tempor orci eu lobortis elementum nibh tellus. Non odio euismod lacinia at quis risus sed. Augue eget arcu dictum varius duis at consectetur lorem donec. Ut sem nulla pharetra diam. Integer feugiat scelerisque varius morbi enim nunc.<br><br>Vestibulum rhoncus est pellentesque elit. Lectus arcu bibendum at varius. Blandit cursus risus at ultrices. Est velit egestas dui id ornare arcu odio ut sem. Tempor orci eu lobortis elementum nibh. Pellentesque nec nam aliquam sem et tortor consequat id porta. Sed ullamcorper morbi tincidunt ornare massa eget egestas. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus vel. Senectus et netus et malesuada fames. A pellentesque sit amet porttitor eget dolor morbi non arcu. Duis tristique sollicitudin nibh sit amet commodo nulla. Dictum varius duis at consectetur. Egestas quis ipsum suspendisse ultrices gravida dictum fusce ut. Sed augue lacus viverra vitae congue.<br><br>Gravida cum sociis natoque penatibus et magnis dis parturient. Duis ut diam quam nulla. Faucibus turpis in eu mi bibendum neque. Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Commodo quis imperdiet massa tincidunt nunc pulvinar. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Porttitor lacus luctus accumsan tortor posuere ac ut. Molestie at elementum eu facilisis sed odio morbi. Nec nam aliquam sem et tortor consequat. Faucibus interdum posuere lorem ipsum. Tincidunt lobortis feugiat vivamus at augue eget. Amet venenatis urna cursus eget nunc scelerisque viverra mauris. Nunc sed velit dignissim sodales ut eu sem. Dictum varius duis at consectetur lorem donec massa. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at.<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras fermentum odio eu feugiat. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan. Mi tempus imperdiet nulla malesuada pellentesque. Urna molestie at elementum eu. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Ut faucibus pulvinar elementum integer enim neque volutpat. Elementum sagittis vitae et leo duis ut diam quam. Facilisis magna etiam tempor orci eu lobortis elementum nibh tellus. Non odio euismod lacinia at quis risus sed. Augue eget arcu dictum varius duis at consectetur lorem donec. Ut sem nulla pharetra diam. Integer feugiat scelerisque varius morbi enim nunc.<br><br>Vestibulum rhoncus est pellentesque elit. Lectus arcu bibendum at varius. Blandit cursus risus at ultrices. Est velit egestas dui id ornare arcu odio ut sem. Tempor orci eu lobortis elementum nibh. Pellentesque nec nam aliquam sem et tortor consequat id porta. Sed ullamcorper morbi tincidunt ornare massa eget egestas. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus vel. Senectus et netus et malesuada fames. A pellentesque sit amet porttitor eget dolor morbi non arcu. Duis tristique sollicitudin nibh sit amet commodo nulla. Dictum varius duis at consectetur. Egestas quis ipsum suspendisse ultrices gravida dictum fusce ut. Sed augue lacus viverra vitae congue.<br><br>Gravida cum sociis natoque penatibus et magnis dis parturient. Duis ut diam quam nulla. Faucibus turpis in eu mi bibendum neque. Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Commodo quis imperdiet massa tincidunt nunc pulvinar. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Porttitor lacus luctus accumsan tortor posuere ac ut. Molestie at elementum eu facilisis sed odio morbi. Nec nam aliquam sem et tortor consequat. Faucibus interdum posuere lorem ipsum. Tincidunt lobortis feugiat vivamus at augue eget. Amet venenatis urna cursus eget nunc scelerisque viverra mauris. Nunc sed velit dignissim sodales ut eu sem. Dictum varius duis at consectetur lorem donec massa. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at.</p>
</div>
<script src="script.js"></script>
</body>
</html>
You missing a condition when it should stop, so your html body increasing infinitly. Also there is no need to pull your background images that far down.
let city2 = document.getElementById('city-2');
let city3 = document.getElementById('city-3');
let header = document.getElementById('header');
window.addEventListener('scroll', function() {
const value = window.scrollY;
city2.style.top = Math.min(value * 0.5, city2.height) + 'px';
city3.style.top = Math.min(value * 1.2, city3.height) + 'px';
header.style.top = Math.min(value * 0.8, header.height) + 'px';
})
#import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Rancho&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Langar&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #fff;
min-height: 100hv;
}
#header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10000;
}
#header .logo {
color: #094b65;
font-weight: 700;
font-size: 2em;
text-decoration: none;
}
#header ul {
display: flex;
justify-content: center;
align-items: center;
}
#header ul li {
list-style: none;
margin-left: 20px;
}
#header ul li a {
text-decoration: none;
padding: 6px 15px;
color: #094b65;
border-radius: 20px;
}
#header ul li a:hover,
#header ul li a.active {
background: #094b65;
color: #fff;
}
section {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
section::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
/*background: linear-gradient(to top, #98A6B3,transparent);*/
z-index: 10;
}
section img {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
section #text {
position: absolute;
color: #094b65;
font-size: 10vw;
text-align: center;
line-height: 0.55em;
font-family: 'Rancho', cursive;
transform: translateY(-50%);
}
section #text span {
font-size: 0.20em;
letter-spacing: 2px;
font-weight: 400;
font-family: 'Poppins', sans-serif;
}
.sec {
position: relative;
padding: 100px;
background: #98A6B3;
}
.sec h2 {
font-size: 3.5em;
color: #fff;
margin-bottom: 10px;
}
.sec p {
font-size: 1em;
color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header id="header">
Logo
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Menu</li>
</ul>
</header>
<section>
<img src="https://website-2.quintendesaever.repl.co/images/city-3.png" id="city-3">
<img src="https://website-2.quintendesaever.repl.co/images/city-2.png" id="city-2">
<img src="https://website-2.quintendesaever.repl.co/images/city-1.png" id="city-1">
</section>
<div class="sec">
<h2>Parallax Scrolling Effects</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras fermentum odio eu feugiat. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan. Mi tempus imperdiet nulla malesuada pellentesque. Urna molestie at elementum eu. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Ut faucibus pulvinar elementum integer enim neque volutpat. Elementum sagittis vitae et leo duis ut diam quam. Facilisis magna etiam tempor orci eu lobortis elementum nibh tellus. Non odio euismod lacinia at quis risus sed. Augue eget arcu dictum varius duis at consectetur lorem donec. Ut sem nulla pharetra diam. Integer feugiat scelerisque varius morbi enim nunc.<br><br>Vestibulum rhoncus est pellentesque elit. Lectus arcu bibendum at varius. Blandit cursus risus at ultrices. Est velit egestas dui id ornare arcu odio ut sem. Tempor orci eu lobortis elementum nibh. Pellentesque nec nam aliquam sem et tortor consequat id porta. Sed ullamcorper morbi tincidunt ornare massa eget egestas. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus vel. Senectus et netus et malesuada fames. A pellentesque sit amet porttitor eget dolor morbi non arcu. Duis tristique sollicitudin nibh sit amet commodo nulla. Dictum varius duis at consectetur. Egestas quis ipsum suspendisse ultrices gravida dictum fusce ut. Sed augue lacus viverra vitae congue.<br><br>Gravida cum sociis natoque penatibus et magnis dis parturient. Duis ut diam quam nulla. Faucibus turpis in eu mi bibendum neque. Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Commodo quis imperdiet massa tincidunt nunc pulvinar. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Porttitor lacus luctus accumsan tortor posuere ac ut. Molestie at elementum eu facilisis sed odio morbi. Nec nam aliquam sem et tortor consequat. Faucibus interdum posuere lorem ipsum. Tincidunt lobortis feugiat vivamus at augue eget. Amet venenatis urna cursus eget nunc scelerisque viverra mauris. Nunc sed velit dignissim sodales ut eu sem. Dictum varius duis at consectetur lorem donec massa. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at.<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras fermentum odio eu feugiat. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan. Mi tempus imperdiet nulla malesuada pellentesque. Urna molestie at elementum eu. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Ut faucibus pulvinar elementum integer enim neque volutpat. Elementum sagittis vitae et leo duis ut diam quam. Facilisis magna etiam tempor orci eu lobortis elementum nibh tellus. Non odio euismod lacinia at quis risus sed. Augue eget arcu dictum varius duis at consectetur lorem donec. Ut sem nulla pharetra diam. Integer feugiat scelerisque varius morbi enim nunc.<br><br>Vestibulum rhoncus est pellentesque elit. Lectus arcu bibendum at varius. Blandit cursus risus at ultrices. Est velit egestas dui id ornare arcu odio ut sem. Tempor orci eu lobortis elementum nibh. Pellentesque nec nam aliquam sem et tortor consequat id porta. Sed ullamcorper morbi tincidunt ornare massa eget egestas. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus vel. Senectus et netus et malesuada fames. A pellentesque sit amet porttitor eget dolor morbi non arcu. Duis tristique sollicitudin nibh sit amet commodo nulla. Dictum varius duis at consectetur. Egestas quis ipsum suspendisse ultrices gravida dictum fusce ut. Sed augue lacus viverra vitae congue.<br><br>Gravida cum sociis natoque penatibus et magnis dis parturient. Duis ut diam quam nulla. Faucibus turpis in eu mi bibendum neque. Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Commodo quis imperdiet massa tincidunt nunc pulvinar. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Porttitor lacus luctus accumsan tortor posuere ac ut. Molestie at elementum eu facilisis sed odio morbi. Nec nam aliquam sem et tortor consequat. Faucibus interdum posuere lorem ipsum. Tincidunt lobortis feugiat vivamus at augue eget. Amet venenatis urna cursus eget nunc scelerisque viverra mauris. Nunc sed velit dignissim sodales ut eu sem. Dictum varius duis at consectetur lorem donec massa. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at.</p>
</div>
<script src="script.js"></script>
</body>
</html>

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>

Categories

Resources