Make sidebar sticky at a specific point of page - javascript

I have a sidebar with links that are changing when I'm scrolling a long content. The problem is that the change is happening too early when the chapter title is barely at the bottom of the page.
How can I write if(fromTop >= 100) differently, to get sticky when it reaches the row startContent?
Thanks for any suggestions!
// Sticky sidebar scroll
let stickyLinks = document.getElementById("scrollspy");
let mobNavStick = document.getElementById("navTop");
let mainNavLinks = document.querySelectorAll("#scrollspy ul li a");
let footer = document.querySelector('footer');
window.addEventListener("scroll", event => {
let fromTop = window.scrollY;
//start from a spe
if(fromTop >= 100){
stickyLinks.classList.add("sticky");
}
else {
stickyLinks.classList.remove("sticky");
}
// add link gray background
mainNavLinks.forEach(link => {
let section = document.querySelector(link.hash);
if (section.offsetTop <= fromTop && section.offsetTop + section.offsetHeight > fromTop) {
link.classList.add("current");
} else {
link.classList.remove("current");
}
});
});
h2 {
font-size: 18px;
}
p {
font-size: 12px;
}
container {
width: 75%;
}
.footer {
background-color: #eee;
text-align: center;
height: 150px;
}
#scrollspy ul {
list-style-type: none;
padding: 0;
border: 1px solid #eee;
border-radius: 0.25rem;
}
#scrollspy ul li a {
text-decoration: none;
padding: 0.5rem 1rem;
display: block;
}
#scrollspy ul li:first-child {
color: #444;
font-size: 0.9rem;
font-weight: bold;
padding: 1rem;
}
#scrollspy ul li a.current {
background: #eee;
}
.sticky {
position: fixed;
top: 10%;
width: 16%;
background-color: white;
z-index: 1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container">
<!--some header on top-->
<div class="row startContent">
<div class="col-sm-3">
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
</div>
<div class="col-sm-9">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat. Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div>
</div>
<!-- content and sidebar -->
<div class="row">
<div class="col-sm-3">
<div id="scrollspy">
<ul>
<li>Contents</li>
<li>Link 1<li>
<li>Link 2<li>
<li>Link 3<li>
<li>Link 4<li>
<li>Link 5<li>
</ul>
</div>
</div>
<div class="col-sm-9">
<div id="chapter1">
<h2>Title of Chapter 1<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat. Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div> <!--End of chapter 0-->
<div id="chapter2">
<h2>Title of Chapter 2<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat. Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div> <!--End of chapter 0-->
<div id="chapter3">
<h2>Title of Chapter 3<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat. Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div> <!--End of chapter 0-->
<div id="chapter4">
<h2>Title of Chapter 4<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat. Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div> <!--End of chapter 0-->
<div id="chapter5">
<h2>Title of Chapter 5<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat. Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div> <!--End of chapter 0-->
</div>
</div>
</div>
<div class="col-sm-12 footer">
<h2>Footer</h2>
</div>

I added an identifier to the container of the chapters, so the sidebar gets sticky only when the top of such container reaches the top of the window. Is this what you intended?
// Sticky sidebar scroll
let stickyLinks = document.getElementById("scrollspy");
let mobNavStick = document.getElementById("navTop");
let mainContent = document.getElementById('mainContent');
let mainNavLinks = document.querySelectorAll("#scrollspy ul li a");
let footer = document.querySelector('footer');
window.addEventListener("scroll", event => {
let fromTop = window.scrollY;
//start from a spe
if(fromTop > mainContent.offsetTop){
stickyLinks.classList.add("sticky");
}
else {
stickyLinks.classList.remove("sticky");
}
// add link gray background
mainNavLinks.forEach(link => {
let section = document.querySelector(link.hash);
if (section.offsetTop <= fromTop && section.offsetTop + section.offsetHeight > fromTop) {
link.classList.add("current");
} else {
link.classList.remove("current");
}
});
});
h2 {
font-size: 18px;
}
p {
font-size: 12px;
}
container {
width: 75%;
}
.footer {
background-color: #eee;
text-align: center;
height: 150px;
}
#scrollspy ul {
list-style-type: none;
padding: 0;
border: 1px solid #eee;
border-radius: 0.25rem;
}
#scrollspy ul li a {
text-decoration: none;
padding: 0.5rem 1rem;
display: block;
}
#scrollspy ul li:first-child {
color: #444;
font-size: 0.9rem;
font-weight: bold;
padding: 1rem;
}
#scrollspy ul li a.current {
background: #eee;
}
.sticky {
position: fixed;
top: 10%;
width: 16%;
background-color: white;
z-index: 1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container">
<!--some header on top-->
<div class="row startContent">
<div class="col-sm-3">
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
</div>
<div class="col-sm-9">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat. Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div>
</div>
<!-- content and sidebar -->
<div class="row">
<div class="col-sm-3">
<div id="scrollspy">
<ul>
<li>Contents</li>
<li>Link 1<li>
<li>Link 2<li>
<li>Link 3<li>
<li>Link 4<li>
<li>Link 5<li>
</ul>
</div>
</div>
<div id="mainContent" class="col-sm-9">
<div id="chapter1">
<h2>Title of Chapter 1<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat. Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div> <!--End of chapter 0-->
<div id="chapter2">
<h2>Title of Chapter 2<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat. Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div> <!--End of chapter 0-->
<div id="chapter3">
<h2>Title of Chapter 3<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat. Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div> <!--End of chapter 0-->
<div id="chapter4">
<h2>Title of Chapter 4<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat. Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div> <!--End of chapter 0-->
<div id="chapter5">
<h2>Title of Chapter 5<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat. Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div> <!--End of chapter 0-->
</div>
</div>
</div>
<div class="col-sm-12 footer">
<h2>Footer</h2>
</div>

You can to do it without js only with pure css position sticky property:
h2 {
font-size: 18px;
}
p {
font-size: 12px;
}
container {
width: 75%;
}
.footer {
background-color: #eee;
text-align: center;
height: 150px;
}
#scrollspy ul {
list-style-type: none;
padding: 0;
border: 1px solid #eee;
border-radius: 0.25rem;
}
#scrollspy ul li a {
text-decoration: none;
padding: 0.5rem 1rem;
display: block;
}
#scrollspy ul li:first-child {
color: #444;
font-size: 0.9rem;
font-weight: bold;
padding: 1rem;
}
#scrollspy ul li a.current {
background: #eee;
}
.sticky {
position: fixed;
top: 10%;
width: 16%;
background-color: white;
z-index: 1;
}
#sticky-nav {
margin-bottom: -250px;
position: sticky;
top: 0px;
z-index: 1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container">
<!--some header on top-->
<div class="row startContent">
<div class="col-sm-3">
<h4 style="height: 200px">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
</div>
<div class="col-sm-9">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat. Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div>
</div>
<div class="row" id="sticky-nav">
<div class="col-sm-3">
<div id="scrollspy">
<ul>
<li>Contents</li>
<li>Link 1<li>
<li>Link 2<li>
<li>Link 3<li>
<li>Link 4<li>
<li>Link 5<li>
</ul>
</div>
</div>
</div>
<!-- content and sidebar -->
<div class="row offset-3">
<div class="col-sm-9">
<div id="chapter1">
<h2>Title of Chapter 1<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat. Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div> <!--End of chapter 0-->
<div id="chapter2">
<h2>Title of Chapter 2<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat. Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div> <!--End of chapter 0-->
<div id="chapter3">
<h2>Title of Chapter 3<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat. Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div> <!--End of chapter 0-->
<div id="chapter4">
<h2>Title of Chapter 4<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat. Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div> <!--End of chapter 0-->
<div id="chapter5">
<h2>Title of Chapter 5<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat. Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div> <!--End of chapter 0-->
</div>
</div>
</div>
<div class="col-sm-12 footer">
<h2>Footer</h2>
</div>

