Im trying to hide the bottom of the girl image when the 3D background is triggered. I tried to add the overflow: hidden; to the test-imgplace class and it doesn't look right.
Is there a better way to fix it?
See what I did on JSFIDDLE
.card .image {
height: 275px;
width: 183px;
background-size: cover;
background-position: center center;
}
.imgtest {
position: absolute;
z-index: 1;
text-align: center;
top: 0;
left: 100px;
border: solid 1px;
pointer-events: none;
}
.test-imgplace {
margin: 0 auto;
position: relative;
overflow: hidden;
}
.card .text {
height: 20%;
margin: 0;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
font-size: 50px;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
.card {
width: 183px;
height: 275px;
margin: auto auto;
background: #383030;
border-radius: 5px;
overflow: hidden;
text-align: center;
}
.card-content {
transform-style: preserve-3d;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.hover-in {
transition: .3s ease-out;
}
.hover-out {
transition: .3s ease-in;
}
.card-hover {
margin: 0;
}
<div class="test-imgplace">
<img src="https://christianluneborg.com/imgs/test-woman.png" class="imgtest">
<div class="card-hover">
<div class="card">
<div class="card-content">
<div class="image" style="background-image: url(https://christianluneborg.com/imgs/test-woman-bg.png);"></div>
</div>
</div>
</div>
</div>
Related
I'm making a car research/ranking website using React. Coming to the issue, I have 3 cards, with content on it once you hover over it.
It works perfectly well in desktops, but it doesn't properly show content in smaller devices: it overflows to the other section.
To fix this, I have added a media query to it, but it doesn't work either.
Please check my code:
.sec2 {
height: 100vh;
width: 100%;
color: white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: linear-gradient(to left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
url(https://static.feber.se/article_images/48/81/62/488162_1920.jpg)
no-repeat top center;
}
.wrapper {
display: flex;
width: 90%;
justify-content: space-around;
}
.card {
width: 350px;
height: 370px;
border-radius: 15px;
padding: 1.5rem;
position: relative;
object-fit: fill;
display: flex;
align-items: flex-end;
transition: 0.4s ease-out;
box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.5);
}
.card:hover {
transform: translateY(20px);
}
.card:hover:before {
opacity: 1;
}
.card:hover .info {
opacity: 1;
transform: translateY(0px);
}
.card:before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
border-radius: 15px;
background: rgba(0, 0, 0, 0.6);
z-index: 2;
transition: 0.5s;
opacity: 0;
}
.card img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
border-radius: 15px;
}
.card .info {
position: relative;
z-index: 3;
color: white;
opacity: 0;
transform: translateY(30px);
transition: 0.5s;
}
.card .info h1 {
margin: 0px;
font-size: 2rem;
}
.card .info p {
letter-spacing: 1px;
font-size: 15px;
margin-top: 8px;
}
.card .info button {
padding: 0.6rem;
outline: none;
border: none;
border-radius: 3px;
background: white;
color: black;
font-weight: bold;
cursor: pointer;
transition: 0.4s ease;
}
.card .info button:hover {
background: dodgerblue;
color: white;
}
#media only screen and (min-width: 600px) and (max-width: 768px) {
.wrapper {
flex-direction: column;
justify-content: center;
align-items: center;
}
.card {
height: 270px;
padding: 1rem;
width: 250px;
margin-bottom: 10px;
}
.card .info h1 {
font-size: 1rem;
}
.card .info p {
font-size: 15px;
}
.card .info button {
padding: 0.4rem;
font-weight: normal;
font-size: 12px;
}
}
#media (max-width: 600px) {
.wrapper {
flex-direction: column;
justify-content: center;
align-items: center;
}
.card {
height: 15%;
padding: 0.3rem;
width: 180px;
margin-bottom: 5px;
}
.card .info h1 {
font-size: 1rem;
}
.card .info p {
font-size: 10px;
}
.card .info button {
padding: 0.3rem;
font-weight: normal;
font-size: 10px;
}
}
And
<div>
<header className="sec2" id="section2">
<h1>
What is in this website?
</h1>
<div class="wrapper">
<div class="card">
<img src="https://cdn.jdpower.com/JDPA_2022%20Genesis%20G70%20Red%20Front%20Quarter%20View.jpg" />
<div class="info">
<h1>Car Rankings</h1>
<p>
It contains cars ranked based on body type, done after
comprehensive research.
</p>
<button>Go</button>
</div>
</div>
<div class="card">
<img src="https://i0.wp.com/autonxt.net/wp-content/uploads/2018/01/autocontentexp.com2018-Lincoln-Navigator5-5b1aebecc618f268352b037fb2253a291d670994-1.jpg?resize=2500%2C1500&ssl=1" />
<div class="info">
<h1>Car Reviews</h1>
<p>Contains reviews of selective cars written by us.</p>
<button>Read More</button>
</div>
</div>
<div class="card">
<img src="https://static0.hotcarsimages.com/wordpress/wp-content/uploads/2020/09/AWD-e1600115646672.jpg" />
<div class="info">
<h1>Used Cars/h1>
<p> We rank used cars so that you will only get the best out of it.
</p>
<button>Read More</button>
</div>
</div>
</div>
</header>
</div>
Image in computer: click, and
Image in smaller devices: click
first add the margin: auto in .wrapper class and some margin: 5px; to .card class because this make content in the center and looks good.
.wrapper {
display: flex;
width: 90%;
margin: auto;
justify-content: space-around;
}
.card {
/* your code */
margin: 5px;
}
Now, add just update margin: 15px; of all .card instead of margin-bottom
Here is the full code, https://codesandbox.io/s/laughing-gwen-4i47v5?file=/src/Home.jsx
I want to create this effect but with javascript not in pure css as he did. And no scss also just css It'll be good. codepen
.picture-container {
display: flex;
flex-flow: row nowrap;
justify-content: center;
justify-self: center;
align-items: center;
width: 40%;
height: 100vh;
}
.picture-frame {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
padding: 5%;
border: solid 1px #000;
}
.picture {
z-index: 1;
width: 100%;
height: 100%;
}
<html>
<div class="picture-container first-picture horizontal-small">
<div class="picture-frame">
<img
id="secondPic"
src="https://picsum.photos/200/300"
alt="picture of a brick house"
class="picture middle-right"
/>
</div>
</div>
<html>
I'm also using Vuejs if it changes something for this
You can use transform styling to get the 3D effect. Checkout my code below
var card = document.getElementsByClassName('card');
document.addEventListener("mousemove", function(e) {
var ax = -(window.innerWidth/2- e.pageX)/20;
var ay = (window.innerHeight/2- e.pageY)/10;
document.getElementById("cards").style.transform = "rotateY("+ax+"deg) rotateX("+ay+"deg)";
});
#import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700);
body {
background: #edf2f4;
perspective: 1000px;
transform-style: preserve-3d;
display: flex;
height: 100vh;
font-family: "Playfair Display", georgia, serif;
}
.card {
pointer-events: none;
transform: translateZ(0);
padding: 30px;
background: white;
border-radius: 5px;
width: 400px;
height: 200px;
margin: auto;
transform-style: preserve-3d;
backface-visibility: hidden;
display: flex;
box-shadow: 0 0 5px rgba(0, 0, 0, .1);
position: relative;
}
.card:after {
content: " ";
position: absolute;
width: 100%;
height: 10px;
border-radius: 50%;
left: 0;
bottom: -50px;
box-shadow: 0 30px 20px rgba(0, 0, 0, .3);
}
.card .card-content {
margin: auto;
text-align: center;
transform-style: preserve-3d;
}
.card h1 {
transform: translateZ(100px);
}
<div id="cards" class="card">
<div class="card-content">
<h1>Just hover around</h1>
</div>
</div>
I have a checkbox, that should trigger the menu to slide in from left side of the screen.The problem is when I got the menu hidden on the left, i can't make the function work. When I click the checkbox icon, it's animation works but nothing else happens. The menu is still hidden and I get no errors.
Here is a snippet of my code:
function showMenuSlider() {
var slider = document.querySelector(".menu-slider");
slider.classList.toggle("menu-slider-show");
var sliderOpacity = document.querySelector(".menu-slider-opacity");
sliderOpacity.classList.toggle("menu-slider-opacity-show")
}
* {
margin: 0;
padding: 0;
font-size: 16px;
font-family: Open Sans;
line-height: 1.6;
display: block;
}
html {
scroll-behavior: smooth;
}
main {
position: relative;
}
header {
width: 100%;
position: fixed;
top: 0;
z-index: 95;
box-shadow: 0px -2px 15px rgba(0, 0, 0, 1);
}
.header-container {
background-color: white;
display: flex;
flex-direction: column;
position: relative;
}
.header-upbar {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 50;
background-color: white;
width: 100%;
margin-top: 9px;
}
.header-upbar p {
font-size: 16px;
font-weight: 500;
color: grey;
}
.header-upbar-item2,
.header-upbar-item3 {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.header-upbar a {
text-decoration: none;
flex-basis: 50%;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
padding: 8px;
border-bottom: 0.5px solid grey;
}
.header-upbar a:first-of-type {
border-right: 0.5px solid grey;
}
.header-upbar-item2 img {
height: 23px;
margin-right: 6px;
}
.header-upbar-item3 img {
height: 23px;
margin: 0px 6px 0px 0px;
}
.header-downbar {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 51;
background-color: white;
}
.header-downbar-logo {
display: flex;
align-content: center;
align-items: center;
justify-content: center;
}
.header-downbar-logo img {
margin: 18px 18px 18px 18px;
height: 30px;
}
.header-downbar-menu {
height: 40px;
width: 40px;
display: block;
position: fixed;
margin: 15px 18px 15px 18px;
z-index: 502;
right: 5px;
top: 50px;
z-index: 100;
}
#menu {
display: none;
}
.icon {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
position: relative;
}
.icon .menu,
.icon .menu::before,
.icon .menu::after {
content: '';
background-color: rgba(50, 50, 50, 1);
display: block;
position: absolute;
height: 4px;
width: 35px;
transition: background ease .3s, top ease .3s .3s, transform ease .3s;
}
.menu {
top: 17.5px;
}
.menu::before {
top: 12px;
}
.menu::after {
top: -12px;
}
#menu:checked+.menu {
background: transparent;
}
#menu:checked+.menu::before {
transform: rotate(45deg);
}
#menu:checked+.menu::after {
transform: rotate(-45deg);
}
#menu:checked+.menu::before,
#menu:checked+.menu::after {
top: 0;
transition: top ease 0.3s, transform ease 0.3s 0.3s;
}
.menu-slider-opacity {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
z-index: 98;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider {
width: 200px;
height: 100vh;
background-color: white;
z-index: 99;
position: absolute;
;
top: 0;
left: -100%;
display: block;
}
.menu-slider-show {
left: 0;
}
.menu-slider-opacity-show {
left: 0;
}
<div class="header-downbar-menu" onclick="showMenuSlider()">
<label for="menu" class="icon"><input type="checkbox" id="menu">
<div class="menu"></div>
</label>
</div>
<div class="menu-slider-opacity"></div>
<div class="menu-slider"></div>
<header id="header">
<div class="header-container">
<div class="header-upbar">
<a href="mailto: ">
<div class="header-upbar-item2">
<img src="img/Fenix-e-mail-icon-white.png" alt="">
<p>blablablabla#o2.pl</p>
</div>
</a>
<a href="tel: ">
<div class="header-upbar-item3">
<img src="img/Fenix-phone-icon-white.png" alt="">
<p>+48 999 999 999</p>
</div>
</a>
</div>
<div class="header-downbar">
<div class="header-downbar-logo">
<img src="img/Fenix-logo-black.png" alt="">
</div>
</div>
</div>
</header>
The button is outside the header, because i need it to be on top of the dark opacity behind the menu. In the future I will make a nice white rounded background to it, so it won't invisible.
Of course if you know better way to do it, be my guest. I'm struggling with this for a while...
The problem is that you add the onclick handler on the header-downbar-menu and not on the checkbox. So when clicking the checkbox you also click on header-downbar-menu so the event is triggered twice. So the class is toggled twice ( added/removed in the same time...almost :) )
Add the click event on the input. ( you could use an onchange event instead of the click event to check the state checked or unchecked , that might help you )
function showMenuSlider() {
var slider = document.querySelector(".menu-slider");
slider.classList.toggle("menu-slider-show");
var sliderOpacity = document.querySelector(".menu-slider-opacity");
sliderOpacity.classList.toggle("menu-slider-opacity-show")
}
html {
scroll-behavior: smooth;
}
main {
position: relative;
}
header {
width: 100%;
position: fixed;
top: 0;
z-index: 95;
box-shadow: 0px -2px 15px rgba(0, 0, 0, 1);
}
.header-container {
background-color: white;
display: flex;
flex-direction: column;
position: relative;
}
.header-upbar {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 50;
background-color: white;
width: 100%;
margin-top: 9px;
}
.header-upbar p {
font-size: 16px;
font-weight: 500;
color: grey;
}
.header-upbar-item2,
.header-upbar-item3 {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.header-upbar a {
text-decoration: none;
flex-basis: 50%;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
padding: 8px;
border-bottom: 0.5px solid grey;
}
.header-upbar a:first-of-type {
border-right: 0.5px solid grey;
}
.header-upbar-item2 img {
height: 23px;
margin-right: 6px;
}
.header-upbar-item3 img {
height: 23px;
margin: 0px 6px 0px 0px;
}
.header-downbar {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 51;
background-color: white;
}
.header-downbar-logo {
display: flex;
align-content: center;
align-items: center;
justify-content: center;
}
.header-downbar-logo img {
margin: 18px 18px 18px 18px;
height: 30px;
}
.header-downbar-menu {
height: 40px;
width: 40px;
display: block;
position: fixed;
margin: 15px 18px 15px 18px;
z-index: 502;
right: 5px;
top: 50px;
z-index: 100;
}
#menu {
display: none;
}
.icon {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
position: relative;
}
.icon .menu,
.icon .menu::before,
.icon .menu::after {
content: '';
background-color: rgba(50, 50, 50, 1);
display: block;
position: absolute;
height: 4px;
width: 35px;
transition: background ease .3s, top ease .3s .3s, transform ease .3s;
}
.menu {
top: 17.5px;
}
.menu::before {
top: 12px;
}
.menu::after {
top: -12px;
}
#menu:checked+.menu {
background: transparent;
}
#menu:checked+.menu::before {
transform: rotate(45deg);
}
#menu:checked+.menu::after {
transform: rotate(-45deg);
}
#menu:checked+.menu::before,
#menu:checked+.menu::after {
top: 0;
transition: top ease 0.3s, transform ease 0.3s 0.3s;
}
.menu-slider-opacity {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
z-index: 98;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider {
width: 200px;
height: 100vh;
background-color: white;
z-index: 99;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider-show {
left: 0;
}
.menu-slider-opacity-show {
left: 0;
}
<div class="header-downbar-menu">
<label for="menu" class="icon"><input type="checkbox" id="menu" onclick="showMenuSlider()">
<div class="menu"></div>
</label>
</div>
<div class="menu-slider-opacity"></div>
<div class="menu-slider"></div>
<header id="header">
<div class="header-container">
<div class="header-upbar">
<a href="mailto: ">
<div class="header-upbar-item2">
<img src="img/Fenix-e-mail-icon-white.png" alt="">
<p>blablablabla#o2.pl</p>
</div>
</a>
<a href="tel: ">
<div class="header-upbar-item3">
<img src="img/Fenix-phone-icon-white.png" alt="">
<p>+48 999 999 999</p>
</div>
</a>
</div>
<div class="header-downbar">
<div class="header-downbar-logo">
<img src="img/Fenix-logo-black.png" alt="">
</div>
</div>
</div>
</header>
I have a sticky header that utilizes the process found here (https://www.w3schools.com/howto/howto_js_sticky_header.asp). This works great. However, this does not account for variable heights of the hero element above the header. When you resize the window vertically, the sticky header breaks until you refresh the browser. What do I need to add to the script so that it detects the new height upon resizing?
Here is a codepen displaying my dilemma: https://codepen.io/JKDESIGN44/pen/VwYBqBV
Here is the javascript:
// STICKY HEADER
document.addEventListener('DOMContentLoaded', function () {
// When the event DOMContentLoaded occurs, it is safe to access the DOM
// When the user scrolls the page, execute myFunction
window.addEventListener('scroll', myFunctionForSticky);
// Get the navbar
var navbar = document.getElementById("c3Header");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position.
// Remove "sticky" when you leave the scroll position
function myFunctionForSticky() {
if (window.pageYOffset >= sticky) {
console.log("window.pageYOffset >= sticky");
} else {
console.log("Not window.pageYOffset >= sticky");
}
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
}
})
You don't need any JS to accomplish this. All you need are two lines of css to be able to accomplish the same, with way less complexity.
Take a look at this:
html, body, header{
margin: 0px;
padding: 0px;
}
.full-height-section{
height: 100vh;
width: 100%;
position: relative;
}
a{
text-decoration: none;
font-family: 'Montserrat', sans-serif;
color: inherit;
}
li{
list-style-type: none;
text-transform: uppercase;
font-size: 15px;
letter-spacing: 2px;
transition: all 0.1s ease;
}
.bg-aqua{
background-color: #073038;
}
.text-white{
color: #FFFFFF;
transition: all 0.1s ease;
font-family:
}
.text-hover-blue:hover{
color: #7DD2EF;
transition: all 0.1s ease;
}
/* --------------HEADER---- */
/* ----HERO---- */
.hero{
height: 100vh;
width: 100vw;
min-height: 500px;
position: relative;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.hero-text{
font-size: 40px;
text-transform: uppercase;
z-index: 20;
}
.content-hero{
height: 25vh;
width: 100vw;
min-height: 500px;
position: relative;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.hero-bg{
display: block;
object-fit: cover;
z-index: -1;
position: absolute;
min-height: 500px;
}
.hero-logo-wrap{
align-self: center;
height: 30vw;
max-height: 50vh;
min-height: 200px;
z-index: 10;
}
.hero-logo{
height: 100%;
}
.down-arrow-wrapper{
height: 50px;
width: 50px;
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: 40px;
border-radius: 999px;
background-color: rgba(125,210,239,0.0);
transition: all 0.5s ease;
z-index: 10;
}
.down-arrow-wrapper:hover{
background-color: rgba(125,210,239,1.0);
transition: all 0.5s ease;
transform: scale(1.2)
}
.down-arrow-rel-wrapper{
height: 50px;
width: 50px;
position: relative;
}
.down-arrow{
height: 20px;
width: 20px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 8px;
transform: rotate(45deg);
border-right: solid #fff 3px;
border-bottom: solid #fff 3px;
}
.img-overlay{
height: 100%;
width: 100%;
position: absolute;
margin: auto;
top: 0;
mix-blend-mode: overlay;
background: rgb(3,31,36);
background: -moz-linear-gradient(148deg, rgba(3,31,36,1) 0%, rgba(125,210,239,1) 100%);
background: -webkit-linear-gradient(148deg, rgba(3,31,36,1) 0%, rgba(125,210,239,1) 100%);
background: linear-gradient(148deg, rgba(3,31,36,1) 0%, rgba(125,210,239,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#031f24",endColorstr="#7dd2ef",GradientType=1);
}
/* ----HERO END---- */
.header{
height: 150px;
width: 100%;
z-index: 100;
display: flex;
justify-content: center;
position: sticky;
top: 0;
}
.content-header{
width: 100%;
z-index: 100;
display: flex;
flex-direction: column;
}
.sticky{
position: fixed;
top: 0;
width: 100%;
}
.sticky + .page-wrapper{
padding-top: 150px;
}
.nav-flexbox{
height: 150px;
width: 80%;
max-width: 1500px;
min-width: 1000px;
position: relative;
/*
position: absolute;
margin: auto;
left: 0;
right: 0;
*/
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.nav-left{
display: flex;
flex-direction: row;
justify-content: space-between;
text-transform: uppercase;
letter-spacing: 2px;
width: 100%;
}
.nav-center{
width: 70%;
display: flex;
justify-content: center;
align-items: center;
}
.header-logo{
height: 80px;
z-index: 999;
}
.header-logo-link{
transition: all 0.5s ease;
}
.header-logo-link:hover{
transform: scale(1.2);
transition: all 0.5s ease;
}
.nav-right{
display: flex;
flex-direction: row;
justify-content: space-between;
text-transform: uppercase;
letter-spacing: 2px;
width: 100%;
}
.tab-nav-center{
display: none;
}
.tab-nav-right{
display: none;
}
.content-sub-nav{
height: 50px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: center;
}
.sub-nav-arrow {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 30px solid #031F24;
position: absolute;
margin: auto;
bottom: 0;
left: 10px;
}
/* ---------------HEADER END---- */
.content-section{
height: calc(100vh - 150px);
display: flex;
justify-content: center;
align-items: center;
}
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap" rel="stylesheet">
</head>
<header>
<!----------------
HERO
------------------>
<div class="hero full-height-section">
<div class="hero-logo-wrap">
<img src="http://c3.abettermancc.com/wp-content/uploads/2019/09/Primary-Logo_Vertical.png" class="hero-logo">
</div>
<a href="#c3Header">
<div class="down-arrow-wrapper">
<div class="down-arrow">
</div>
</div>
</a>
<img src="http://c3.abettermancc.com/wp-content/uploads/2019/09/audience-black-and-white-black-and-white-2014773.jpg" class="hero-bg full-height-section">
<!--------------Overlay -->
<div class="bg-aqua" style="width: 100%; height: 100%; position: absolute;
margin: auto; top: 0; opacity: 0.7; z-index: 9;">
</div>
<div class="img-overlay" style="z-index: 9;">
</div>
<!--------------Overlay END -->
</div>
<!----------------
HERO END
------------------>
</header>
<!----------------
NAVIGATION
------------------>
<nav class="header bg-aqua text-white" id="c3Header">
<div class="nav-flexbox">
<div class="nav-left">
<li>who we are</li>
<li>ministries</li>
<li>sermons</li>
</div>
<div class="nav-center">
<a href="#" class="header-logo-link">
<img src="http://c3.abettermancc.com/wp-content/uploads/2019/09/Primary-Icon-01.png" class="header-logo">
</a>
</div>
<div class="nav-right">
<li>get connected</li>
<li>events</li>
<li>give online</li>
</div>
</div>
</nav>
<!----------------
NAVIGATION END
------------------>
<div class="content-section" style="background-color: #888888;">
<p>SECTION 1</p>
</div>
<div class="content-section" style="background-color: #999999;">
<p>SECTION 2</p>
</div>
<div class="content-section" style="background-color: #888888;">
<p>SECTION 3</p>
</div>
The trick was adding:
position: sticky;
top: 0;
To the .header class. The top:0 states that this class content will only get sticky when it reaches 0 offset from the top (meaning, just at the top of the page).
I've a form I'm creating, and I'll have some sections that will apear from right to left, on top of that and fixed is a bar, that should increase in width each time I click on continue to go to the next question. that way user will know he's progressing. I can't make work my progress bar, can you help me figure out why?
HTML
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
<div class="questionsContainer">
<div class="section one">
<p class="sectionTitle">This is the First Question?</p>
<div class="buttonContinue" id="section2">CONTINUE</div>
</div>
<div class="section two">
<p class="sectionTitle">Aja! time for the Second one!!</p>
<div class="buttonContinue" id="section3">CONTINUE</div>
</div>
<div class="section three">
<p class="sectionTitle">Another Question? 3 so far?</p>
<div class="buttonContinue" id="section4">CONTINUE</div>
</div>
</div>
CSS
body {
margin: 0 auto;
transition: all 0.2s ease;
}
.progress-container {
width: 100%;
height: 4px;
background: transparent!important;
position: fixed;
top: 0;
z-index: 99;
}
.progress-bar {
height: 4px;
background: #4ce4ff;
width: 10%;
}
header {
width: 100%;
height: 150px;
position: relative;
background-color: fuchsia;
}
.questionsContainer {
width: 100%;
height: calc(100% - 200px);
position: absolute;
background-color: lime;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
footer {
width: 100%;
height: 50px;
position: fixed;
bottom: 0;
background-color: black;
}
.section {
background-color: purple;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.one {
position: absolute;
right: auto;
transition: all 0.2s ease;
}
.two {
position: absolute;
right: -100%;
transition: all 0.2s ease;
}
.three {
position: absolute;
right: -100%;
transition: all 0.2s ease;
}
.sectionTitle {
font-family: 'Montserrat', sans-serif;
color: white;
font-size: 30px;
margin: 0 auto;
}
.buttonContinue {
font-family: 'Montserrat', sans-serif;
color: white;
font-size: 16px;
padding: 10px 20px;
background-color: red;
border-radius: 5px;
margin: 20px 0px;
text-align: center;
cursor: pointer;
width: 100px;
}
JAVASCRIPT
<script type="text/javascript">
document.getElementById('section2').onclick = function(){
$('.one').css('right','100%');
$('.two').css('right','auto');
}
document.getElementById('section3').onclick = function(){
$('.two').css('right','100%');
$('.three').css('right','auto');
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#section2").click(addVisit);
$("#section3").click(addVisit);
$("#section4").click(addVisit);
});
function addVisit(){
var progressTag = $('#myBar');
count ++;
progressTag.css('width', count * 10 + "%");
});
</script>
Your main issue is that the count variable has not been created and given a value initially.
I have optimized your code a bit and this is how I did it:
var count = 1;
$(document).ready(function() {
$("#section2, #section3, #section4").click(function() {
$('#myBar').css('width', ++count * 10 + "%");
});
});
I also added transition: all 1s; for animated CSS transition.
Here is your updated code in JSFiddle