Related
I need to make a submenu always adjacent to main menu(header). Header is always the same for all subpage but submenu is different for each subpage. I want to when window scroll down, header padding change and submenu is still adjacent to header - this works but if header goes to the top fast, submenu is hidding below the header.
Codepen: https://codepen.io/anon/pen/PVgNER
$(window).on('scroll', function (event) {
event.preventDefault();
var headerHeight = $('.header').outerHeight();
$('.submenu').css('margin-top', headerHeight);
if (window.scrollY >= 100) {
$('.header').addClass('no-padd');
} else {
$('.header').removeClass('no-padd');
};
});
var headerHeight = $('.header').outerHeight();
$('.submenu').css('margin-top', headerHeight);
if ($('.submenu').length) {
var hei = ($('.header').outerHeight() + $('.submenu').outerHeight());
$('.page-content').css('margin-top', hei);
} else {
var hei = $('.header').outerHeight();
$('.page-content').css('margin-top', hei);
}
$(window).on('resize', function() {
if ($('.submenu').length) {
var hei = ($('.header').outerHeight() + $('.submenu').outerHeight());
$('.page-content').css('margin-top', hei);
}
var headerHeight = $('.header').outerHeight();
$('.submenu').css('margin-top', headerHeight);
});
.bg-black {
background-color: gray;
}
.header {
padding-top: 25px;
padding-bottom: 25px;
position: fixed;
top: 0;
z-index: 9999;
transition: all .1s;
}
.no-padd {
padding-top: 0;
padding-bottom: 0;
}
.header a {
color: #000;
font-size: 15px;
font-weight: 300;
text-decoration: none;
transition: all .1s;
}
.header a:hover {
color: #cba168;
}
nav ul {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
margin: 0;
list-style-type: none;
}
nav ul li {
padding-left: 15px;
padding-right: 15px;
}
nav ul li a{
display: block;
text-transform: uppercase;
text-align: center;
color: #ffffff;
padding-bottom: 15px;
padding-top: 15px;
transition: all .3s ;
}
.header-phone,
.header-socials {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.header-phone a:after,
.header-socials a:after {
content: '';
display: block;
position: absolute;
border-right: 1px solid #cba168;
height: 100%;
top: 0;
right:0;
}
.header-phone i {
margin-right: 5px;
}
.header-socials a {
margin-right: 10px;
}
.bg-brown {
background-color: #252525;
}
.submenu {
position: fixed;
top: 0%;
z-index: 99;
transition: all .1s;
}
.submenu ul {
display: flex;
align-items: center;
list-style-type: none;
justify-content: flex-start;
padding-left: 25%;
margin: 0;
}
.submenu ul li a {
color: #fff;
font-size: 15px;
text-decoration: none;
display: block;
padding: 15px 35px;
transition: all .3s;
}
.submenu ul li:hover a {
color: #cba168;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<header>
<div class="container-fluid themewidth bg-black header" id='header'>
<div class="row">
<div class="col-6 col-lg-2 d-flex align-items-center justify-content-center logo">
<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" width=50; alt="">
</div>
<div class="col-lg-6 pl-4 main-menu d-flex justify-content-center align-items-center">
<nav><ul><li><a href=''>header 1</a></li><li><a href=''>header 2</a></li><li><a href=''>header 3</a></li></ul></nav>
</div>
<div class="col-6 col-lg-4 pr-0 pl-0 d-flex justify-content-center align-items-center">
<div class='header-phone pr-4 pl-4'>
<a href='tel:+121212'>
<i class="fas fa-phone fa-rotate-90"></i><span>+12 12 12 12</span>
</a>
</div>
<div class='header-socials pr-4 pl-4'>
<i class="fab fa-facebook"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-pinterest"></i>
<i class="fab fa-linkedin-in"></i>
</div>
</div>
</div>
</div>
</header>
<div class="container-fluid bg-brown submenu">
<div class="row">
<div class="col-12">
<nav>
<ul>
<li>submenu 1</li>
<li>submenu 2</li>
<li>submenu 3</li>
</ul>
</nav>
</div>
</div>
</div>
<main class='page-content pt-5'>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tristique at dui at commodo. Sed mollis vehicula nibh, quis ultrices diam laoreet eget. Duis vitae dignissim lectus, ut porta tortor. Aenean pulvinar aliquet elit, at tempus ante auctor nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae nibh at augue placerat placerat. Nam ornare, risus eget auctor condimentum, leo justo porttitor magna, ac ornare neque felis eu nulla. Etiam erat orci, accumsan at volutpat in, tempus ut velit. Morbi velit tortor, porttitor a velit eu, dictum pellentesque dui. Duis dignissim nisl ac odio tempus, ac fermentum sapien eleifend. Nunc in leo eu tellus aliquam ultrices ac eu nibh. Maecenas iaculis condimentum nisl, nec lobortis lectus sodales non. Aliquam nisi massa, tempus sit amet orci at, vulputate ultricies nisl.
Fusce hendrerit felis nibh, sed mattis nibh mollis eget. Praesent pretium velit erat. Phasellus pellentesque nunc sit amet efficitur bibendum. Fusce vitae metus laoreet, tincidunt est a, accumsan lorem. Fusce augue lorem, luctus vitae vehicula ut, aliquet id leo. Nunc massa turpis, interdum ut erat id, congue vulputate tellus. Integer nec tincidunt arcu. Etiam suscipit pharetra dapibus. Donec eu velit ultricies, cursus ligula at, vulputate arcu. Fusce tristique efficitur ultrices. Vivamus volutpat erat vel feugiat tincidunt. Aenean dictum nec diam non consectetur. Fusce elementum eros vitae nisl euismod gravida. Nullam scelerisque, leo ac varius lacinia, arcu ante ultricies elit, vel tempus risus ante ac augue. Quisque id dui ac ex bibendum gravida. Integer auctor, felis non porta mollis, turpis lorem egestas libero, in iaculis libero turpis varius mi.
Donec in sem in neque pulvinar egestas sit amet et eros. Integer sit amet purus tortor. Nam venenatis aliquet tellus, quis faucibus lacus ornare ut. Nulla dictum feugiat ante id aliquam. Cras interdum ligula id orci euismod, ut accumsan felis pharetra. Pellentesque ut eros a nisi porta viverra. Suspendisse et aliquam dui.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tristique at dui at commodo. Sed mollis vehicula nibh, quis ultrices diam laoreet eget. Duis vitae dignissim lectus, ut porta tortor. Aenean pulvinar aliquet elit, at tempus ante auctor nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae nibh at augue placerat placerat. Nam ornare, risus eget auctor condimentum, leo justo porttitor magna, ac ornare neque felis eu nulla. Etiam erat orci, accumsan at volutpat in, tempus ut velit. Morbi velit tortor, porttitor a velit eu, dictum pellentesque dui. Duis dignissim nisl ac odio tempus, ac fermentum sapien eleifend. Nunc in leo eu tellus aliquam ultrices ac eu nibh. Maecenas iaculis condimentum nisl, nec lobortis lectus sodales non. Aliquam nisi massa, tempus sit amet orci at, vulputate ultricies nisl.
Fusce hendrerit felis nibh, sed mattis nibh mollis eget. Praesent pretium velit erat. Phasellus pellentesque nunc sit amet efficitur bibendum. Fusce vitae metus laoreet, tincidunt est a, accumsan lorem. Fusce augue lorem, luctus vitae vehicula ut, aliquet id leo. Nunc massa turpis, interdum ut erat id, congue vulputate tellus. Integer nec tincidunt arcu. Etiam suscipit pharetra dapibus. Donec eu velit ultricies, cursus ligula at, vulputate arcu. Fusce tristique efficitur ultrices. Vivamus volutpat erat vel feugiat tincidunt. Aenean dictum nec diam non consectetur. Fusce elementum eros vitae nisl euismod gravida. Nullam scelerisque, leo ac varius lacinia, arcu ante ultricies elit, vel tempus risus ante ac augue. Quisque id dui ac ex bibendum gravida. Integer auctor, felis non porta mollis, turpis lorem egestas libero, in iaculis libero turpis varius mi.
Donec in sem in neque pulvinar egestas sit amet et eros. Integer sit amet purus tortor. Nam venenatis aliquet tellus, quis faucibus lacus ornare ut. Nulla dictum feugiat ante id aliquam. Cras interdum ligula id orci euismod, ut accumsan felis pharetra. Pellentesque ut eros a nisi porta viverra. Suspendisse et aliquam dui.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tristique at dui at commodo. Sed mollis vehicula nibh, quis ultrices diam laoreet eget. Duis vitae dignissim lectus, ut porta tortor. Aenean pulvinar aliquet elit, at tempus ante auctor nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae nibh at augue placerat placerat. Nam ornare, risus eget auctor condimentum, leo justo porttitor magna, ac ornare neque felis eu nulla. Etiam erat orci, accumsan at volutpat in, tempus ut velit. Morbi velit tortor, porttitor a velit eu, dictum pellentesque dui. Duis dignissim nisl ac odio tempus, ac fermentum sapien eleifend. Nunc in leo eu tellus aliquam ultrices ac eu nibh. Maecenas iaculis condimentum nisl, nec lobortis lectus sodales non. Aliquam nisi massa, tempus sit amet orci at, vulputate ultricies nisl.
Fusce hendrerit felis nibh, sed mattis nibh mollis eget. Praesent pretium velit erat. Phasellus pellentesque nunc sit amet efficitur bibendum. Fusce vitae metus laoreet, tincidunt est a, accumsan lorem. Fusce augue lorem, luctus vitae vehicula ut, aliquet id leo. Nunc massa turpis, interdum ut erat id, congue vulputate tellus. Integer nec tincidunt arcu. Etiam suscipit pharetra dapibus. Donec eu velit ultricies, cursus ligula at, vulputate arcu. Fusce tristique efficitur ultrices. Vivamus volutpat erat vel feugiat tincidunt. Aenean dictum nec diam non consectetur. Fusce elementum eros vitae nisl euismod gravida. Nullam scelerisque, leo ac varius lacinia, arcu ante ultricies elit, vel tempus risus ante ac augue. Quisque id dui ac ex bibendum gravida. Integer auctor, felis non porta mollis, turpis lorem egestas libero, in iaculis libero turpis varius mi.
Donec in sem in neque pulvinar egestas sit amet et eros. Integer sit amet purus tortor. Nam venenatis aliquet tellus, quis faucibus lacus ornare ut. Nulla dictum feugiat ante id aliquam. Cras interdum ligula id orci euismod, ut accumsan felis pharetra. Pellentesque ut eros a nisi porta viverra. Suspendisse et aliquam dui.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tristique at dui at commodo. Sed mollis vehicula nibh, quis ultrices diam laoreet eget. Duis vitae dignissim lectus, ut porta tortor. Aenean pulvinar aliquet elit, at tempus ante auctor nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae nibh at augue placerat placerat. Nam ornare, risus eget auctor condimentum, leo justo porttitor magna, ac ornare neque felis eu nulla. Etiam erat orci, accumsan at volutpat in, tempus ut velit. Morbi velit tortor, porttitor a velit eu, dictum pellentesque dui. Duis dignissim nisl ac odio tempus, ac fermentum sapien eleifend. Nunc in leo eu tellus aliquam ultrices ac eu nibh. Maecenas iaculis condimentum nisl, nec lobortis lectus sodales non. Aliquam nisi massa, tempus sit amet orci at, vulputate ultricies nisl.
Fusce hendrerit felis nibh, sed mattis nibh mollis eget. Praesent pretium velit erat. Phasellus pellentesque nunc sit amet efficitur bibendum. Fusce vitae metus laoreet, tincidunt est a, accumsan lorem. Fusce augue lorem, luctus vitae vehicula ut, aliquet id leo. Nunc massa turpis, interdum ut erat id, congue vulputate tellus. Integer nec tincidunt arcu. Etiam suscipit pharetra dapibus. Donec eu velit ultricies, cursus ligula at, vulputate arcu. Fusce tristique efficitur ultrices. Vivamus volutpat erat vel feugiat tincidunt. Aenean dictum nec diam non consectetur. Fusce elementum eros vitae nisl euismod gravida. Nullam scelerisque, leo ac varius lacinia, arcu ante ultricies elit, vel tempus risus ante ac augue. Quisque id dui ac ex bibendum gravida. Integer auctor, felis non porta mollis, turpis lorem egestas libero, in iaculis libero turpis varius mi.
Donec in sem in neque pulvinar egestas sit amet et eros. Integer sit amet purus tortor. Nam venenatis aliquet tellus, quis faucibus lacus ornare ut. Nulla dictum feugiat ante id aliquam. Cras interdum ligula id orci euismod, ut accumsan felis pharetra. Pellentesque ut eros a nisi porta viverra. Suspendisse et aliquam dui.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tristique at dui at commodo. Sed mollis vehicula nibh, quis ultrices diam laoreet eget. Duis vitae dignissim lectus, ut porta tortor. Aenean pulvinar aliquet elit, at tempus ante auctor nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae nibh at augue placerat placerat. Nam ornare, risus eget auctor condimentum, leo justo porttitor magna, ac ornare neque felis eu nulla. Etiam erat orci, accumsan at volutpat in, tempus ut velit. Morbi velit tortor, porttitor a velit eu, dictum pellentesque dui. Duis dignissim nisl ac odio tempus, ac fermentum sapien eleifend. Nunc in leo eu tellus aliquam ultrices ac eu nibh. Maecenas iaculis condimentum nisl, nec lobortis lectus sodales non. Aliquam nisi massa, tempus sit amet orci at, vulputate ultricies nisl.
Fusce hendrerit felis nibh, sed mattis nibh mollis eget. Praesent pretium velit erat. Phasellus pellentesque nunc sit amet efficitur bibendum. Fusce vitae metus laoreet, tincidunt est a, accumsan lorem. Fusce augue lorem, luctus vitae vehicula ut, aliquet id leo. Nunc massa turpis, interdum ut erat id, congue vulputate tellus. Integer nec tincidunt arcu. Etiam suscipit pharetra dapibus. Donec eu velit ultricies, cursus ligula at, vulputate arcu. Fusce tristique efficitur ultrices. Vivamus volutpat erat vel feugiat tincidunt. Aenean dictum nec diam non consectetur. Fusce elementum eros vitae nisl euismod gravida. Nullam scelerisque, leo ac varius lacinia, arcu ante ultricies elit, vel tempus risus ante ac augue. Quisque id dui ac ex bibendum gravida. Integer auctor, felis non porta mollis, turpis lorem egestas libero, in iaculis libero turpis varius mi.
Donec in sem in neque pulvinar egestas sit amet et eros. Integer sit amet purus tortor. Nam venenatis aliquet tellus, quis faucibus lacus ornare ut. Nulla dictum feugiat ante id aliquam. Cras interdum ligula id orci euismod, ut accumsan felis pharetra. Pellentesque ut eros a nisi porta viverra. Suspendisse et aliquam dui.
</p>
</main>
You are taking it a long way.
you can do this easily using CSS.
Remove scroll function in Javascript and use the below code
.submenu ul{
position: -webkit-sticky;
position: sticky;
top: 0;
}
You can refer the link below.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sticky_element
Thanks
The first .post__slide is visible if I take out the .post__menu wrapping the nav, but if I leave the .post__menu wrapping the nav the first .post__slide isn't visible.
To see it working as it should remove the .post__menu wrapper in the HTML and you will see that the first .post__slide is visible.
My question: How do I restructure my JS so that I keep the .post__menu wrapper in my markup and the first .post__slide is visible?
$(function() {
$('.post nav a').on('click', function() {
showSlide($(this).index());
});
showSlide(0);
function showSlide(index) {
// Make the post__slide post__slide--visible
$('.post .post__slide.post__slide--visible').removeClass('post__slide--visible');
$('.post .post__slide:nth-of-type(' + (index + 1) + ')').addClass('post__slide--visible');
// Set the tab to post__nav--selected
$('.post nav a.post__nav--selected').removeClass('post__nav--selected');
$('.post nav a:nth-of-type(' + (index + 1) + ')').addClass('post__nav--selected');
}
});
.post {
position: relative;
}
.post .post__nav {
display: flex;
flex-wrap: wrap;
align-items: stretch;
width: 100px;
}
.post .post__nav a {
padding: 20px 0px;
text-align: center;
width: 100%;
cursor: pointer;
}
.post .post__nav a:hover,
.post .post__nav a.post__nav--selected {
color: #737d8b;
font-weight: 700;
}
.post .post__slide {
position: absolute;
top: 0px;
left: 100px;
width: 0px;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
opacity: 0;
transition: opacity 0.1s linear 0s;
}
.post .post__slide.post__slide--visible {
width: calc(100% - 100px);
overflow: scroll;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">
<div class="post__menu">
<nav class="post__nav">
<a>post__slide #1</a>
<a>post__slide #2</a>
<a>post__slide #3</a>
</nav>
</div>
<div class="post__slide">
<p>post__slide #1</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean convallis magna ipsum, nec sodales lectus rutrum eleifend. Mauris laoreet tincidunt erat, nec mattis tellus luctus ac. Vivamus et pulvinar felis, a placerat dui. Aenean ornare, ipsum
vel aliquet mattis, ante nibh rhoncus erat, in auctor tortor libero quis diam. Cras non purus eget enim dapibus pharetra. Integer eget commodo nisi. Quisque sed pharetra sapien. Suspendisse potenti. Aliquam ligula elit, fermentum a ex ac, porttitor
fermentum velit. Phasellus quis lacinia nunc. Sed risus neque, venenatis in libero ac, auctor sagittis neque. Suspendisse hendrerit magna in sem mattis eleifend. Praesent vitae hendrerit est.</p>
<p>Nunc sit amet ante quis eros convallis dictum. Sed pretium viverra vehicula. Fusce elementum sagittis nulla, sed mollis enim cursus sed. Donec quis magna ultrices tellus consectetur pharetra vel vitae lorem. Proin eu fringilla ligula, non mollis felis.
Cras scelerisque faucibus auctor. Ut auctor rutrum consectetur. Suspendisse in luctus risus. Nam condimentum, est placerat posuere commodo, libero elit maximus turpis, quis auctor mi risus a mauris. Donec rutrum, tortor sit amet viverra lobortis,
nisi est varius libero, eget vestibulum arcu ex lacinia augue. Integer diam tellus, interdum vitae tellus in, accumsan suscipit velit. Sed ut blandit mauris. Etiam ac arcu eget nisi placerat feugiat. Sed laoreet, diam id iaculis tincidunt, turpis
ex tristique felis, eu varius sapien lectus at justo. Donec sit amet congue erat. Curabitur nibh neque, dapibus ac placerat nec, maximus sollicitudin est.</p>
</div>
<div class="post__slide">
<p>post__slide #2</p>
<p>Donec quis tortor vehicula, auctor elit nec, consequat urna. Curabitur hendrerit ipsum erat, fringilla vehicula velit lacinia eget. Suspendisse scelerisque volutpat sapien, et hendrerit est lobortis vitae. Curabitur et ultrices nibh. Sed molestie
sagittis ante et gravida. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras sit amet ex tincidunt, vulputate lectus at, malesuada nibh.</p>
<p>Morbi semper, sem non scelerisque pulvinar, felis sapien accumsan quam, a viverra lorem eros et massa. Sed sed tincidunt nunc. Pellentesque semper vulputate lacus eget laoreet. Curabitur ultricies sem ut ullamcorper gravida. Cras ut ex ut dolor blandit
sollicitudin vel eu tortor. Nulla pulvinar vulputate rutrum. Quisque ligula quam, aliquam pharetra enim non, scelerisque ullamcorper metus. Integer ullamcorper eros eu magna sagittis tempor. Quisque lacus ante, sagittis luctus efficitur quis, varius
a nunc. Nulla risus ante, blandit sit amet dictum id, tempor sit amet leo. Morbi nec eleifend elit.</p>
</div>
<div class="post__slide">
<p>post__slide #3</p>
<p>Nulla vitae nulla felis. Donec efficitur arcu id turpis auctor blandit. Cras consequat efficitur eleifend. Phasellus vel justo lectus. Mauris sed lacus ex. In vulputate, tortor ac interdum dapibus, lorem tortor interdum diam, vitae fermentum felis
nisi id neque. Integer diam elit, ultricies quis suscipit sit amet, rutrum a nulla.</p>
<p>Donec quis ipsum magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean varius ante sed eros tristique fermentum. Duis sed vulputate tellus, in auctor tellus. Donec sed tempus odio. Nunc hendrerit erat nec dui sollicitudin, et
ullamcorper enim mattis. Quisque accumsan rutrum turpis ut suscipit. Mauris mi ex, iaculis sit amet dui non, faucibus pellentesque eros. Fusce et congue urna, ac ultricies ipsum. Ut accumsan euismod felis, vel ornare lectus dictum ut. Aenean eget
velit vulputate, placerat ligula et, maximus mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
</div>
If I understand your requirement correctly, this would be what you want:
$(function() {
$('.post a').on('click', function(e) {
e.preventDefault()
showSlide($(this).index());
});
showSlide(0);
function showSlide(index) {
// Make the post__slide post__slide--visible
$('.post .post__slide').removeClass('post__slide--visible');
$('.post .post__slide').eq(index).addClass('post__slide--visible');
// Set the tab to post__nav--selected
$('.post a').removeClass('post__nav--selected');
$('.post a').eq(index).addClass('post__nav--selected');
}
});
.post {
position: relative;
}
.post a {
display: block;
padding: 20px 0px;
width: 100%;
cursor: pointer;
}
.post a:hover,
.post a.post__nav--selected {
color: #737d8b;
font-weight: 700;
}
.post .post__slide {
position: absolute;
top: 0px;
left: 100px;
width: 0px;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
opacity: 0;
transition: opacity 0.1s linear 0s;
}
.post .post__slide.post__slide--visible {
width: calc(100% - 100px);
overflow: scroll;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">
<div class="post__menu">
<a>post__slide #1</a>
<a>post__slide #2</a>
<a>post__slide #3</a>
</div>
<div class="post__slide">
<p>post__slide #1</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean convallis magna ipsum, nec sodales lectus rutrum eleifend. Mauris laoreet tincidunt erat, nec mattis tellus luctus ac. Vivamus et pulvinar felis, a placerat dui. Aenean ornare, ipsum
vel aliquet mattis, ante nibh rhoncus erat, in auctor tortor libero quis diam. Cras non purus eget enim dapibus pharetra. Integer eget commodo nisi. Quisque sed pharetra sapien. Suspendisse potenti. Aliquam ligula elit, fermentum a ex ac, porttitor
fermentum velit. Phasellus quis lacinia nunc. Sed risus neque, venenatis in libero ac, auctor sagittis neque. Suspendisse hendrerit magna in sem mattis eleifend. Praesent vitae hendrerit est.</p>
<p>Nunc sit amet ante quis eros convallis dictum. Sed pretium viverra vehicula. Fusce elementum sagittis nulla, sed mollis enim cursus sed. Donec quis magna ultrices tellus consectetur pharetra vel vitae lorem. Proin eu fringilla ligula, non mollis felis.
Cras scelerisque faucibus auctor. Ut auctor rutrum consectetur. Suspendisse in luctus risus. Nam condimentum, est placerat posuere commodo, libero elit maximus turpis, quis auctor mi risus a mauris. Donec rutrum, tortor sit amet viverra lobortis,
nisi est varius libero, eget vestibulum arcu ex lacinia augue. Integer diam tellus, interdum vitae tellus in, accumsan suscipit velit. Sed ut blandit mauris. Etiam ac arcu eget nisi placerat feugiat. Sed laoreet, diam id iaculis tincidunt, turpis
ex tristique felis, eu varius sapien lectus at justo. Donec sit amet congue erat. Curabitur nibh neque, dapibus ac placerat nec, maximus sollicitudin est.</p>
</div>
<div class="post__slide">
<p>post__slide #2</p>
<p>Donec quis tortor vehicula, auctor elit nec, consequat urna. Curabitur hendrerit ipsum erat, fringilla vehicula velit lacinia eget. Suspendisse scelerisque volutpat sapien, et hendrerit est lobortis vitae. Curabitur et ultrices nibh. Sed molestie
sagittis ante et gravida. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras sit amet ex tincidunt, vulputate lectus at, malesuada nibh.</p>
<p>Morbi semper, sem non scelerisque pulvinar, felis sapien accumsan quam, a viverra lorem eros et massa. Sed sed tincidunt nunc. Pellentesque semper vulputate lacus eget laoreet. Curabitur ultricies sem ut ullamcorper gravida. Cras ut ex ut dolor blandit
sollicitudin vel eu tortor. Nulla pulvinar vulputate rutrum. Quisque ligula quam, aliquam pharetra enim non, scelerisque ullamcorper metus. Integer ullamcorper eros eu magna sagittis tempor. Quisque lacus ante, sagittis luctus efficitur quis, varius
a nunc. Nulla risus ante, blandit sit amet dictum id, tempor sit amet leo. Morbi nec eleifend elit.</p>
</div>
<div class="post__slide">
<p>post__slide #3</p>
<p>Nulla vitae nulla felis. Donec efficitur arcu id turpis auctor blandit. Cras consequat efficitur eleifend. Phasellus vel justo lectus. Mauris sed lacus ex. In vulputate, tortor ac interdum dapibus, lorem tortor interdum diam, vitae fermentum felis
nisi id neque. Integer diam elit, ultricies quis suscipit sit amet, rutrum a nulla.</p>
<p>Donec quis ipsum magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean varius ante sed eros tristique fermentum. Duis sed vulputate tellus, in auctor tellus. Donec sed tempus odio. Nunc hendrerit erat nec dui sollicitudin, et
ullamcorper enim mattis. Quisque accumsan rutrum turpis ut suscipit. Mauris mi ex, iaculis sit amet dui non, faucibus pellentesque eros. Fusce et congue urna, ac ultricies ipsum. Ut accumsan euismod felis, vel ornare lectus dictum ut. Aenean eget
velit vulputate, placerat ligula et, maximus mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
</div>
I am slightly new to javascript, how do I make it so when the user scrolls once, it fires a function once.
Also, how do you detect the scroll in fancybox? I tried multiple things like .fancybox-inner but I couldn't grab it.
fiddle: https://jsfiddle.net/jzhang172/bft7fb6t/3/
$('.section1').click(function(){
$.fancybox({
type: 'inline',
href: '#fancy-about',
helpers : {
overlay : {
css : {
'background' : 'blue'
}
}
}
});
});
$(document).ready(function(){
$('body').scroll(function(){
alert('hey');
});
});
.parallax-window {
min-height: 400px; background: transparent;
}
body{
height:2000px;
}
.section1{
height:200px;
width:100%;
background:black;
}
#fancy-about{
display:none;
color:white;
width:500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.js"></script>
<div class="section1"></div>
<div id="fancy-about">
<p>Hey, this is meLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum efficitur sed enim in mollis. Proin molestie libero id congue hendrerit. In hac habitasse platea dictumst. Aenean augue libero, scelerisque id sagittis et, tristique nec ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam congue maximus efficitur. Fusce malesuada, magna eu porttitor fermentum, lorem arcu fermentum mi, porta faucibus lorem mauris sed felis. Curabitur dignissim risus quam, rutrum congue tellus aliquet sit amet. Cras luctus ac lectus non sollicitudin. Sed dolor metus, tempor eleifend orci et, laoreet vulputate orci.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque vitae malesuada massa. Proin facilisis ligula sed turpis scelerisque, ut pellentesque felis pharetra. Praesent metus elit, semper non vehicula non, pharetra quis nunc. Phasellus purus tortor, commodo non eleifend ut, blandit in leo. Aliquam sollicitudin gravida tristique. Nulla convallis nibh id massa eleifend ullamcorper. Morbi ut eleifend nisl, nec tincidunt nunc. Donec facilisis nibh tellus, non scelerisque augue varius elementum. Cras cursus mollis lectus ac malesuada. Nulla bibendum ex malesuada, dignissim neque a, scelerisque ipsum. Etiam pretium gravida odio, ac pulvinar nulla vehicula vel. Vestibulum pellentesque neque purus, eu bibendum ligula euismod id. Cras eu tristique massa. Nunc blandit vulputate mi non maximus.</p>
<div class="parallax-window" data-parallax="scroll" data-image-src="http://cdn.bulbagarden.net/upload/thumb/0/0d/025Pikachu.png/250px-025Pikachu.png"></div><p>Hey, this is meLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum efficitur sed enim in mollis. Proin molestie libero id congue hendrerit. In hac habitasse platea dictumst. Aenean augue libero, scelerisque id sagittis et, tristique nec ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam congue maximus efficitur. Fusce malesuada, magna eu porttitor fermentum, lorem arcu fermentum mi, porta faucibus lorem mauris sed felis. Curabitur dignissim risus quam, rutrum congue tellus aliquet sit amet. Cras luctus ac lectus non sollicitudin. Sed dolor metus, tempor eleifend orci et, laoreet vulputate orci.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque vitae malesuada massa. Proin facilisis ligula sed turpis scelerisque, ut pellentesque felis pharetra. Praesent metus elit, semper non vehicula non, pharetra quis nunc. Phasellus purus tortor, commodo non eleifend ut, blandit in leo. Aliquam sollicitudin gravida tristique. Nulla convallis nibh id massa eleifend ullamcorper. Morbi ut eleifend nisl, nec tincidunt nunc. Donec facilisis nibh tellus, non scelerisque augue varius elementum. Cras cursus mollis lectus ac malesuada. Nulla bibendum ex malesuada, dignissim neque a, scelerisque ipsum. Etiam pretium gravida odio, ac pulvinar nulla vehicula vel. Vestibulum pellentesque neque purus, eu bibendum ligula euismod id. Cras eu tristique massa. Nunc blandit vulputate mi non maximus.</p>
</div>
Scroll is not work than try to use alternative this mouse wheel event it is work
$('.section1').click(function(){
$.fancybox({
type: 'inline',
href: '#fancy-about',
helpers : {
overlay : {
css : {
'background' : 'blue'
}
}
}
});
});
$(document).ready(function(){
$('body').scroll(function(){
alert('hey');
});
});
$(window).bind('mousewheel DOMMouseScroll', function(event){
alert('hey');
});
.parallax-window {
min-height: 400px; background: transparent;
}
body{
height:2000px;
}
.section1{
height:200px;
width:100%;
background:black;
}
#fancy-about{
display:none;
color:white;
width:500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.js"></script>
<div class="section1"></div>
<div id="fancy-about">
<p>Hey, this is meLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum efficitur sed enim in mollis. Proin molestie libero id congue hendrerit. In hac habitasse platea dictumst. Aenean augue libero, scelerisque id sagittis et, tristique nec ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam congue maximus efficitur. Fusce malesuada, magna eu porttitor fermentum, lorem arcu fermentum mi, porta faucibus lorem mauris sed felis. Curabitur dignissim risus quam, rutrum congue tellus aliquet sit amet. Cras luctus ac lectus non sollicitudin. Sed dolor metus, tempor eleifend orci et, laoreet vulputate orci.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque vitae malesuada massa. Proin facilisis ligula sed turpis scelerisque, ut pellentesque felis pharetra. Praesent metus elit, semper non vehicula non, pharetra quis nunc. Phasellus purus tortor, commodo non eleifend ut, blandit in leo. Aliquam sollicitudin gravida tristique. Nulla convallis nibh id massa eleifend ullamcorper. Morbi ut eleifend nisl, nec tincidunt nunc. Donec facilisis nibh tellus, non scelerisque augue varius elementum. Cras cursus mollis lectus ac malesuada. Nulla bibendum ex malesuada, dignissim neque a, scelerisque ipsum. Etiam pretium gravida odio, ac pulvinar nulla vehicula vel. Vestibulum pellentesque neque purus, eu bibendum ligula euismod id. Cras eu tristique massa. Nunc blandit vulputate mi non maximus.</p>
<div class="parallax-window" data-parallax="scroll" data-image-src="http://cdn.bulbagarden.net/upload/thumb/0/0d/025Pikachu.png/250px-025Pikachu.png"></div><p>Hey, this is meLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum efficitur sed enim in mollis. Proin molestie libero id congue hendrerit. In hac habitasse platea dictumst. Aenean augue libero, scelerisque id sagittis et, tristique nec ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam congue maximus efficitur. Fusce malesuada, magna eu porttitor fermentum, lorem arcu fermentum mi, porta faucibus lorem mauris sed felis. Curabitur dignissim risus quam, rutrum congue tellus aliquet sit amet. Cras luctus ac lectus non sollicitudin. Sed dolor metus, tempor eleifend orci et, laoreet vulputate orci.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque vitae malesuada massa. Proin facilisis ligula sed turpis scelerisque, ut pellentesque felis pharetra. Praesent metus elit, semper non vehicula non, pharetra quis nunc. Phasellus purus tortor, commodo non eleifend ut, blandit in leo. Aliquam sollicitudin gravida tristique. Nulla convallis nibh id massa eleifend ullamcorper. Morbi ut eleifend nisl, nec tincidunt nunc. Donec facilisis nibh tellus, non scelerisque augue varius elementum. Cras cursus mollis lectus ac malesuada. Nulla bibendum ex malesuada, dignissim neque a, scelerisque ipsum. Etiam pretium gravida odio, ac pulvinar nulla vehicula vel. Vestibulum pellentesque neque purus, eu bibendum ligula euismod id. Cras eu tristique massa. Nunc blandit vulputate mi non maximus.</p>
</div>
To make your code work, you have to move the scroll function into the click function:
$('.section1').click(function(){
$.fancybox({
type: 'inline',
href: '#fancy-about',
helpers : {
overlay : {
css : {
'background' : 'blue'
}
}
}
});
$('.fancybox-inner').bind('scroll',function() {
alert("ciao");
});
});
your fiddle updated
you have to call scroll function on fancybox aftershow for the work fine.
$('.section1').click(function(){
$.fancybox({
type: 'inline',
href: '#fancy-about',
helpers : {
overlay : {
css : {
'background' : 'blue'
}
}
},
afterShow: function() {
$( '.fancybox-inner' ).scroll(function(){
alert('hey');
});
}
});
});
Demo Fiddle
fiddle:https://jsfiddle.net/jzhang172/bft7fb6t/
THe parallax image doesn't show up on fancybox launch. When you resize the output window, the image will appear but it's not in the parallax fashion. What am I doing wrong?
$('.section1').click(function(){
$.fancybox({
type: 'inline',
href: '#fancy-about',
helpers : {
overlay : {
css : {
'background' : 'blue'
}
}
}
});
});
.parallax-window {
min-height: 400px; background: transparent;
}
.section1{
height:200px;
width:100%;
background:black;
}
#fancy-about{
display:none;
color:white;
width:500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.js"></script>
<div class="section1"></div>
<div id="fancy-about">
<p>Hey, this is meLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum efficitur sed enim in mollis. Proin molestie libero id congue hendrerit. In hac habitasse platea dictumst. Aenean augue libero, scelerisque id sagittis et, tristique nec ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam congue maximus efficitur. Fusce malesuada, magna eu porttitor fermentum, lorem arcu fermentum mi, porta faucibus lorem mauris sed felis. Curabitur dignissim risus quam, rutrum congue tellus aliquet sit amet. Cras luctus ac lectus non sollicitudin. Sed dolor metus, tempor eleifend orci et, laoreet vulputate orci.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque vitae malesuada massa. Proin facilisis ligula sed turpis scelerisque, ut pellentesque felis pharetra. Praesent metus elit, semper non vehicula non, pharetra quis nunc. Phasellus purus tortor, commodo non eleifend ut, blandit in leo. Aliquam sollicitudin gravida tristique. Nulla convallis nibh id massa eleifend ullamcorper. Morbi ut eleifend nisl, nec tincidunt nunc. Donec facilisis nibh tellus, non scelerisque augue varius elementum. Cras cursus mollis lectus ac malesuada. Nulla bibendum ex malesuada, dignissim neque a, scelerisque ipsum. Etiam pretium gravida odio, ac pulvinar nulla vehicula vel. Vestibulum pellentesque neque purus, eu bibendum ligula euismod id. Cras eu tristique massa. Nunc blandit vulputate mi non maximus.</p>
<div class="parallax-window" data-parallax="scroll" data-image-src="http://cdn.bulbagarden.net/upload/thumb/0/0d/025Pikachu.png/250px-025Pikachu.png"></div><p>Hey, this is meLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum efficitur sed enim in mollis. Proin molestie libero id congue hendrerit. In hac habitasse platea dictumst. Aenean augue libero, scelerisque id sagittis et, tristique nec ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam congue maximus efficitur. Fusce malesuada, magna eu porttitor fermentum, lorem arcu fermentum mi, porta faucibus lorem mauris sed felis. Curabitur dignissim risus quam, rutrum congue tellus aliquet sit amet. Cras luctus ac lectus non sollicitudin. Sed dolor metus, tempor eleifend orci et, laoreet vulputate orci.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque vitae malesuada massa. Proin facilisis ligula sed turpis scelerisque, ut pellentesque felis pharetra. Praesent metus elit, semper non vehicula non, pharetra quis nunc. Phasellus purus tortor, commodo non eleifend ut, blandit in leo. Aliquam sollicitudin gravida tristique. Nulla convallis nibh id massa eleifend ullamcorper. Morbi ut eleifend nisl, nec tincidunt nunc. Donec facilisis nibh tellus, non scelerisque augue varius elementum. Cras cursus mollis lectus ac malesuada. Nulla bibendum ex malesuada, dignissim neque a, scelerisque ipsum. Etiam pretium gravida odio, ac pulvinar nulla vehicula vel. Vestibulum pellentesque neque purus, eu bibendum ligula euismod id. Cras eu tristique massa. Nunc blandit vulputate mi non maximus.</p>
</div>
I'm using this code to make the sidebar fixed at a certain div while the user scrolls down. The problem is that I have to manually enter in a threshold number and this isn't always ideal since the position of the section may change or be inconsistent across various browsers and systems. I'm wondering if there is a way I can automatically have the sidebar become fixed once the user scrolls down and .Section2 hits the top.
Fiddle
http://jsfiddle.net/EvAdP/6/
HTML
<header>
I'm the header
</header>
<div id="container">
<aside id="sidebar">
<div class="section1">I'm a sidebar section</div>
<div class="Section2">I'm another sidebar section</div>
</aside>
<section id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis turpis turpis, dictum id sollicitudin eu, molestie ut tellus. Nam tincidunt mauris in erat vehicula adipiscing. Morbi cursus orci a nisl auctor nec porta eros consectetur. Vestibulum auctor congue mi, vitae molestie nisi faucibus vel. Ut et dui ut mauris posuere dignissim in et sapien. Duis a nulla ipsum. Duis accumsan porttitor justo at pretium. Aliquam quam urna, eleifend vitae consequat et, pharetra eu lectus. Etiam id magna mi. Donec pulvinar nibh in felis placerat condimentum consectetur enim iaculis. Integer et sapien justo, ac ullamcorper nisi. Praesent sed mauris non lacus pellentesque condimentum. Sed hendrerit consectetur nisi bibendum convallis. Pellentesque semper faucibus tortor malesuada dignissim.</p>
<p>Aliquam adipiscing commodo est, eu venenatis mi ullamcorper cursus. Integer vel magna in neque aliquet hendrerit. Mauris eros nisl, venenatis quis ultricies id, faucibus et mi. Nunc sit amet nulla odio. Phasellus quis eros id tortor imperdiet faucibus ac eu metus. Curabitur at feugiat dui. Vivamus imperdiet lectus id orci sodales sit amet eleifend ante tempus. Mauris vehicula elit eu dolor volutpat porttitor.</p>
<p>Praesent pretium convallis diam, sed faucibus dolor convallis eget. Pellentesque sollicitudin erat ac ligula viverra vel mollis diam tristique. Nulla tempus ligula ac dui fringilla consequat. Suspendisse accumsan volutpat semper. Morbi bibendum vehicula nibh id condimentum. Maecenas auctor mattis libero, ut suscipit tellus interdum quis. Nam eu dolor orci. Proin et tortor diam. Phasellus blandit leo ut elit faucibus varius. Donec condimentum congue lectus, sit amet gravida diam aliquet at.</p>
<p>Praesent eu libero sem. Phasellus elementum posuere velit, id aliquet ante elementum non. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus faucibus rutrum luctus. Suspendisse nec facilisis neque. Cras dui lacus, pellentesque at fermentum sollicitudin, aliquam et nisi. Proin eget sem diam, nec faucibus nulla. In nibh dolor, interdum at egestas a, dictum sed massa. Integer quis elit vitae enim lacinia tristique ac id purus. Pellentesque fermentum tempor sem sit amet venenatis. Nulla facilisi. Donec semper ultrices magna, posuere mattis turpis rhoncus ut.</p>
<p>Etiam porttitor erat sit amet odio egestas sit amet mollis magna convallis. Sed porttitor aliquet velit at placerat. Proin in turpis non velit gravida eleifend quis ac magna. Nunc sagittis, eros a pulvinar gravida, mauris urna viverra lorem, non posuere orci ligula vitae justo. Nulla neque erat, tempus at dapibus sit amet, scelerisque ac sapien. In in magna sapien, at auctor tellus. Donec nec turpis ligula, vitae scelerisque arcu.</p>
</section>
</div>
CSS
body {
margin:0;
}
header {
line-height:100px;
height:100px;
background-color:#F00;
}
#container {
position:relative;
}
#sidebar {
position:absolute;
background-color:#0F0;
}
#sidebar .section1 {
background: blue;
height: 150px;
width: 80px;
}
.Section2.fixed {
position:fixed;
top:0;
}
#sidebar .Section2 {
background: pink;
height: 150px;
width: 80px;
}
#sidebar.fixed {
position:fixed;
top:0;
}
#content {
margin-left:100px;
}
p:first-child {
margin-top:0;
}
JS
$(window).scroll(function () {
var threshold = 250;
if ($(window).scrollTop() >= threshold)
$('.Section2').addClass('fixed');
else
$('.Section2').removeClass('fixed');
});
Instead of specifying the threshold value try this
var threshold = $('.Section2').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() >= threshold)
$('.Section2').addClass('fixed');
else
$('.Section2').removeClass('fixed');
});
DEMO
Further to our discussions I thought I would post an alternative to the accepted solution that will work with flexible content.
It simply gets Section2 offset each time the scroll event is fired (but only if its not already .fixed):
EDIT: simply check that threshold is greater than zero:
var $Section2 = $('.Section2');
$(window).scroll(function () {
var threshold = $Section2.offset().top;
if (threshold>0 && $(window).scrollTop() >= threshold){
$Section2.addClass('fixed');
} else {
$Section2.removeClass('fixed');
}
});
DEMO