Related

Floating element relative to another element with static start position

It's hard to explain using words, better look at example i made.
https://jsfiddle.net/yoz6pkh0/
<nav>
<div class="container">
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
<div class="filter">FILTER</div>
</div>
</nav>
<div class="hero">
<h1>Hello to Lorem!</h1>
<p>Lorem ipsum dolor sit amet</p>
<div class="filter inhero">FILTER</div>
</div>
<div class="main">
<p>Lorem ipsum ...</p>
...
<p>Lorem ipsum ...</p>
</div>
I have the navbar that i hide on scrolling page down and show on scrolling up.
I need to make an element (lets call it FILTER) that on page load is located in hero-section but become sticky to navbar when scrolling to FILTER position or below and vice versa when scrolling up.
I solved the problem in my way but i wonder if any better solution exists? Is it necessary to clone FILTER element?
I think there is a better solution than cloning the element, you can use this code:
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">
<title>Document</title>
</head>
<body>
<nav>
<div class="container">
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
</div>
</nav>
<div class="hero">
<h1>Hello to Lorem!</h1>
<p>Lorem ipsum dolor sit amet</p>
<div class="filter inhero">FILTER</div>
</div>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in enim bibendum neque volutpat maximus. Sed sit amet ante sit amet quam eleifend scelerisque. Aenean mollis, nisi in molestie volutpat, ligula diam laoreet nibh, nec dignissim tortor lectus vitae risus. Aenean mi nisi, fringilla at lacinia at, tincidunt in est. Cras ex enim, sagittis pharetra augue sit amet, dictum accumsan mauris. Duis ultrices magna in pulvinar consequat. Curabitur suscipit hendrerit diam, fringilla interdum purus ullamcorper ac. Pellentesque vestibulum molestie lectus, id lobortis justo ullamcorper sit amet. Mauris nec lorem purus. In aliquet fringilla tempor. Fusce sollicitudin tempor eleifend. Vestibulum nec varius nulla. Nullam quis metus vel ipsum bibendum cursus vel sed quam. In porttitor interdum augue a varius. Maecenas ac enim at mauris blandit egestas at fringilla odio. </p>
</div>
</body>
</html>
CSS:
body {
margin: 0;
}
.container {
margin: 0px 200px;
position: relative;
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
nav {
background-color: blue;
color: white;
margin: 0;
position: fixed;
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
top: 0px;
transition: top 0.5s;
}
.filter {
background-color: red;
color: white;
padding: 10px;
}
ul {
list-style-type: none;
display: flex;
margin: 0;
padding: 0;
}
li {
padding: 15px;
}
.main {
padding: 50px 200px;
}
.hero {
padding: 150px 200px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: bisque;
height: 250px;
}
JS:
let filter = document.getElementsByClassName("filter")[0];
let fixed = false;
let filterTop = filter.getBoundingClientRect().top + window.scrollY;
window.addEventListener("scroll", function() {
if (filter.getBoundingClientRect().top <= 50 && !fixed) {
filter.style.position = 'fixed';
filter.style.top = '50px';
fixed = true;
} else if (window.scrollY <= filterTop - 50 && fixed) {
filter.style.position = 'static';
filter.style.top = '';
fixed = false;
}
});
What I've done here is removing the clone (and the styles related to it ) and making the position of the filter fixed or static according to the scroll.

Scrollbar not scrolling completely down the page while using locomotive scroll

I will try ti keep it as simple as possible! This is my first time using locomotive scroll while I am testing my code out I am not able to scroll all the way below. The scroll bar is visible but but I am not able to scroll or drag it using the mouse. I seriously spend hours to find any solution for this issue here but had no success yet. It will be great if someone can help me out to solve this issue here. Thank you for your time
const scroller = new LocomotiveScroll({
el: document.querySelector("[data-scroll-container]"),
smooth: true,
multiplier:.70
});
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 100px;
}
#about-section{
height: 400vh;
}
.font{
position: relative;
padding: 30px;
font-size: 70px; ;
}
.text{
position: absolute;
border: 3px solid white;
height: fit-content;
width: 50%;
right: 0;
margin-top: -100px;
}
.mb-8{
margin-bottom: 5em;
}
p{
font-size: 50px;
}
.container{
padding: 50px;
}
<!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" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/locomotive-scroll#3.5.4/dist/locomotive-scroll.css"
/>
<link rel="stylesheet" href="/main.css" />
<title>Document</title>
</head>
<body>
<div data-scroll-container>
<section class="sec1" data-scroll-section>
<h1>Section 1</h1>
</section>
<section id="about-section" data-scroll-section>
<div class="container">
<div id="about">
<h2
class="font"
data-scroll
data-scroll-sticky
data-scroll-target="#about-section"
>
About
</h2>
<div class="container text">
<p class="mb-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
pretium, ante sed lacinia ultricies, sapien massa ultricies
erat, eu tristique justo est ut tortor. In nibh est, porttitor
vulputate erat et, faucibus volutpat felis. Curabitur eleifend
nisi quis consectetur euismod. Morbi ac condimentum ante.
Aliquam euismod sodales arcu et iaculis. Cras porttitor nisl
felis, eget interdum magna cursus et. Curabitur vehicula
dignissim ornare.
</p>
<p class="mb-8">
Cras lacinia sit amet justo ut maximus. Integer sapien felis,
gravida a commodo et, porttitor non libero. Maecenas lacinia
accumsan eros eu dapibus. Mauris dolor odio, vulputate vitae
purus vitae, tincidunt egestas orci. Maecenas sollicitudin
fringilla justo, id tempus metus elementum sit amet. Nullam
vestibulum mauris vitae condimentum sagittis. Suspendisse sed
purus vel neque ullamcorper ornare egestas vel ligula. Duis ac
mattis odio. Aliquam sodales turpis nec diam maximus, nec
fermentum massa mollis.
</p>
<p>
Praesent finibus egestas velit, vitae tristique leo luctus sit
amet. Vivamus eu facilisis neque, a venenatis mi. Vestibulum
ultricies venenatis arcu sit amet fringilla. Curabitur non
tincidunt sem. Sed quis quam ut nulla tincidunt dapibus quis ac
lorem. Nulla lobortis ac metus ut molestie.
</p>
</div>
</div>
</div>
</section>
<section id="client" data-scroll-section>
<div class="container">
<div id="client-section">
<h2 class="font" data-scroll data-scroll-sticky data-scroll-target="#client">
Client
</h2>
<div class="container text">
<p class="mb-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
pretium, ante sed lacinia ultricies, sapien massa ultricies
erat, eu tristique justo est ut tortor. In nibh est, porttitor
vulputate erat et, faucibus volutpat felis. Curabitur eleifend
nisi quis consectetur euismod. Morbi ac condimentum ante.
Aliquam euismod sodales arcu et iaculis. Cras porttitor nisl
felis, eget interdum magna cursus et. Curabitur vehicula
dignissim ornare.
</p>
<p class="mb-8">
Cras lacinia sit amet justo ut maximus. Integer sapien felis,
gravida a commodo et, porttitor non libero. Maecenas lacinia
accumsan eros eu dapibus. Mauris dolor odio, vulputate vitae
purus vitae, tincidunt egestas orci. Maecenas sollicitudin
fringilla justo, id tempus metus elementum sit amet. Nullam
vestibulum mauris vitae condimentum sagittis. Suspendisse sed
purus vel neque ullamcorper ornare egestas vel ligula. Duis ac
mattis odio. Aliquam sodales turpis nec diam maximus, nec
fermentum massa mollis.
</p>
<p>
Praesent finibus egestas velit, vitae tristique leo luctus sit
amet. Vivamus eu facilisis neque, a venenatis mi. Vestibulum
ultricies venenatis arcu sit amet fringilla. Curabitur non
tincidunt sem. Sed quis quam ut nulla tincidunt dapibus quis ac
lorem. Nulla lobortis ac metus ut molestie.
</p>
</div>
</div>
</div>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll#3.5.4/dist/locomotive-scroll.min.js"></script>
<script src="loco.js"></script>
</body>
</html>
I found the solution for this problem it was actually the position property in CSS as you see here I added a class called text
<div class="container text">
<p class="mb-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
pretium, ante sed lacinia ultricies, sapien massa ultricies
erat, eu tristique justo est ut tortor. In nibh est, porttitor
vulputate erat et, faucibus volutpat felis. Curabitur eleifend
nisi quis consectetur euismod. Morbi ac condimentum ante.
Aliquam euismod sodales arcu et iaculis. Cras porttitor nisl
felis, eget interdum magna cursus et. Curabitur vehicula
dignissim ornare.
</p>
<p class="mb-8">
Cras lacinia sit amet justo ut maximus. Integer sapien felis,
gravida a commodo et, porttitor non libero. Maecenas lacinia
accumsan eros eu dapibus. Mauris dolor odio, vulputate vitae
purus vitae, tincidunt egestas orci. Maecenas sollicitudin
fringilla justo, id tempus metus elementum sit amet. Nullam
vestibulum mauris vitae condimentum sagittis. Suspendisse sed
purus vel neque ullamcorper ornare egestas vel ligula. Duis ac
mattis odio. Aliquam sodales turpis nec diam maximus, nec
fermentum massa mollis.
</p>
<p>
Praesent finibus egestas velit, vitae tristique leo luctus sit
amet. Vivamus eu facilisis neque, a venenatis mi. Vestibulum
ultricies venenatis arcu sit amet fringilla. Curabitur non
tincidunt sem. Sed quis quam ut nulla tincidunt dapibus quis ac
lorem. Nulla lobortis ac metus ut molestie.
</p>
</div>
and the style of the class text is something like this
.text{
position: absolute;
border: 3px solid white;
height: fit-content;
width: 50%;
right: 0;
margin-top: -100px;}
so as soon as I removed position: absolute; from the code my error was resolved. And I removed position: relative; from the class .font as well and then I got the output as I expected. Hope this will help in future.

