i have a navbar and a sticky header which you can check it out in snippet. Now if i click on my anchors, I get scrolled down to the right position, even the header doesn't overlap the text of the div except in one strange case.
the problem is when i'm in the #Home section, after clicking on any anchors ( no matter #AboutMe or #Skills), it sends me to the right position but the header overlaps the text a little bit which is not what i want.
so when i'm in #AboutMe section and click on #Skills anchor for example, nothing strange happens and everything is alright but the problem is when you are in the #Home section and you wanna get to another sections by clicking on their anchors, it sends you a little bit lower than where it should get you.
to find out what i mean exactly, you need to click on #AboutMe anchor twice when you are in #Home section ( same as #Skills anchor) then you will find out on first attempt, it's not doing the job properly and you need to click on that specific anchor, twice to get the result you're looking for.
NOTE: ignore other styles like texts positioning or images which are not really important here and the snippet i've provided is enough to show you what my issue is.
has anybody ever faced this strange issue?
JS fiddle link: https://jsfiddle.net/f715j3qh/120/
$(document).ready(function () {
var aboveHeight = $('header').height();
$(window).scroll(function () {
if ($(window).scrollTop() > aboveHeight) {
$('nav').addClass('fixed').css('top', '0').next().css('padding-top', '70px');
} else {
$('nav').removeClass('fixed').next().css('padding-top', '0');
}
});
});
.header {
text-align: center;
}
.header-top {
font-size: 3.5rem;
height: 210px;
background: #28223f;
}
.header-top-p {
padding: 40px 0 30px;
}
.header p{
color:#a8c6de;
letter-spacing:1px;
}
#header-nav {
background-color: yellow;
color: black;
justify-content: space-between;
height: 70px;
background-image: yellow;
width: 100%;
margin: 0 auto;
align-items: center;
z-index: 10000;
}
nav .mainMenu {
list-style: none;
display: flex;
}
#header-nav ul li {
position: relative;
margin: 0 auto;
}
#header-nav ul li.active {
opacity: 1;
text-shadow: -3px 3px 7px #4d4d00;
}
nav .mainMenu li a {
font-weight: bold;
color: black;
padding: 21px;
display: inline-block;
text-decoration: none;
font-size: 2rem;
}
.anchor {
display: block;
height: 70px;
margin-top: -70px;
visibility: hidden;
}
.fixed {
position: fixed;
top: 0;
z-index: 1;
}
#Matin-Pic {
background: #28223f;
min-height: 63vh;
}
.Matin-Picture {
margin: 15px auto;
color: #b3b8cd;
width: 380px;
background: brown;
text-align: center;
border-radius: 5px;
box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.75);
}
.cover-photo {
background: lightblue;
height: 130px;
width: 100%;
border-radius: 5px 5px 0 0;
}
.non-profile {
height: 130px;
width: 100%;
}
.non-profile img {
height: 160px;
width: 175px;
margin: auto 150px;
display: flex;
}
.profile {
height: 140px;
width: 105px;
border-radius: 50%;
border: 1px solid #1f1a32;
padding: 7px;
background: #292343;
margin: -70px 0 0 203px;
}
.profile-name {
font-size: 25px;
font-weight: bold;
margin: 25px 0 0 -100px;
}
.about {
margin-top: 35px;
line-height: 25px;
font-size: 1.7rem;
}
#Matin-Pic button {
margin: 15px 10px 30px;
}
.msg-btn, .follow-btn {
border-radius: 3px;
cursor: pointer;
background: lightblue;
color: brown;
border: 1px solid lightblue;
padding: 10px 25px;
}
.follow-btn {
background: transparent;
color: lightblue;
}
#Matin-Pic i {
font-size: 20px;
padding-left: 20px;
margin-bottom: 20px;
cursor: pointer;
color: lightblue !important;
}
.section-1 {
background: #fff;
height: auto;
width: 100%;
}
.section-1 img {
margin-top: 160px;
border-radius: 10px;
width: 100%;
height: auto;
}
#AboutMe-image img:nth-child(1) {
box-shadow: -5px -5px 10px blue;
display: block;
}
#AboutMe-image img:nth-child(2) {
display: none;
box-shadow: -5px 5px 10px blue;
}
.section-1-image img {
display: none;
box-shadow: 5px 5px 10px blue;
}
.section-1 h3 {
font-style: oblique;
font-weight: bold;
font-size: 3rem;
margin: 60px auto;
color: blue;
}
.section-1 p {
color: black;
}
.section-1 p:nth-child(2) {
margin: 0 auto 15px;
font-size: 1.6rem;
}
.section-1 p:nth-child(3) {
font-size: 1.4rem;
line-height: 2.5;
}
#AboutMe {
margin-bottom: 110px;
min-height: 78vh;
}
#AboutMe-Text {
padding-right: 50px;
}
#Skills {
background: rgba(168, 198, 222, 0.2);
margin: 0 auto;
border-radius: 300px 15px;
}
.section-2 ul {
list-style: none;
text-align: center;
}
.section-2 ul li {
margin: 52px auto 0;
font-size: 1.6rem;
color: black;
}
.section-2 ul li:first-child {
margin-top: 30px;
}
.section-2 ul li:last-child {
margin-bottom: 52px;
}
.section-2 img {
margin: 32px auto;
max-width: 220px;
height: 540px;
border-radius: 7px;
}
.main-titles {
text-align: center;
font-weight: bold;
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="Home">
<div class="container-fluid">
<div class="row">
<header class="header header-top">
<div class="header-top-p col-lg-4 col-md-4 col-sm-4 hidden-xs">
<p>text</p>
</div>
<div class="header-top-p col-lg-4 col-md-4 col-sm-4 hidden-xs">
<p>text</p>
</div>
</header>
<nav id="header-nav">
<ul class="mainMenu">
<li class="Home">Home</li>
<li class="AboutMe">About Me</li>
<li class="Skills">Skills</li>
</ul>
</nav>
</div>
</div>
</section>
<!--end Home section and header-->
<!-- ***** card profile ***** -->
<div id="M-Pic" class="container-fluid">
<div class="M-Picture">
<div class="cover-photo">
<div class="non-profile">
<img src="Content/images/logo.png">
</div>
<img src="Content/images/MPic.jpg"
class="profile">
</div>
<div class="profile-name">text</div>
<p class="about">some text here<br>some text</p>
<button class="msg-btn" onclick="#">send</button>
<button onclick="#" class="follow-btn">button1
</button>
<div>
<a href="#"><i
class="fab fa-linkedin"></i></a>
<a href="#"><i
class="fab fa-instagram"></i></a>
<i class="fab fa-github"></i>
<i class="fab fa-twitter"></i>
</div>
</div>
</div>
<span class="anchor" id="AboutMe-anchor"></span>
<section id="AboutMe" style="padding-top:3rem;">
<div class="container">
<div class="row">
<div class="section-1">
<div id="AboutMe-image" class="col-md-5 col-sm-5 slide-in fade-in">
<img src="Content/images/bg2-com2.jpg" alt="an image" width="1280" height="850">
<img alt="an image" src="Content/images/bg2-com5.jpeg" width="1000" height="800">
</div>
<div id="AboutMe-Text" class="col-md-7 col-sm-7 slide-in fade-in">
<h3>some text here</h3>
<p>some text here</p>
<p>some text here<br> some text here
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostr
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostr.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor <br>
</p>
</div>
<div class="col-xs-12 section-1-image">
<!-- <img alt="an image" src="Content/images/bg2-com.jpg" width="598" height="399" class="fade-in slide-in"> -->
</div>
</div>
</div>
</div>
</section>
<!--end AboutMe-->
<!-- ***** skills ***** -->
<span class="anchor" id="Skills-anchor"></span>
<section id="Skills" style="padding-top:1rem;">
<div class="container-fluid">
<div class="row">
<div class="section-2">
<h2 class="main-titles fade-in-main-titles slide-in-main-titles">skills</h2>
<div class="col-lg-5 col-md-6 col-sm-6 col-xs-12 section-2-left">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>
</div>
<div class="col-lg-2 hidden-md hidden-sm hidden-xs">
<img src="Content/images/MySkills2.gif"
class="img-responsive center-block fade-in-skills slide-in-skills">
</div>
<div class="col-lg-5 col-md-6 col-sm-6 col-xs-12 section-2-right">
<ul>
<li>item9</li>
<li>item10</li>
<li>item11</li>
<li>item12</li>
<li>item13</li>
<li>item14</li>
<li>item15</li>
<li>item16</li>
</ul>
</div>
</div>
</div>
</div>
</section>
Related
I am trying to create an effect on a blog page in which the blog posts are displayed as cards, and whenever one scrolls vertically on the page, a card will fade into view and then fade out when the next card is displayed. Something similar to a carousel/image slider but where only one card is visible at the time. At the same time I want the background image to be fixed. A mix between parallax and carousel.
I have tried to set the cards' container to allow overflow-y so that the cards are scrollable, but I do not want the scrollbar to appear either. Honestly, I have looked everywhere for a similar example, but none are close to what I am trying to achieve.
I have found other examples where I can create a parallax effect, but the thing is I only have one background image. I am not sure if I need to use JavaScript as well to try to implement this design. The closest I have come to is ScrollOut, but I do not know how to make only one card visible at the time.
CodePen
<header>
<div class="logo">
</div>
<div class="title" id='title'>
<h1 data-scroll>One Star Thoughts</h1>
</div>
<nav>
<div class="hamburger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<ul class="nav-links">
<li>Home</li>
</ul>
</nav>
</header>
<div id='stars'></div>
<div id='stars2'></div>
<div id='stars3'></div>
<section class="section__posts">
<div class="section__posts--card">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Lorem ipsum dolor sit amet consectetur.</h1>
<p class="blog-overview">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt incidunt fugiat quos porro repellat harum. Adipisci tempora corporis rem cum.</p>
read
</div>
<div class="section__posts--card">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Lorem ipsum dolor sit amet consectetur.</h1>
<p class="blog-overview">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt incidunt fugiat quos porro repellat harum. Adipisci tempora corporis rem cum.</p>
read
</div>
<div class="section__posts--card">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Lorem ipsum dolor sit amet consectetur.</h1>
<p class="blog-overview">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt incidunt fugiat quos porro repellat harum. Adipisci tempora corporis rem cum.</p>
read
</div>
</section>
If I understand what you're going for, you could use position: sticky along with an IntersectionObserver to create fade-in/fade-out effects.
A basic implementation of a position: sticky layout could be something like this:
<div class="section__posts--card">
<!-- **** add inner wrapper **** -->
<div class="inner-el">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Lorem ipsum dolor sit amet consectetur.</h1>
<p class="blog-overview">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt incidunt fugiat quos porro repellat harum. Adipisci tempora corporis rem cum.</p>
read
</div>
</div>
.section__posts {
width: 100vw;
height: 100vh;
position: relative;
}
.section__posts--card {
height: 200vh; // how far the user should scroll before content changes
}
.inner-el {
top: 200px; // how far from the top of the viewport the content should sit
height: auto;
position: sticky;
width: 75vw;
max-width: 50rem;
margin: auto;
}
This is a pretty good 'tutorial' on how to add IntersectionObserver with position: sticky: https://developers.google.com/web/updates/2017/09/sticky-headers
Thanks to organicon's insight about IntersectionObserver I was able to come up with a solution that created the effect exactly as I wanted.
I made the background fixed and turned off overflow for the body.
I wrapped the cards in a container, and turned on the overflow-y BUT I hid the scrollbar using: scrollbar-width: none; -ms-overflow-style:none;
Wrote a script using IntersectionObserver that will track when a card comes into view. When the card appears a CSS animation is applied that fades the card in.
const callback = (entries) => {
entries.forEach(
(entry) => {
if (entry.isIntersecting) {
console.log("the element is intersecting");
entry.target.style.animation = entry.target.dataset.fade;
entry.target.style.opacity = 1;
} else {
entry.target.style.animation = "none";
entry.target.style.opacity = 0;
}
}
);
}
let observer = new IntersectionObserver(callback);
const fadeItems = document.querySelectorAll('.animate');
fadeItems.forEach(item => {
console.log("adding " + fadeItems.length + " cards to the observer");
observer.observe(item)
});
:root {
--ff-primary: 'Source Sans Pro', sans-serif;
--ff-secondary: 'Source Code Pro', monospace;
--fw-reg: 300;
--fw-bold: 900;
--clr-light: #fff;
--clr-dark: #303030;
--clr-grey: lightgrey;
--clr-accent: #16e0bd;
--clr-danger: tomato;
--fs-h1: 3rem;
--fs-h2: 2.25rem;
--fs-h3: 1.25rem;
--fs-body: 1rem;
--bs: 0.25em 0.25em 0.75em rgba(0, 0, 0, .25), 0.125em 0.125em 0.25em rgba(0, 0, 0, .15);
}
#media (min-width: 900px) {
:root {
--fs-h1: 4.5rem;
--fs-h2: 3.75rem;
--fs-h3: 1.5rem;
--fs-body: 1.125rem;
}
}
html,
body {
margin: 0;
height: 100%;
width: 100%;
}
body {
font-family: var(--ff-primary);
font-size: var(--fs-body);
line-height: 1.6;
box-sizing: border-box;
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
background-repeat: no-repeat;
overflow: hidden;
}
img {
display: block;
max-width: 100%;
}
strong {
font-weight: var(--fw-bold)
}
:focus {
outline: 3px solid var(--clr-accent);
outline-offset: 3px;
}
/* wrapper */
.wrapper {
height: 100%;
width: 100%;
}
/* header */
header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: sticky;
top: 0;
width: 100%;
}
nav {
width: 50%;
background-color: transparent;
border: 2px solid;
border-color: var(--clr-light);
border-radius: 2em;
display: flex;
z-index: 10;
}
/*Styling Links*/
.nav-links {
color: var(--clr-light);
display: flex;
list-style: none;
width: 88vw;
padding: 0 0.7vw;
justify-content: space-evenly;
align-items: center;
text-transform: uppercase;
}
.nav-links li a {
text-decoration: none;
margin: 0 0.7vw;
}
.nav-links li a:hover {
color: #61DAFB;
}
.nav-links li {
position: relative;
}
.nav-links li a::before {
content: "";
display: block;
height: 3px;
width: 0%;
background-color: #61DAFB;
position: absolute;
transition: all ease-in-out 250ms;
margin: 0 0 0 10%;
}
.nav-links li a:hover::before {
width: 80%;
}
.login-button {
color: var(--clr-light);
padding: 0.6rem 0.8rem;
margin-left: 2vw;
font-size: 1rem;
cursor: pointer;
}
.login-button:hover {
color: var(--clr-dark);
background-color: #000;
transition: all ease-in-out 350ms;
}
* site title */
.title h1 {
margin: 1em auto;
text-align: center;
color: transparent;
}
#supports(-webkit-text-stroke: 2px var(--clr-light)) {
.title h1 {
color: transparent;
-webkit-text-stroke: 2px var(--clr-light);
text-shadow: none;
}
}
/* section posts */
.posts {
width: 100vw;
height: 100vh;
position: relative;
overflow-y: scroll;
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* Internet Explorer 10+ */
}
.posts::-webkit-scrollbar {
width: 0;
height: 0;
}
.post__card {
height: 50vh;
width: 40rem;
padding: 2rem;
margin: 15rem auto;
background: var(--clr-light);
border-radius: 8px;
opacity: 0;
}
.post__card:first-child {
margin-top: 1rem;
}
.post__card:last-child {
margin-bottom: 22rem;
}
#keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.blog-image {
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 10px;
margin-bottom: 10px;
}
.blog-title {
margin-bottom: 1rem;
}
p:last-child {
margin-bottom: -6px;
}
.blog-overview {
margin: 10px 0 20px;
line-height: 30px;
}
.section__posts--card--button {
margin: 0 10px;
}
.btn.dark {
background: var(--clr-dark);
color: var(--clr-light);
}
.btn.grey {
background: var(--clr-grey);
color: var(--clr-dark);
}
.btn.danger {
background: var(--clr-danger);
color: var(--clr-dark);
}
#media (max-width: 600x) {
.posts {
padding: 2.4rem;
}
.section__posts--card {
padding: 2.4rem;
}
}
<div class="wrapper">
<div class='stars'></div>
<div class="stars2"></div>
<div class='stars3'></div>
<header>
<div class="title" id='title'>
<h1>One Star Thoughts</h1>
</div>
<nav>
<div class="hamburger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<ul class="nav-links">
<li>Home</li>
<li><a class="login-button" href="#">Login</a></li>
</ul>
</nav>
</header>
<div class="posts">
<div class="post__card animate" data-fade="fade-in 2s">
<div class="post__wrapper">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Blog title + '...'}</h1>
<p class="blog-overview">This is the blog post test stuff and stuff and stuff and stuff + '...'}</p>
read
</div>
</div>
<div class="post__card animate" data-fade="fade-in 2s">
<div class="post__wrapper">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Blog title + '...'}</h1>
<p class="blog-overview">This is the blog post test stuff and stuff and stuff and stuff + '...'}</p>
read
</div>
</div>
<div class="post__card animate" data-fade="fade-in 2s">
<div class="post__wrapper">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Blog title + '...'}</h1>
<p class="blog-overview">This is the blog post test stuff and stuff and stuff and stuff + '...'}</p>
read
</div>
</div>
<div class="post__card animate" data-fade="fade-in 2s">
<div class="post__wrapper">
<img src="https://source.unsplash.com/random/780x200" class="blog-image" alt="">
<h1 class="blog-title">Blog title + '...'}</h1>
<p class="blog-overview">This is the blog post test stuff and stuff and stuff and stuff + '...'}</p>
read
</div>
</div>
</div>
</div>
The button scrolls past the content I want to be shown.
I want the "About Us" section to be showed to the display of user (100vh), but it just scrolls past that.
Here's the code:
function smoothScroll(target, duration) {
var target = document.querySelector(target);
var targetPosition = target.getBoundingClientRect().top;
var startPosition = window.pageYOffset;
var distance = targetPosition - startPosition;
var startTime = null;
function animation(currentTime) {
if (startTime === null) startTime = currentTime;
var timeElapsed = currentTime - startTime;
var run = ease(timeElapsed, startPosition, distance, duration);
window.scrollTo(0, run);
if (timeElapsed < duration) requestAnimationFrame(animation);
}
function ease(t, b, c, d) {
t /= d / 2;
if (t < 1) return (c / 2) * t * t + b;
t--;
return (-c / 2) * (t * (t - 2) - 1) + b;
}
requestAnimationFrame(animation);
}
var btn = document.querySelector(".btn");
btn.addEventListener("click", function () {
smoothScroll(".text-slider", 600);
});
.hero {
display: flex;
width: 90%;
margin: auto;
height: 100vh;
min-height: 100vh;
align-items: center;
text-align: center;
background-image: url(/img/pexels-tranmautritam-326501.jpg);
background-size: cover;
background-attachment: fixed;
justify-content: center;
}
.introduction {
flex: 1;
height: 30%;
}
.welcometxt h1 {
font-size: 17px;
color: white;
font-weight: 100;
letter-spacing: 12px;
}
.intro-text h1 {
font-size: 44px;
font-weight: 700;
color: white;
/* background: linear-gradient(to left, rgb(184, 184, 184), #ffffff); */
/* -webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
}
.intro-text p {
font-size: 18px;
margin-top: 5px;
color: white;
}
.cta {
padding: 50px 0px 0px 0px;
}
.btn {
background-color: white;
width: 150px;
height: 50px;
cursor: pointer;
font-size: 16px;
font-weight: 400;
letter-spacing: 1px;
color: black;
border: none;
border-radius: 40px;
transition: all 0.6s ease;
box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.4);
}
.btn:hover {
background-color: black;
color: white;
box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.8);
}
.text-slider {
width: 70%;
height: 90vh;
margin: 100px auto;
position: relative;
text-align: center;
align-items: center;
}
.carousel {
height: 70vh;
overflow: hidden;
}
.slider {
height: 100%;
display: flex;
width: 400%;
transition: all 0.3s;
}
.slider p {
width: 70%;
font-size: 17px;
}
.slider section {
flex-basis: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.controls .arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.controls .arrow i {
font-size: 60px;
}
.arrow.left {
left: 10px;
}
.arrow.right {
right: 10px;
}
.nextpage-arrow i{
font-size: 60px;
cursor: pointer;
}
<section class="hero">
<div class="introduction">
<div class="welcometxt">
<h1>
WELLCOME
</h1>
</div>
<div class="intro-text">
<h1>Optimal Solution for Your Product</h1>
<p>
Ensuring optimal solution for your
Quality Management.
</p>
</div>
<div class="cta">
<button class="btn">Click for more</button>
</div>
</div>
</section>
<div class="text-slider" id="text-slider">
<h1>About Us</h1>
<div class="carousel">
<div class="slider">
<section>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam, fugiat.</p>
</section>
<section>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat, commodi?</p>
</section>
<section>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, velit.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, aperiam.</p>
</section>
</div>
<div class="controls">
<span class="arrow left">
<i class="material-icons">
keyboard_arrow_left
</i>
</span>
<span class="arrow right">
<i class="material-icons">
keyboard_arrow_right
</i>
</span>
</div>
</div>
<div class="nextpage-arrow">
<span class="text-slider-btn">
<i class="material-icons">
keyboard_arrow_down
</i>
</span>
</div>
</div>
As shown in the picture, it goes past "About Us" h1.
I want the page to stop at "About Us", and not go past it.
If you need more code, or more explanation please comment and I'll try my best!
Thank you in advance.
UPDATE (GIF):
That code that you use for smooth scroll is unnecessary. You should better use Element.scrollIntoView()
Element.scrollIntoView()
The Element interface's scrollIntoView() method scrolls the element's
parent container such that the element on which scrollIntoView() is
called is visible to the user. MDN - Element.scrollIntoView()
Use the following code should you want to scroll to About Us section when you click on Click for more button.
// 'Click for more' button
const button = document.querySelector("#more-info")
button.onclick = () => {
document.querySelector("#text-slider")
.scrollIntoView({block: "start", behavior: "smooth"})
}
const button = document.querySelector("#more-info")
button.onclick = () => {
document.querySelector("#text-slider")
.scrollIntoView({block: "start", behavior: "smooth"})
}
.hero {
display: flex;
width: 90%;
margin: auto;
height: 100vh;
min-height: 100vh;
align-items: center;
text-align: center;
background: #000;
background-image: url(/img/pexels-tranmautritam-326501.jpg);
background-size: cover;
background-attachment: fixed;
justify-content: center;
}
.introduction {
flex: 1;
height: 30%;
}
.welcometxt h1 {
font-size: 17px;
color: white;
font-weight: 100;
letter-spacing: 12px;
}
.intro-text h1 {
font-size: 44px;
font-weight: 700;
color: white;
/* background: linear-gradient(to left, rgb(184, 184, 184), #ffffff); */
/* -webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
}
.intro-text p {
font-size: 18px;
margin-top: 5px;
color: white;
}
.cta {
padding: 50px 0px 0px 0px;
}
.btn {
background-color: white;
width: 150px;
height: 50px;
cursor: pointer;
font-size: 16px;
font-weight: 400;
letter-spacing: 1px;
color: black;
border: none;
border-radius: 40px;
transition: all 0.6s ease;
box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.4);
}
.btn:hover {
background-color: black;
color: white;
box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.8);
}
.text-slider {
width: 70%;
height: 90vh;
margin: 100px auto;
position: relative;
text-align: center;
align-items: center;
}
.carousel {
height: 70vh;
overflow: hidden;
}
.slider {
height: 100%;
display: flex;
width: 400%;
transition: all 0.3s;
}
.slider p {
width: 70%;
font-size: 17px;
}
.slider section {
flex-basis: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.controls .arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.controls .arrow i {
font-size: 60px;
}
.arrow.left {
left: 10px;
}
.arrow.right {
right: 10px;
}
.nextpage-arrow i {
font-size: 60px;
cursor: pointer;
}
<section class="hero">
<div class="introduction">
<div class="welcometxt">
<h1>
WELLCOME
</h1>
</div>
<div class="intro-text">
<h1>Optimal Solution for Your Product</h1>
<p>
Ensuring optimal solution for your Quality Management.
</p>
</div>
<div class="cta">
<button class="btn" id="more-info">Click for more</button>
</div>
</div>
</section>
<div class="text-slider" id="text-slider">
<h1>About Us</h1>
<div class="carousel">
<div class="slider">
<section>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam, fugiat.</p>
</section>
<section>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat, commodi?</p>
</section>
<section>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, velit.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, aperiam.</p>
</section>
</div>
<div class="controls">
<span class="arrow left">
<i class="material-icons">
keyboard_arrow_left
</i>
</span>
<span class="arrow right">
<i class="material-icons">
keyboard_arrow_right
</i>
</span>
</div>
</div>
<div class="nextpage-arrow">
<span class="text-slider-btn">
<i class="material-icons">
keyboard_arrow_down
</i>
</span>
</div>
</div>
Recommend you to add background: #000; as fallback for background-image since sometimes image might not be loaded.
Codepen here: https://codepen.io/nickfindley/pen/dJqMQW
I'm looking to have the same behavior as is currently on the page, except without setting a height on the header. The header should fit whatever content is present, adjust according to window resizing, etc. It should also be covered up by the rest of the page when scrolling. The navbar sticks to the top when it gets there with some JavaScript.
var pn = $(".page-nav");
pns = "page-nav-scrolled";
hdr = $(".page-header").height();
$(window).scroll(function() {
if ($(this).scrollTop() > hdr) {
pn.addClass(pns);
} else {
pn.removeClass(pns);
}
});
$(window).on("scroll load", function() {
pn.toggleClass(pns, $(this).scrollTop() > hdr);
});
body {
margin: 0;
padding-top: 10em;
}
.page-header {
background-color: yellow;
text-align: center;
padding: 2em 0;
position: fixed;
top: 0;
width: 100%;
height: 20em;
z-index: -100;
}
.page-nav {
background-color: black;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
width: 100%;
height: 4em;
position: relative;
margin-bottom: -4em;
z-index: 10000000;
}
.page-nav .nav-wrapper .nav-brand {
float: left;
padding: .584em 0;
font-size: 1.5em;
}
.page-nav .nav-wrapper .nav-brand a {
color: yellow;
}
.page-nav .nav-wrapper .nav-menu {
margin: 0;
float: right;
}
.page-nav .nav-wrapper .nav-menu .nav-item {
display: inline-block;
height: 4em;
line-height: 1em;
padding: 1.5em 0;
margin-left: 2em;
}
.page-nav .nav-wrapper .nav-menu .nav-item .nav-link {
color: yellow;
}
.page-nav-scrolled {
position: fixed;
width: 100%;
top: 0;
}
.page-main {
position: relative;
padding-top: 6em;
background-color: red;
}
.nav-wrapper, .page-content {
margin: 0 2em;
}
.header-content {
margin: 0 6em;
}
/* https://teamtreehouse.com/community/forum-tip-create-a-sticky-navigation-with-css-and-jquery-2 */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="page-header" role="banner">
<section class="header-content">
<h1>Fixed Header</h1>
<p>Praesent non hendrerit sapien.
<p>Praesent non hendrerit sapien. Vivamus sit amet pellentesque nisl. Maecenas hendrerit elit ut mi porta, sagittis accumsan felis mollis. Fusce ut tincidunt lectus...</p>
</section>
</header>
<nav class="page-nav" role="navigation">
<div class="nav-wrapper">
<div class="nav-brand">
Brand
</div>
<ul class="nav-menu">
<li class="nav-item nav-active">
<a class="nav-link" href="">News</a>
</li>
...
</ul>
</div>
</nav>
<main class="page-main">
<section class="page-content">
<article class="entry">
<header class="entry-header">
<h2>Quisque a dolor vel leo porttitor luctus</h2>
</header>
<section class="entry-content">
<p class="type">Lorem ipsum dolor sit amet...</p>
</section>
</article>
</section>
</main>
Would love a pure CSS solution but I'm plenty open to JS solutions.
Please check the codepen here. What I did was
Removed the body padding
Removed the position fixed and added relative
Removed the fixed height
I believe this is what you wanted.
https://codepen.io/anon/pen/vpvmxo
Just posting the changed css sections.
body {
margin: 0;
//padding-top: 10em;
}
.page-header {
background-color: yellow;
text-align: center;
padding: 2em 0;
position: relative;
top: 0;
width: 100%;
//height: 20em; // not really necessary, visible portion of header is determined by body padding-top
z-index: -100;
}
I'm creating a timeline and for this I need a dashed border for certain event times. But I can't combine the two styles together.
To put it simply, I need a solid border for most of the timeline events except a few, which have a common class, where I need a dotted border. I have the following code till now.
I need the border between the Break event till Event 4 to be dotted instead of solid. Any CSS/JS based solution would do.
.timeline {
border-left: 4px solid #a5a5a5;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
background: rgba(255, 255, 255, 0.03);
color: rgba(0, 0, 0, 0.8);
font-family: "Source Sans Pro", sans-serif;
margin: 0 auto 50px auto;
letter-spacing: 0.5px;
position: relative;
line-height: 1.4em;
font-size: 1.03em;
padding: 30px;
list-style: none;
text-align: left;
font-weight: 100;
max-width: 30%;
}
.timeline .event:before,
.timeline .event:after {
position: absolute;
display: block;
top: 0;
}
.timeline .event:before {
left: -170px;
color: rgba(0, 0, 0, 1);
content: attr(data-date);
text-align: right;
font-weight: 100;
font-size: 0.9em;
min-width: 120px;
}
.timeline .event:after {
box-shadow: 0 0 0 4px #a5a5a5;
left: -37.85px;
background: #313534;
border-radius: 50%;
height: 11px;
width: 11px;
content: "";
top: 5px;
}
.timeline .event {
border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
padding-bottom: 25px;
position: relative;
}
<ul class="timeline ">
<li class="event" data-date="09:30 - 10:00 ">
<div onclick="document.getElementById('id01').style.display='block'">
<h3 class="event-title">Event 1</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</li>
<li class="event" data-date="10:00 - 10:30 ">
<div onclick="document.getElementById('id01').style.display='block'">
<h3 class="event-title">Event 2</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</li>
<li class="event break" data-date="10:30 - 11:00 ">
<div onclick="document.getElementById('id01').style.display='block'">
<h3 class="event-title">Break</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</li>
<li class="event" data-date="11:00 - 11:30 ">
<div onclick="document.getElementById('id01').style.display='block'">
<h3 class="event-title">Event 4</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</li>
You should change your approach
Try this:
.timeline {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
background: rgba(255, 255, 255, 0.03);
color: rgba(0, 0, 0, 0.8);
font-family: "Source Sans Pro", sans-serif;
margin: 0 auto 50px auto;
letter-spacing: 0.5px;
position: relative;
line-height: 1.4em;
font-size: 1.03em;
padding: 30px;
list-style: none;
text-align: left;
font-weight: 100;
max-width: 30%;
}
.timeline .event:before,
.timeline .event:after {
position: absolute;
display: block;
top: 0;
}
.timeline .event:before {
left: -160px;
color: rgba(0, 0, 0, 1);
content: attr(data-date);
text-align: right;
font-weight: 100;
font-size: 0.9em;
min-width: 120px;
}
.timeline .event:after {
box-shadow: 0 0 0 4px #a5a5a5;
left: -8px;
background: #313534;
border-radius: 50%;
height: 11px;
width: 11px;
content: "";
top: 5px;
}
.timeline .event h3 {
margin-top: 0px;
}
.timeline .event {
border-left: 4px solid #a5a5a5;
border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
padding-bottom: 0px;
padding-left: 40px;
position: relative;
}
.timeline .break {
border-left: 4px dotted #a5a5a5;
}
<ul class="timeline ">
<li class="event" data-date="09:30 - 10:00 ">
<div onclick="document.getElementById('id01').style.display='block'">
<h3 class="event-title">Event 1</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</li>
<li class="event" data-date="10:00 - 10:30 ">
<div onclick="document.getElementById('id01').style.display='block'">
<h3 class="event-title">Event 2</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</li>
<li class="event break" data-date="10:30 - 11:00 ">
<div onclick="document.getElementById('id01').style.display='block'">
<h3 class="event-title">Break</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</li>
<li class="event" data-date="11:00 - 11:30 ">
<div onclick="document.getElementById('id01').style.display='block'">
<h3 class="event-title">Event 4</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</li>
I have created a custom jquery accordion and I am stuck with the code, when I click on accordion title, its opening both of the accordion where it should open the one where I have clicked, following are the codes:
$(document).ready(function() {
$(".acc-wrap > .acc-head").on("click", function() {
if ($(this).hasClass('active')) {
$(this).removeClass("active");
$(this).siblings('.acc-body').slideUp(200);
$(".acc-wrap > .acc-head").attr('class', 'acc-head opened');
} else {
$(".acc-wrap > .acc-head").attr('class', 'acc-head closed');
$(this).addClass("active");
$('.acc-body').slideUp(200);
$(this).siblings('.acc-body').slideDown(200);
}
});
});
.projects-list {
max-width: 600px;
margin: 0 auto;
background: #E0E0E0;
padding: 15px 0;
font-family: Roboto;
}
body {
margin: 0;
padding: 0;
}
.acc-wrap {
position: relative;
width: 100%;
}
.acc-wrap > .acc-head {
float: left;
width: 100%;
display: block;
background-color: #264796;
padding: 10px;
color: #fff;
font-weight: 600;
border-bottom: 1px solid #ddd;
transition: all 0.2s linear;
position: relative;
}
.acc-wrap > .acc-head.opened {
position: relative;
}
.acc-wrap > .acc-head.opened:after {
content: "\f055";
font-family: fontAwesome;
position: absolute;
right: 15px;
}
.acc-wrap > .acc-head.closed {
position: relative;
}
.acc-wrap > .acc-head.closed:after {
content: "\f056";
font-family: fontAwesome;
position: absolute;
right: 15px;
}
.acc-body {
position: relative;
width: 100%;
float: left;
background-color: #fff;
padding: 10px;
border-bottom: 1px solid #ddd;
display: none;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<div class="projects-list">
<div class="acc-wrap">
<div class="acc-head opened"> Vestibulum </div>
<div class="acc-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. </div>
<div class="acc-head"> Vestibulum 2</div>
<div class="acc-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. </div>
</div>
</div>
I think you should use the next-function instead of the siblings-function:
https://api.jquery.com/next/
<style>
.projects-list {
max-width: 600px;
margin: 0 auto;
background: #E0E0E0;
padding: 15px 0;
font-family: Roboto;
}
body {
margin: 0;
padding: 0;
}
.acc-wrap {
position: relative;
width: 100%;
}
.acc-wrap > .acc-head {
float: left;
width: 100%;
display: block;
background-color: #264796;
padding: 10px;
color: #fff;
font-weight: 600;
border-bottom: 1px solid #ddd;
transition: all 0.2s linear;
position: relative;
}
.acc-wrap > .acc-head.opened {
position: relative;
}
.acc-wrap > .acc-head.opened:after {
content: "\f055";
font-family: fontAwesome;
position: absolute;
right: 15px;
}
.acc-wrap > .acc-head.closed {
position: relative;
}
.acc-wrap > .acc-head.closed:after {
content: "\f056";
font-family: fontAwesome;
position: absolute;
right: 15px;
}
.acc-body {
position: relative;
width: 100%;
float: left;
background-color: #fff;
padding: 10px;
border-bottom: 1px solid #ddd;
display: none;
box-sizing: border-box;
}
</style>
`
You can try something like this:
$(this)
// Add/ Remove active and opened as both will always be together.
.toggleClass('active opened')
// Add closed if active not present else remove it
.toggleClass('closed', !$this.hasClass('active'))
// Go to next element
.next()
// Toggle slide on every click
.slideToggle(200)
Also note that $(".acc-wrap > .acc-head"); is pointing to all accordion headers. You should always try to use this and navigate to necessary div.
Sample
$(document).ready(function() {
$(".acc-wrap > .acc-head").on("click", function() {
var $this = $(this)
$this
.toggleClass('active opened')
.toggleClass('closed', !$this.hasClass('active'))
.next()
.slideToggle(200)
});
});
.projects-list {
max-width: 600px;
margin: 0 auto;
background: #E0E0E0;
padding: 15px 0;
font-family: Roboto;
}
body {
margin: 0;
padding: 0;
}
.acc-wrap {
position: relative;
width: 100%;
}
.acc-wrap > .acc-head {
float: left;
width: 100%;
display: block;
background-color: #264796;
padding: 10px;
color: #fff;
font-weight: 600;
border-bottom: 1px solid #ddd;
transition: all 0.2s linear;
position: relative;
}
.acc-wrap > .acc-head.opened {
position: relative;
}
.acc-wrap > .acc-head.opened:after {
content: "\f055";
font-family: fontAwesome;
position: absolute;
right: 15px;
}
.acc-wrap > .acc-head.closed {
position: relative;
}
.acc-wrap > .acc-head.closed:after {
content: "\f056";
font-family: fontAwesome;
position: absolute;
right: 15px;
}
.acc-body {
position: relative;
width: 100%;
float: left;
background-color: #fff;
padding: 10px;
border-bottom: 1px solid #ddd;
display: none;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<div class="projects-list">
<div class="acc-wrap">
<div class="acc-head">Vestibulum</div>
<div class="acc-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</div>
<div class="acc-head">Vestibulum 2</div>
<div class="acc-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</div>
</div>
</div>
Add This it is much easy and fast than yours http://www.w3schools.com/Bootstrap/tryit.asp?filename=trybs_collapsible_accordion&stacked=h
Instead of using referencing the elements by class you want to use "this".find("element").attr() etc etc. You are targeting all elements matching the class .acc-head when using this $(".acc-wrap > .acc-head");
Alternatively you could reference the targeted element using $(".acc-wrap > .acc-head.active");
$(".acc-wrap > .acc-head:not(.opened)");
<div style="max-width: 300px;">
<div class="panel panel-default">
<div class="panel-heading" style="background-color:#264796;color:#ffffff">
<h4 class="panel-title" id="ab">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse6dec" >Vestibulum
<span id="plus"><i class="fa fa-plus-circle" aria-hidden="true"></i></span> <span id="minus" style="display:none"><i class="fa fa-minus-circle" aria-hidden="true"></i></span> </a>
</h4>
</div>
<div id="collapse6dec" class="panel-collapse collapse">
<div class="panel-body" style="">
<div class="row">
<p class="panel-title" style="font-size: 18px;"> <a data-toggle="collapse" data-parent="#accordion" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. </a></p>
</div>
</div>
</div>
</div>
<div class="panel panel-default" style="margin-top:-20px">
<div class="panel-heading" style="background-color:#264796;color:#ffffff">
<h4 class="panel-title" id="ab1">
<a data-toggle="collapse" data-parent="#accordion" href="#lorem2" >Vestibulum 2 <span id="plus1"><i class="fa fa-plus-circle" aria-hidden="true"></i></span> <span id="minus1" style="display:none"><i class="fa fa-minus-circle" aria-hidden="true"></i></span></a>
</h4>
</div>
<div id="lorem2" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<p class="panel-title" style="font-size: 18px;"> <a data-toggle="collapse" data-parent="#accordion" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. </a></p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var counter = -1;
$("#ab").click(function(){
counter++;
if (counter % 2 === 0) {
$("#plus").css('display','none');
$("#minus").css('display','inline');
}
else{
$("#plus").css('display','inline');
$("#minus").css('display','none');
}
});
$("#ab1").click(function(){
counter++;
if (counter % 2 === 0) {
$("#plus1").css('display','none');
$("#minus1").css('display','inline');
}
else{
$("#plus1").css('display','inline');
$("#minus1").css('display','none');
}
});
</script>