const navbar = document.querySelector('.navbar');
let scrolled = false;
window.onscroll = function() {
if(window.scrollY > 100) {
navbar.classList.remove('top');
if(!scrolled) {
navbar.style.transform = 'translateY(-70px)';
}
setTimeout(() => {
navbar.style.transform = 'translateY(0px)';
scrolled = true;
}, 200);
} else {
navbar.classList.add('top');
scrolled = false;
}
}
const hamMenu = document.querySelector('#ham-menu');
const listItems = document.querySelectorAll('.item-list li');
loadEventListeners();
function loadEventListeners() {
hamMenu.addEventListener('click', extendMenu);
}
function extendMenu(e) {
hamMenu.style.transform = 'scale(1.5)';
setTimeout(() => hamMenu.style.transform = 'scale(1)', 300);
if(hamMenu.classList.contains('closed')) {
listItems.forEach(item => {
item.style.transform = 'translateX(0vw)'
});
hamMenu.classList.remove('closed');
} else {
listItems.forEach(item => {
item.style.transform = 'translateX(100vw)'
});
hamMenu.classList.add('closed');
}
}
const message = document.querySelector('#message');
const heightLimit = 200;
message.oninput = function() {
message.style.height = ""; /* Reset the height*/
message.style.height = message.scrollHeight 'px';
}/* UTILITIES */
/* Buttons */
.btn {
display: inline-block;
padding: 1rem 2.5rem;
border: none;
border-radius: 5px;
text-align: center;
cursor: pointer;
}
.btn:hover {
transition: all 0.15s ease-in-out;
transform: scale(1.05);
opacity: 0.85;
}
.btn:active {
transform: scale(1.1);
}
/* Text */
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-light { color: var(--light); }
.text-dark { color: var(--dark); }
/* Background */
.bg-primary {
background: var(--primary);
color: #fff;
}
.bg-secondary {
background: var(--secondary);
color: #fff;
}
.bg-light {
background: var(--light);
color: #333;
}
.bg-dark {
background: var(--dark);
color: #fff;
}
.bg-white {
background: #fff;
color: #333;
}
.bg-outline {
background: transparent;
color: #fff;
border: 1px #fff solid;
}
/* Flex Icons */
.flex-icons {
display: flex;
justify-content: space-around;
padding: 3rem;
width: 100%;
}
.flex-icons .box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
flex: 1;
padding: 1rem 2rem;
}
.flex-icons img {
width: 20rem;
border-radius: 50%;
margin-bottom: 3rem;
}
/* Flex Row */
.flex-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.flex-row.flex-reverse {
flex-direction: row-reverse;
}
.flex-row .column {
flex-basis: 100%;
flex: 1;
}
.flex-row img{
object-fit: cover;
width: 100%;
height: 100%;
}
.flex-row .column .column-1,
.flex-row .column .column-2 {
height: 100%;
}
.flex-row .column .column-2 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 2.5rem;
}
.flex-row .column .column-2 h4 {
font-weight: bold;
}
.flex-row .column .column-2 h2 {
font-size: 4rem;
margin: 1rem 0 2rem;
font-weight: 300;
}
.flex-row .column .column-2 p {
margin-bottom: 3rem;
}
/* Flex Grid */
.flex-grid {
padding: 2rem 2rem 4rem;
}
.flex-grid .row {
display: flex;
flex-direction: row;
width: 100%;
}
.flex-grid .row .column {
flex-basis: 100%;
padding: 0 0.3rem;
}
.flex-grid .row .column img {
width: 100%;
cursor: pointer;
transition: all 0.2s ease;
}
.flex-grid .row .column img:hover {
opacity: 0.9;
transform: scale(1.02);
}
.flex-grid .grid-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 4rem 1rem;
}
.flex-grid .grid-content h2 {
font-size: 4rem;
font-weight: 300;
margin: 2rem 0 3rem;
}
/* MAIN STYLE */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
:root {
/* Colors */
--primary: #28a745;
--secondary: #0284d0;
--light: #f4f4f4;
--dark: #333;
}
html {
font-size: 62.5%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
line-height: 1.4;
font-size: 1.6rem;
color: #333;
background: #fff;
}
h1, h2, h3 {
font-weight: 400;
}
a {
text-decoration: none;
color: #333;
}
ul {
list-style: none;
}
/* Hero */
.hero {
background: url(../img/showcase.jpg) no-repeat center center/cover;
height: 100vh;
position: relative;
color: #fff;
}
.hero.blog-page {
height: 30vh;
background: url(../img/blog/blog-home.jpg) no-repeat center center/cover;
}
.hero.blog-page .content h1 {
font-size: 4rem;
}
.hero.blog-page .content h1 span {
font-weight: bold;
font-style: italic;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
}
.hero * {
z-index: 1;
}
.hero .content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
height: 100%;
}
.hero .content h1 {
font-size: 6.5rem;
font-weight: 300;
text-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.5);
}
.hero .content p {
font-size: 2.2rem;
font-weight: 300;
margin: 1.5rem 0 3rem;
text-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.5);
}
/* navbar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background: #333;
opacity: 0.8;
color: #f4f4f4;
position: fixed;
top: 0;
width: 100%;
height: 7rem;
padding: 0 3rem;
transition: all 0.4s ease-in;
}
.navbar.top {
background: transparent;
}
.navbar a {
color: #fff;
}
.navbar ul {
display: flex;
align-items: center;
}
.navbar ul li a {
padding: 1rem 2rem;
margin: 0 0.5rem;
}
.navbar ul li a:hover {
border-bottom: 2px var(--primary) solid;
}
.navbar .logo {
transition: all 0.2s ease-in-out;
}
.navbar .logo:hover {
transform: scale(1.05);
}
.navbar .logo span {
font-weight: bold;
font-style: italic;
}
.navbar #ham-menu {
cursor: pointer;
}
/* Flex Icons */
.flex-icons .box i {
background: var(--primary);
color: #fff;
padding: 1.5rem;
border-radius: 50%;
margin-bottom: 2rem;
}
.flex-icons .box h3 {
margin-bottom: 2rem;
font-weight: bold;
font-size: 2rem;
}
/* Team */
#team .flex-icons .box h4 {
margin-bottom: 1rem;
}
#team .team-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 5rem 3rem;
}
#team .team-content h4 {
font-size: 1.8rem;
}
#team .team-content h2 {
font-size: 4.5rem;
font-weight: 300;
margin: 2rem 0;
}
/* Contact Form */
#contact .contact-form {
padding: 2rem;
width: 100%;
}
#contact .contact-form .form-control label {
display: block;
}
#contact .contact-form .form-control input,
#contact .contact-form textarea {
width: 100%;
height: 3.5rem;
padding: 0.5rem 1rem;
margin-bottom: 1rem;
border: 1px #ddd solid;
border-radius: 0.5rem;
font-family: 'Roboto', sans-serif;
}
#contact .contact-form textarea {
height: 15rem;
resize: vertical;
overflow: hidden;
}
#contact .contact-form .form-control input:focus,
#contact .contact-form textarea:focus {
outline: none;
border: 1px var(--primary) solid;
}
#contact .contact-form .form-control input::placeholder,
#contact .contact-form textarea::placeholder {
font-family: 'Roboto', sans-serif;
opacity: 1;
}
#contact .contact-form button {
display: inline-block;
}
#contact .column-2 h2 {
padding-left: 2rem;
}
/* Footer */
.footer {
height: 20rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.footer a {
color: #fff;
margin: 0 1.5rem;
}
.footer a:hover {
color: var(--primary);
}
.footer a i {
transition: 0.2 all ease-in-out;
}
.footer a i:hover {
transform: scale(1.1);
}
.footer a i:active {
transform: scale(1.15);
}
.footer p {
margin-top: 2rem;
}
.footer p span {
font-style: italic;
font-weight: bold;
}
/* Post Page */
.post .post-1 {
padding: 3rem;
}
.post img {
width: 50rem;
border-radius: 1rem;
display: block;
margin: 3rem auto;
}
.post .post-1 h2 {
font-size: 4rem;
font-weight: 300;
padding-top: 0.5rem;
}
.post .post-1 p {
margin-bottom: 2rem;
}
/* Extra */
.item-list li {
/* display: none; */
transition: all 0.5s ease;
transform: translateX(100vw);
}
.item-list .fa-bars {
transition: all 0.3s ease;
font-size: 2rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://kit.fontawesome.com/5c96e2fbe8.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="css/style.css" />
<title>EdgeLedger</title>
</head>
<body id="home">
<header >
<div >
<h1 >
<a href="index.html">
<span
><i ></i> Edge</span
>Ledger
</a>
</h1>
<nav>
<ul >
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#solutions">About</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
<i id="ham-menu" ></i>
</ul>
</nav>
</div>
<div >
<h1>The Sky Is The Limit</h1>
<p>Join us on our mission to change the world</p>
<a href="#about" >
<i ></i>
Read More
</a>
</div>
</header>
<main id="about">
<!-- About: Services -->
<section id="services">
<div >
<div >
<i ></i>
<h3>Financial Advice</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
atque!
</p>
</div>
<div >
<i ></i>
<h3>Stock Analysis</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
atque!
</p>
</div>
<div >
<i ></i>
<h3>Collaborations</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
atque!
</p>
</div>
</div>
</section>
<!-- About: Solutions -->
<section id="solutions">
<div >
<div >
<div >
<img src="img/meeting-2.jpg" alt="image" />
</div>
</div>
<div >
<div >
<h4>What you're looking for</h4>
<h2>Our reputation speaks for us</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo
facere placeat ullam incidunt cum iste obcaecati aperiam
pariatur magni, eos optio sint culpa provident laboriosam quod
quia, suscipit alias deleniti. Natus soluta, recusandae iure
possimus accusantium hic perferendis rem quasi et vitae
explicabo esse doloribus quidem consectetur nobis! Eum, et.
</p>
<a href="#solutions" >
<i ></i>
Read More
</a>
</div>
</div>
</div>
</section>
<!-- Cases -->
<section id="cases">
<div >
<div >
<h4>This is what we do</h4>
<h2>Business Cases</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt,
voluptatum.
</p>
</div>
<div >
<div >
<img src="img/cases/cases1.jpg" alt="" />
<img src="img/cases/cases2.jpg" alt="" />
</div>
<div >
<img src="img/cases/cases3.jpg" alt="" />
<img src="img/cases/cases4.jpg" alt="" />
</div>
<div >
<img src="img/cases/cases5.jpg" alt="" />
<img src="img/cases/cases6.jpg" alt="" />
</div>
<div >
<img src="img/cases/cases7.jpg" alt="" />
<img src="img/cases/cases8.jpg" alt="" />
</div>
</div>
</div>
</section>
<!-- Blog -->
<section id="blog">
<div >
<div >
<div >
<img src="img/blog/blog-home.jpg" alt="image" />
</div>
</div>
<div >
<div >
<h4>Blog | May 23 2022</h4>
<h2>Our recent restructuring plan</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo
facere placeat ullam incidunt cum iste obcaecati aperiam
pariatur magni, eos optio sint culpa provident laboriosam quod
quia, suscipit alias deleniti. Natus soluta, recusandae iure
possimus accusantium hic perferendis rem quasi et vitae
explicabo esse doloribus quidem consectetur nobis! Eum, et.
</p>
<a href="blog.html" >
<i ></i>
Read More
</a>
</div>
</div>
</div>
</section>
<!-- Team -->
<section id="team">
<div >
<h4>Who we are</h4>
<h2>Our Professional Team</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur,
expedita?
</p>
</div>
<div >
<div >
<img src="img/team/Chief Executive Officer.jpg" alt="" />
<h4>Jane Smith</h4>
<p>Chief Executive Officer</p>
</div>
<div >
<img src="img/team/Chief Operating Officer.jpg" alt="" />
<h4>John Doe</h4>
<p>Chief Operating Officer</p>
</div>
<div >
<img src="img/team/Chief Marketing Officer.jpg" alt="" />
<h4>Sara Rogers</h4>
<p>Chief Marketing Officer</p>
</div>
</div>
</section>
<section id="contact">
<div >
<div >
<div >
<img src="img/contact.jpg" alt="image" />
</div>
</div>
<div >
<div >
<h2>Contact Us</h2>
<form >
<div >
<label for="name"></label>
<input
type="text"
name="name"
id="name"
placeholder="Full Name"
/>
</div>
<div >
<label for="email"></label>
<input
type="email"
name="email"
id="email"
placeholder="Email Address"
/>
</div>
<div >
<label for="phone"></label>
<input
type="text"
name="phone"
id="phone"
placeholder="Contact Number"
/>
</div>
<textarea
name="message"
id="message"
placeholder="Message"
></textarea>
<button type="submit" >Send</button>
</form>
</div>
</div>
</div>
</section>
</main>
<footer >
<div >
<a href="#"><i ></i></a>
<a href="#"><i ></i></a>
<a href="#"><i ></i></a>
<a href="#"><i ></i></a>
</div>
<p>
All Rights Reserved © 2022,
<span >Edge</span>Ledger
</p>
</footer>
<!-- Scripts -->
<script src="src/app.js"></script>
</body>
</html>I'm relatively new to HTML/CSS and JavaScript and could really use some help on this one, as I've tried my best but to no avail. I will include the relevant code at the end. Thank you so much for your help in advance!
I'm experiencing some very weird behaviour with trying to animate a navbar menu. Basically, this is a part of a larger project in one of the courses that I'm taking, and I decided to redo the entire project and add more features here and there and experiment.
In the navbar (within the ul) I've decided to add a Font Awesome icon for a menu, then translate the list-items out of the view-port. When clicked, the icon triggers a function in the JavaScript file that translates the list-items into their place on the navbar, then translates them out of the view-port when pressed again. This is of course accompanied by a transition, and works/looks really well for a discount navbar menu.
One thing to explain before I ask my question is that there's another JavaScript function that turns the navbar's background from fully transparent to 80% opacity when scrolling further than 70px from the top, and turns it back to fully transparent when reaching the top again. Screenshot-1 (at the top) - Screenshot-2 (scrolled).
The problem is, when the navbar's background is at 80% opacity, a weird behaviour occurs where the navbar's background loses it's opacity and only the list-items retain the 80% opacity. This is an example. It gets even worse when I hover over it like in this screenshot. When clicking the menu icon again to retract them out, something even weirder like this sometimes happens, while the background on the navbar regains its correct opacity.
After trying a few things like removing the hover effect, not including the icon in the ul,..etc, I noticed that if I just set the opacity of the navbar to the default value 1, this weird behaviour stops, but I want to know why is this happening, as I don't want to simply give up on the slight transparency on the navbar.
I'm sure there's something I'm missing or not aware of, and I would love to learn this now to avoid a similar issue in the future. Is the opacity the issue, or is there something else causing this?
The relevant code is below. I may leave out some unnecessary CSS code in my CSS utility file that I'm certain doesn't have an effect on this. Here's a screenshot of how the header makes sense of the full header tag and its elements.
CodePudding user response：
The property opacity affects on the whole elements not only background. You can use only background-color property to achieve what you want.
You can change the background color like this where c is the alpha(opacity) value. You can also use rgba(51,51,51,0.8) which is equivalent of #333c.
.navbar {
background-color: #333c;
}
.navbar.top {
background-color: transparent;
}
You can either just change the background color from javascript
navbar.style.backgroundColor = '#333c' // when scrolled
navbar.style.backgroundColor = 'transparent' // when scrolled