How to make the fixed side bar like reddit website?

I have already tried with fixed and sticky position.Let's say we have two columns in our website, main column and sidebar.And our side column has contents longer than the height of the view port( like in reddit website as it contains footer and some ads).With fixed position , side bar doesn't scroll on page scroll.With sticky position , the side bar is initially sticky and scrolls only when the main column is ending. In reddit side bar , the right side bar scrolls along with page scroll. When the sidebar reaches the end of its content , it becomes sticky to the view port. How can i achieve that?
Here is the code for css
.sidenav { position: sticky; top: 20px; right: 0; left: 0; float: left; padding:10px; z-index:999998; }
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block; }
.main {
margin-left: 140px;
font-size: 28px;
padding: 0px 10px; }
code for html
<div class="sidenav">
About
Services
Clients
Contact
About
</div>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.
<p>
</div>
You can store a specific scroll position value ( number of pixels) on the page at which you'd like to switch from the static scroll bar positioning over to fixing it to the bottom of the page. I used the start of the sidebar + the height of the sidebar - the window height + the padding I want below the sidebar. Then you just check the scroll position of the window when the document is scrolled and if it is past the value you stored, you add a class that switches its position to fixed. This snippet uses jQuery to accomplish the behavior in just a few lines.
const sidebar = $('.sidebar');
const fixedScrollPosition = sidebar.offset().top + sidebar.outerHeight() - $(window).innerHeight() + 10;
$(document).on('scroll', function() {
sidebar.toggleClass('fixed', $(window).scrollTop() > fixedScrollPosition);
});
body {
font-size: 0;
padding: 0;
}
p {
height: 200px;
background: red;
}
p:last-child {
margin: 0;
}
.page-content {
width: calc( 100% - 160px);
margin-right: 10px;
font-size: initial;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
}
.sidebar {
width: 150px;
font-size: initial;
box-sizing: border-box;
vertical-align: top;
display: inline-block;
}
.sidebar.fixed {
position: fixed;
bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-content">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<div class="sidebar">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
Edited:
HTML:
<div class="sidenav">
About
Services
Clients
Contact
<div class="sticky-tag">
sticky
sticky
</div>
</div>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh.
<br>Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh.
<br>Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh.
<br>Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh.
<br>Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh.
<br>Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh.
<br>Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh.
<br>Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh.
<br>Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.
<p>
</div>
CSS:
.sidenav {
margin-top: 20px;
float: left;
padding: 10px;
z-index: 999998;
width: 12%;
height: 100vh;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}
.sidenav .sticky-tag {
position: sticky;
top: 20px;
}
.main {
width: 88%;
margin-left: 12%;
font-size: 28px;
padding: 0px 15px;
}

Why is my hamburger menu toggling twice instead of only once after two screen resizes?

I have a great little hamburger navigation menu almost working, but there is some weird behavior that happens only after I resize the window twice. The hamburger button does what it should if I load the page when the window is narrow (width < 800px), or if I load when wide (width >800px) and resize to narrow.
The problem occurs if:
I load when narrow (width < 800px),
then toggle the navigation menu,
then resize to wide (width > 800px),
then resize to narrow (width < 800px).
When I go through these steps, the hamburger button toggles the menu open (as it should), but then it also immediately toggles it close, which I do not want it to do.
I am pretty sure I am doing something wrong with the event listener and I believe my javascript is to blame. If you can help me fix it so that the hamburger button always toggles the menu open, I would appreciate it!
here is the codepen:http://codepen.io/ihatecoding/pen/OXmRAd
or if you prefer you can run the snippet.
// media query event handler
if (matchMedia) {
var mq = window.matchMedia("(max-width: 800px)");
mq.addListener( function() {
WidthChange(mq);
});
WidthChange(mq);
};
// media query change /
function WidthChange(mq) {
if (mq.matches) {
$( "#hamburgerDiv" ).show();
$( ".hamburger" ).show();
$( ".cross" ).hide();
$(".nav" ).slideToggle("slow",function() {
// Animation complete.
});
hamburger();
}
else {
$( ".nav" ).show();
$( "#hamburgerDiv" ).hide();
};
};
function hamburger(){
$( ".hamburger" ).click(function() {
$( ".nav" ).slideToggle( "slow", function() {
$( ".hamburger" ).hide();
$( ".cross" ).show();
});
});
$( ".cross" ).click(function() {
$( ".nav" ).slideToggle( "slow", function() {
$( ".cross" ).hide();
$( ".hamburger" ).show();
});
});
};
html,
body {
margin: 0;
height: 100%
}
#header {
position: fixed;
top: 0;
margin-bottom: -100px;
left: 0;
z-index: 999;
padding-left: .5%;
padding-right: .5%;
background-color: #909090!important;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
#areaTitle {
text-transform: uppercase;
box-sizing: border-box;
text-transform: uppercase;
text-decoration: none;
color: White;
vertical-align: middle;
flex: 0 1 15%;
padding: 0 !important;
margin: 0!important;
}
#areaTitle a {
text-transform: uppercase;
font-size: 30px;
text-decoration: none;
color: White;
vertical-align: middle !important;
padding: 0 !important;
margin: 0!important;
}
#nav {
flex: 1 1 90%;
padding: 0;
}
#menu {
padding-left: 0;
padding-top: 15px;
padding-bottom: 15px;
padding-right: 20px;
text-align: right;
vertical-align: top;
width: auto;
list-style: none;
-webkit-text-stroke: 1px;
letter-spacing: 2px;
}
#menu li {
text-transform: uppercase;
text-align: center;
vertical-align: middle;
color: #909090;
/*area color*/
display: inline;
}
a {
color: white;
text-decoration: none;
}
#fullpage{
margin:10%;}
span {
box-sizing:border-box;
text-align: center;
display: block;
width: 100%;
margin-top:60px;
margin-bottom:60px;
}
h2 {color:MediumVioletRed;}
.important {color: Blue;
display: inline;
width: 10%;}
#menu li a {
text-transform: uppercase !important;
text-decoration: none;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 15px;
padding-right: 15px;
white-space: nowrap;
}
/* ----------------------hamburger code------------------------*/
.cross{color:white;
float:right;
font-size:90px;
line-height:2px;
/*margin-top: 15px;*/
padding:36px 5px 0px 5px;
outline:none;
margin-top: 5px;
}
.hamburger{color:white;
float:right;
font-size:40px;
line-height:40px;
margin-top: 5px;
padding:0 5px 0px 5px;
}
.hamburgerDiv{display:none;
padding-right: 10px;}
/* ----media query for changing navigation and hamburger----------*/
#media screen and (max-width:800px) {
#header {
justify-content: left;
flex-wrap: wrap;
padding: 0 ;
}
#areaTitle a{font-size:4vw;}
#menu {
width: 100% !important;
min-width: 100%;
margin: 0;
padding: 0;
text-align: center;
}
#menu li {
padding: 0;
margin-left: 1%;
margin-right: 1%;
}
#menu li a {
padding: 0;
margin: 0;
font-size: 100%;
}
#nav {
text-align: center;
flex:0 0 100%;
padding: 0 0 10px 0;
}
.hamburgerDiv{
display:inline;
flex: 1 1 auto;
}
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<title>my hmaburger</title>
</head>
<body>
<div id="header" class="header">
<div id="areaTitle" class="navText">
Hamburger problems
</div>
<div class="hamburgerDiv">
<button class="hamburger">☰</button>
<button class="cross">˟</button>
</div>
<nav id="nav">
<ul id="menu" class="navbar-nav nav pubMenuList >
<li id="first"></li>
<li id="first menuItem">section 1</li>
<li >section 2</li>
<li class="menuItem" >section 3</li>
<li class="menuItem">section 4</li>
<li class="menuItem">section 5</li>
<li class="menuItem"> section 6</li>
<li class="menuItem"> section 7</li>
<li class="menuItem"> section 8</li>
<li class="menuItem"> section 9</li>
</ul>
</div>
</div>
<div id="fullpage">
<section id="section1Anc" class="areaSection scrollto">
<h1><span>Section 1</span></h1>
<div id = "section1Div" class = "pubSub">
<p ><h2>On the surface it looks like my hamburger menu is working - but there is a problem.</p> <p> The problem occurs if you resize the window from a small view (width <800 px), to a larger one (width > 800px), then back to a small view (width <800 px). Once the screen is returned to a smaller version, and you click on the hamburger, the menu toggles back and forth, instead of simply revealing the navigation. Can you help me so it stops doing this? <span class="important">I think it might be happening because I don't know how to use event handlers properly.</span></p>
<p>IMPORTANT ELEMENTS:
<ul>
<li><span class="important">#nav</span> is the list of menu items that I only want visible during wide screen and after the hamburger is pressed at width < 800px</li>
<li><span class="important">#hamburgerDiv</span> is the container that contains both the hamburger/open-menu button (.hamburger) and the cross/close-menu button (.cross) </li>
<li><span class="important"> .hamburger </span>is the hamburger/open-menu button </li>
<li><span class="important">.cross</span> is the cross/close-menu button </li><ul></h2></p>
<img src="http://i.imgur.com/Q23PKdJ.gif" height="334" width="1045">
</div>
</section>
<section id="section2Anc" class="areaSection scrollto">
<h1><span>Section 2</span></h1>
<div id = "section2Div" class = "pubSub">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>
<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>
<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>
<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>
</div>
</section>
<section id="section3Anc" class="areaSection scrollto">
<h1><span>Section 3</span></h1>
<div id = "section3Div" class = "pubSub">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>
</div>
</section>
<section id="section4Anc" class="areaSection scrollto">
<h1><span>Section 4</span></h1>
<div id = "section4Div" class = "pubSub">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>
<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>
<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>
<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>
</div>
</section>
<section id="section5Anc" class="areaSection scrollto">
<h1><span>Section 5</span></h1>
<div id = "section5Div" class = "pubSub">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>
<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>
<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>
<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>
</div>
</section>
<section id="section6Anc" class="areaSection scrollto">
<h1><span>Section 6</span></h1>
<div id = "section6Div" class = "pubSub">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>
<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>
<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>
<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>
</div>
</section>
<section id="section7Anc" class="areaSection scrollto">
<h1><span>Section 7</span></h1>
<div id = "section7Div" class = "pubSub">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>
<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>
<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>
<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>
</div>
</section>
<section id="section8Anc" class="areaSection scrollto">
<h1><span>Section 8</span></h1>
<div id = "section8Div" class = "pubSub">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>
<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>
<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>
<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>
</div>
</section>
<section id="section9Anc" class="areaSection scrollto">
<h1><span>Section 9</span></h1>
<div id = "proceedingsPubDiv" class = "pubSub">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>
<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>
<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>
<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>
</div>
</section>
</div>
</body>
Simply move the hamburger(); out of the function WidthChange(mq) {}
The hamburger() function should only be called once. And now, it is inside the WidthChange(mq) function, so it will be called everytime there is a "match".
Try resizing the window more than twice, and you'll see that menu will pop up and down more than twice.
In your hamburger() function you continue to attach listeners for click event.
Maybe you should do this, just one shot at page load, as you don't need to attach the listeners every time you show an element like the hamburger and cross buttons.
Here how your function should look like:
// Called at the beginning one time only!
hamburger();
// media query change /
function WidthChange(mq) {
if (mq.matches) {
$( "#hamburgerDiv" ).show();
$( ".hamburger" ).show();
$( ".cross" ).hide();
$(".nav" ).slideToggle("slow",function() {
// Animation complete.
});
// you don't need it here
// hamburger();
} else {
$( ".nav" ).show();
$( "#hamburgerDiv" ).hide();
}
};

Fading effect between switching divs

I'm using http://tympanus.net/Development/PageTransitions/ for my main pages, the code below is used within a single page to showcase other different content info. All pages coded are in one index file.
The code below is used to switch between divs.
I tried using simple javascript onclick to make the pages fadeIn/fadeOut but it couldn't work.
jQuery:
<script type="text/javascript">
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i = 0; i < sel.length; i++) {
sel[i].style.display = 'none';
}
document.getElementById('container' + idInfo).style.display = 'block';
}
$("#fade").click(function () {
$('#container1').fadeOut('slow');
$('#container2').fadeIn('slow');
});
</script>
CSS:
<style type="text/css">
#container1, #container2, #container3 {
display:none;
width:100%;
height:auto;
}
</style>
HTML:
<img src="img/thumbnail1.png" /><br>click to see content 1
<img src="img/thumbnail2.png" /><br>click to see content 2
<img src="img/thumbnail3.png" /><br>click to see content 3
<div id="container1">content1</div>
<div id="container2">content2</div>
<div id="container3">content3</div>
Just need the .onclick fade effect to work after clicking on the link.
Many thanks in advance!
I think that this is what you are aiming for:
Online Demo
HTML:
<div class="links">
click to see content 1
click to see content 2
click to see content 3
</div>
<div class="content-divs">
<div>content0</div>
<div>content1</div>
<div>content2</div>
</div>
JavaScript:
$(".links a").click(function () {
var id = $(this).data('toggle');
showDiv(id);
});
function showDiv(id) {
// hide all other
var divs = $('.content-divs');
divs.children().each(function(index) {
$(this).hide();
});
// fade the correct one in.
divs.children('div:nth-child('+id+')').fadeIn();
}
Same css.
Since you are already using jQuery, why not use all it's functions?
You could do that with onclick="showDiv(id)", but jsfiddle does not work with that, so .data('toggle') is a nice workaround.
It seems you may be making this a little bit more complicated then it needs to be, try this out:
<script type="text/javascript">
$(document).ready(function(){
var curr = 1
$('.fader').click(function(){
var next_attr = $(this).data('num');
if(curr != next_attr){
$('div[data-num="'+curr+'"]').hide(1000, function(){
$('div[data-num="'+next_attr+'"]').show(1000);
});
curr = next_attr
}
});
});
</script>
Here is the html
<div class="links">
<a class=".fader" data-num="1">Show Container 1</a>
<a class=".fader" data-num="2">Show Container 2</a>
<a class=".fader" data-num="3">Show Container 3</a>
</div>
<div class="containers">
<div id="container1" data-num="1">Container 1</div>
<div id="container2" data-num="2">Container 2</div>
<div id="container3" data-num="3">Container 3</div>
</div>
and here is the css
#container2, #container3{
display:none;
width:100%;
height:auto;
}
that should give you the ability to switch between the 3 containers by clicking the links corresponding to them. I used a data attribute to link the containers to there links. When a link is clicked it looks for div with the same data-num and fades out the current one once its faded out it fades in the new one and sets the curr variable.
You can actually do this in pure CSS. (Not supported for IE 8-)
http://jsbin.com/eVeNeSO/1/edit
CSS:
body {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
background-color: #001;
}
/* Header Styling and Positioning */
#container ul {
list-style:none;
margin: 2em 0;
padding: 0;
text-align: center;
font-size: 1.5em;
}
#container li {
display: inline;
margin: 0 1em;
}
#container li a {
margin: 0 1em;
color: #09b;
text-decoration: none;
background: #333;
padding: .6em;
border-radius: 25em;
}
#container li a:hover {
color: #099;
background: #444;
}
#container li a:active {
color: #066;
background: #222;
}
/* Content Area */
.content div {
width: 50%;
margin: 2em auto;
padding: 1em;
background: #333;
border: 1em solid #555;
color: #fff;
}
/* hide unselected targets */
.content div:not(:target) {
display: none;
}
/* display selected target */
:target {
display: inherit;
}
HTML:
<article id="container">
<ul>
<li>About</li>
<li>Contact</li>
<li>Services</li>
</ul>
<div class="content">
<div id="about">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at feugiat odio. Proin sit amet eros ac diam tempus tempor. Fusce gravida ut nisi in consectetur. Sed hendrerit sapien id metus adipiscing, id vehicula lacus fermentum. Proin mollis facilisis erat, eu sollicitudin diam scelerisque ut. Phasellus non mollis nisl. Vestibulum ac mi quis metus mollis fermentum. Donec pharetra consequat lacinia. Vestibulum porta tortor purus, non fermentum turpis congue eget. Nulla varius augue dolor, at pellentesque diam volutpat in. Vestibulum vitae ligula eu eros tristique accumsan. Mauris sagittis iaculis lorem id egestas. Suspendisse potenti. Cras faucibus dolor turpis, ac ultrices dolor rhoncus a.
<p>Etiam aliquam magna vitae hendrerit accumsan. Nam venenatis risus a tempor semper. Nullam ac est nec dolor pellentesque laoreet ac ac nisi. Ut sit amet magna nunc. Vestibulum orci ipsum, pretium nec venenatis vel, lacinia et magna. Proin dignissim dui ligula, eget pretium nisl ultrices eu. Etiam sit amet nunc non nisl scelerisque dignissim a sed sapien.</p>
<p>Quisque auctor sit amet mi sed porta. Fusce nec erat eros. Suspendisse et diam sit amet quam pretium sollicitudin quis nec enim. Nam fermentum risus dui, non volutpat dolor pellentesque nec. Quisque interdum, neque eu feugiat hendrerit, risus augue malesuada mauris, non vestibulum ante erat quis purus. Nunc scelerisque sapien vel leo bibendum, vel dapibus ipsum ultricies. Cras commodo lacus quis nunc eleifend iaculis. Nam adipiscing ipsum non justo ultrices, sit amet vestibulum urna vehicula. Praesent porttitor neque et dictum euismod. Aliquam erat volutpat. Nam adipiscing, neque ut dictum ultricies, dui odio aliquet dui, ac rhoncus neque nulla a enim.</p>
</div>
<div id="contact">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut purus leo, varius pellentesque vestibulum at, lobortis quis est. Suspendisse mattis leo vel eros faucibus adipiscing. Phasellus sed nisl eu lectus blandit dignissim vel id nibh. Donec rutrum felis urna, sed elementum urna venenatis quis. Praesent vel tortor sed felis sodales lobortis eget eget nulla. Aliquam bibendum elit eu nunc facilisis, varius tempor lectus mattis. Aenean sed aliquet orci. Aliquam viverra molestie ultrices.
<p>Nullam luctus imperdiet risus, vel convallis massa interdum id. In ultricies pulvinar libero vitae sodales. Fusce eleifend varius tincidunt. Nulla sed blandit nibh. Ut sollicitudin, metus et sagittis tincidunt, nisl felis ultricies ante, eu dapibus massa odio sed nunc. Pellentesque semper eros dui, ac mollis nunc dictum non. Quisque ultrices sapien at velit pellentesque, at lacinia est commodo. Morbi commodo in neque eu tempor. Curabitur eu mattis diam, eu tristique mauris.</p>
<p>Suspendisse sit amet lacus rutrum, faucibus augue vitae, euismod nibh. Mauris aliquet nisi in nibh aliquam, et ullamcorper turpis mattis. Vestibulum ut hendrerit libero, eu ultricies odio. Etiam sodales vehicula dignissim. Vestibulum libero tellus, luctus sed imperdiet quis, malesuada sed nunc. In aliquet pellentesque erat pellentesque fringilla. Aenean egestas ipsum eu nunc auctor, nec vestibulum est varius. Integer convallis, orci sit amet sagittis hendrerit, purus ligula dictum dolor, in lobortis ligula lacus pulvinar lorem. Sed pulvinar porttitor egestas. Duis ac ante ipsum. Donec sem odio, sollicitudin in fermentum egestas, gravida sed diam. Nam condimentum augue ut ligula dapibus sodales. Donec blandit sem non cursus aliquam.</p>
</div>
<div id="services">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus posuere porta suscipit. In ac purus quis lectus blandit rutrum eu vitae nisi. Nunc vel ante at enim imperdiet ultrices et non erat. Vestibulum sagittis facilisis nulla. Ut quis turpis sit amet enim volutpat tincidunt. Vivamus vel ornare neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis tincidunt mi et ipsum cursus, vitae tincidunt ipsum fringilla. Integer eu mollis elit, in tincidunt neque.
<p>Maecenas ac est gravida, iaculis mauris vitae, tempus enim. Mauris ut nisi dapibus, commodo massa sed, iaculis augue. Cras sit amet leo libero. Mauris ac dui lorem. Aenean velit risus, ornare molestie neque ac, feugiat cursus tellus. Duis commodo lacinia felis, vitae aliquam mauris consectetur cursus. Donec arcu orci, sollicitudin eu lacus id, ultricies sollicitudin ligula. Vivamus ac egestas ipsum. Duis aliquam suscipit tristique. Vestibulum aliquet bibendum arcu, in adipiscing arcu sagittis ut. Aenean in leo risus. Morbi vitae nibh in eros accumsan consequat in ac lacus. Maecenas pretium mattis justo non euismod. Sed vel velit sollicitudin, posuere mi nec, dictum lectus.</p>
<p>Nullam nisl nisi, dignissim ultrices cursus id, aliquet vel purus. Praesent velit purus, pharetra id eros id, viverra ultricies velit. Phasellus sed lacinia neque, at dictum odio. Mauris eget accumsan augue, ac imperdiet magna. Proin commodo sem id purus vulputate mollis. Nunc a dignissim urna. Nam facilisis, lectus sit amet blandit egestas, velit tortor imperdiet massa, eu elementum lorem dolor nec diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus sit amet nisl turpis. Nulla vel nulla ut odio feugiat ultrices. Ut id consequat sem.</p>
</div>
</div>
</article>

Categories

Resources