So I created a sticky nav on scroll which works fine until it becomes a drop down menu. The link backgrounds become invisible and no longer push the content down the page. Have a look at my demo http://codepen.io/Reece_Dev/pen/VpXVMq it's fine until its 500px wide.
$(".burger-button").on("click", function(){
$("nav ul").toggleClass("showing");
});
$("nav").wrap('<div class="nav-placeholder"></div>');
$(".nav-placeholder").height($("nav").outerHeight());
jQuery(document).ready(function() {
var navOffset = jQuery('nav').offset().top;
jQuery(window).scroll(function(){
var scrollPos = jQuery(window).scrollTop();
if (scrollPos >= navOffset){
jQuery("nav").addClass("fixed");
} else{
jQuery("nav").removeClass("fixed");
}
});
});
*{
margin: 0;
padding: 0;
}
header{
width: 1200px;
margin: 0 auto;
background-color: #0000aa;
font-size: 5em;
text-align: center;
}
nav{
width: 1200px;
margin: 0 auto;
background-color: #0000ff;
}
nav ul{
overflow: hidden;
color: #fff;
text-align: center;
-webkit-transition: max-height 0.4s;
-ms-transition: max-height 0.4s;
-moz-transition: max-height 0.4s;
-o-transition: max-height 0.4s;
transition: max-height 0.4s;
}
nav ul li{
display: inline-block;
padding: 1em 2em;
}
nav ul li a{
color: inherit;
text-decoration: none;
font-size: 1.5em;
}
section{
width: 1200px;
margin: 0 auto;
line-height: 1.5em;
font-size: 1em;
text-align: center;
padding-top: 2em;
background-color: #4488ff;
}
.burger-button{
width: 100%;
background-color: white;
text-align: right;
box-sizing: border-box;
padding: 1em;
cursor: pointer;
display: none;
}
.fixed{
position: fixed;
top: 0;
left: 0;
right: 0;
}
#media screen and (max-width:1200px){
header{
width: 100%;
}
nav{
width: 100%;
}
section{
width: 100%;
}
}
#media screen and (max-width: 500px){
nav ul{
max-height: 0;
}
.showing{
max-height: 13em;
}
nav ul li{
box-sizing: border-box;
width: 100%;
}
.burger-button{
display: inline-block;
}
}
<script src="https://use.fontawesome.com/7c396dc5cb.js"></script>
<header>Logo</header>
<nav>
<div class="burger-button">
<i class="fa fa-bars fa-2x" aria-hidden="true"></i>
</div>
<ul>
<li>Welcome</li>
<li>Menu</li>
<li>Opening Times</li>
</ul>
</nav>
<section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis purus libero, fringilla non tristique at, vestibulum id magna. Ut quis porttitor ligula. Duis metus dolor, dictum vehicula ultrices vel, tristique sed dui. Nunc scelerisque diam erat, in lobortis elit convallis nec. Nam varius neque nibh, eu ultrices elit mattis id. Cras tellus libero, ornare ut lectus vel, vestibulum ultrices odio. Sed a efficitur ipsum, non pellentesque orci. Nam et quam ac odio lacinia elementum.
Quisque accumsan tempus efficitur. In sit amet ornare libero. Nunc id vehicula sapien. Nullam venenatis sapien id tortor tristique mollis. Pellentesque malesuada congue luctus. Phasellus venenatis bibendum sapien vitae ornare. Nunc ac varius ligula. Praesent dapibus justo sed nisi tristique, ac tincidunt turpis laoreet. Nulla facilisi.
Sed vehicula sapien justo, nec accumsan est vulputate nec. Vivamus dapibus eget risus ut sollicitudin. Fusce fermentum varius est, non condimentum sem interdum eget. Aenean nec mi augue. Praesent nisl ante, tincidunt in neque eu, pulvinar scelerisque dolor. Fusce elementum rhoncus dui, ut molestie purus posuere sed. Proin scelerisque purus id euismod tempus. Duis scelerisque magna ex, quis congue erat efficitur non. Nam condimentum, risus in lacinia tristique, erat est cursus lacus, porttitor scelerisque nulla ipsum a dolor. Aliquam erat volutpat. Suspendisse ut elit mauris. Quisque diam enim, scelerisque at vulputate a, pellentesque nec velit. Quisque enim nunc, suscipit dignissim dignissim ut, interdum id tellus. Nullam viverra metus nec ex condimentum, tincidunt venenatis arcu sollicitudin.
Nulla ut ullamcorper mauris, vel vehicula metus. Nam scelerisque mollis enim, nec pulvinar diam pulvinar at. Praesent sapien erat, suscipit ac erat et, suscipit efficitur nulla. Cras tempor sed lacus a cursus. Mauris interdum magna id leo pretium venenatis. Vestibulum luctus vel nulla a faucibus. Proin eu metus urna. Suspendisse eget pretium felis. Sed et justo ut nisi bibendum laoreet. Cras sed magna in neque egestas egestas. In blandit pretium libero, a lacinia diam finibus non. Ut at efficitur massa. Ut a iaculis est, sed tristique risus. Donec bibendum urna nec eros condimentum porta. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Ut faucibus sem in velit volutpat dapibus. Nulla laoreet purus vitae suscipit ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed ut arcu orci. Aenean sodales eu ex a posuere. Proin vitae ante sit amet mauris laoreet consectetur non ut elit. Vivamus dapibus vestibulum diam eget condimentum. Donec interdum risus id nibh posuere aliquet. Fusce sed ante et ex congue ultrices vel ac lacus. Suspendisse venenatis eget mi quis dapibus. Aenean id metus at justo accumsan tincidunt. Ut sollicitudin turpis eget mollis pretium. Suspendisse semper libero sit amet consectetur malesuada. Ut dolor justo, suscipit egestas nisi quis, scelerisque cursus leo. Integer sed turpis bibendum, dignissim quam et, vestibulum mauris.
Cras faucibus maximus mi nec sagittis. Ut ac augue in dolor hendrerit euismod posuere vitae leo. Nam ut ipsum mollis, placerat neque id, venenatis ipsum. Donec ut dignissim ligula. Vestibulum sapien purus, ultricies sed ante tristique, consectetur finibus sem. Donec dictum, ex efficitur lobortis elementum, est nisl imperdiet massa, luctus dignissim neque lacus vel nisi. Cras sollicitudin quis velit quis commodo. In pulvinar molestie leo, at maximus lacus. Etiam venenatis, ex a venenatis vestibulum, tortor urna pulvinar sem, malesuada porttitor orci tellus a nunc. Sed non feugiat elit. In ac venenatis magna. Nunc erat sem, dapibus in sem at, interdum pharetra nisi.
Vivamus quis fringilla lorem, vitae interdum risus. Cras id maximus lorem. Fusce venenatis est massa, quis feugiat nisi sagittis nec. Phasellus sed velit enim. Donec ac lectus ac libero condimentum molestie. Curabitur fermentum porttitor efficitur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin blandit magna quis ligula euismod viverra.
Aenean libero felis, varius quis sapien nec, blandit congue ligula. Curabitur risus diam, semper ac libero in, feugiat pellentesque dui. Nunc blandit lectus id justo dapibus, vel luctus arcu cursus. Integer urna felis, mollis ac auctor ut, tempor ut lorem. Nulla tincidunt sem efficitur facilisis consequat. Duis faucibus non libero nec dignissim. Etiam molestie est nec sapien cursus, quis rutrum nulla semper. Vestibulum tortor turpis, vestibulum ac dictum vel, sollicitudin vitae metus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vitae aliquet eros, ut tincidunt lacus. Pellentesque orci leo, ornare vitae felis quis, feugiat vestibulum mi. Nam semper pharetra tempus. Vivamus vel mauris tincidunt lorem varius gravida sed eu metus. Suspendisse aliquet libero nec urna bibendum ultrices. Aenean et ligula sapien. Maecenas sit amet imperdiet neque. Donec maximus semper velit, at aliquam quam tempor sed. Proin tincidunt nisi tortor, nec vulputate nulla ullamcorper vitae. Donec sodales enim eget massa consequat aliquet. Nam erat metus, molestie eget tincidunt in, consequat eu nulla. In ut tellus ut quam facilisis dapibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis purus libero, fringilla non tristique at, vestibulum id magna. Ut quis porttitor ligula. Duis metus dolor, dictum vehicula ultrices vel, tristique sed dui. Nunc scelerisque diam erat, in lobortis elit convallis nec. Nam varius neque nibh, eu ultrices elit mattis id. Cras tellus libero, ornare ut lectus vel, vestibulum ultrices odio. Sed a efficitur ipsum, non pellentesque orci. Nam et quam ac odio lacinia elementum.
Quisque accumsan tempus efficitur. In sit amet ornare libero. Nunc id vehicula sapien. Nullam venenatis sapien id tortor tristique mollis. Pellentesque malesuada congue luctus. Phasellus venenatis bibendum sapien vitae ornare. Nunc ac varius ligula. Praesent dapibus justo sed nisi tristique, ac tincidunt turpis laoreet. Nulla facilisi.
Sed vehicula sapien justo, nec accumsan est vulputate nec. Vivamus dapibus eget risus ut sollicitudin. Fusce fermentum varius est, non condimentum sem interdum eget. Aenean nec mi augue. Praesent nisl ante, tincidunt in neque eu, pulvinar scelerisque dolor. Fusce elementum rhoncus dui, ut molestie purus posuere sed. Proin scelerisque purus id euismod tempus. Duis scelerisque magna ex, quis congue erat efficitur non. Nam condimentum, risus in lacinia tristique, erat est cursus lacus, porttitor scelerisque nulla ipsum a dolor. Aliquam erat volutpat. Suspendisse ut elit mauris. Quisque diam enim, scelerisque at vulputate a, pellentesque nec velit. Quisque enim nunc, suscipit dignissim dignissim ut, interdum id tellus. Nullam viverra metus nec ex condimentum, tincidunt venenatis arcu sollicitudin.
Nulla ut ullamcorper mauris, vel vehicula metus. Nam scelerisque mollis enim, nec pulvinar diam pulvinar at. Praesent sapien erat, suscipit ac erat et, suscipit efficitur nulla. Cras tempor sed lacus a cursus. Mauris interdum magna id leo pretium venenatis. Vestibulum luctus vel nulla a faucibus. Proin eu metus urna. Suspendisse eget pretium felis. Sed et justo ut nisi bibendum laoreet. Cras sed magna in neque egestas egestas. In blandit pretium libero, a lacinia diam finibus non. Ut at efficitur massa. Ut a iaculis est, sed tristique risus. Donec bibendum urna nec eros condimentum porta. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Ut faucibus sem in velit volutpat dapibus. Nulla laoreet purus vitae suscipit ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed ut arcu orci. Aenean sodales eu ex a posuere. Proin vitae ante sit amet mauris laoreet consectetur non ut elit. Vivamus dapibus vestibulum diam eget condimentum. Donec interdum risus id nibh posuere aliquet. Fusce sed ante et ex congue ultrices vel ac lacus. Suspendisse venenatis eget mi quis dapibus. Aenean id metus at justo accumsan tincidunt. Ut sollicitudin turpis eget mollis pretium. Suspendisse semper libero sit amet consectetur malesuada. Ut dolor justo, suscipit egestas nisi quis, scelerisque cursus leo. Integer sed turpis bibendum, dignissim quam et, vestibulum mauris.
Cras faucibus maximus mi nec sagittis. Ut ac augue in dolor hendrerit euismod posuere vitae leo. Nam ut ipsum mollis, placerat neque id, venenatis ipsum. Donec ut dignissim ligula. Vestibulum sapien purus, ultricies sed ante tristique, consectetur finibus sem. Donec dictum, ex efficitur lobortis elementum, est nisl imperdiet massa, luctus dignissim neque lacus vel nisi. Cras sollicitudin quis velit quis commodo. In pulvinar molestie leo, at maximus lacus. Etiam venenatis, ex a venenatis vestibulum, tortor urna pulvinar sem, malesuada porttitor orci tellus a nunc. Sed non feugiat elit. In ac venenatis magna. Nunc erat sem, dapibus in sem at, interdum pharetra nisi.
Vivamus quis fringilla lorem, vitae interdum risus. Cras id maximus lorem. Fusce venenatis est massa, quis feugiat nisi sagittis nec. Phasellus sed velit enim. Donec ac lectus ac libero condimentum molestie. Curabitur fermentum porttitor efficitur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin blandit magna quis ligula euismod viverra.
Aenean libero felis, varius quis sapien nec, blandit congue ligula. Curabitur risus diam, semper ac libero in, feugiat pellentesque dui. Nunc blandit lectus id justo dapibus, vel luctus arcu cursus. Integer urna felis, mollis ac auctor ut, tempor ut lorem. Nulla tincidunt sem efficitur facilisis consequat. Duis faucibus non libero nec dignissim. Etiam molestie est nec sapien cursus, quis rutrum nulla semper. Vestibulum tortor turpis, vestibulum ac dictum vel, sollicitudin vitae metus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vitae aliquet eros, ut tincidunt lacus. Pellentesque orci leo, ornare vitae felis quis, feugiat vestibulum mi. Nam semper pharetra tempus. Vivamus vel mauris tincidunt lorem varius gravida sed eu metus. Suspendisse aliquet libero nec urna bibendum ultrices. Aenean et ligula sapien. Maecenas sit amet imperdiet neque. Donec maximus semper velit, at aliquam quam tempor sed. Proin tincidunt nisi tortor, nec vulputate nulla ullamcorper vitae. Donec sodales enim eget massa consequat aliquet. Nam erat metus, molestie eget tincidunt in, consequat eu nulla. In ut tellus ut quam facilisis dapibus.
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Is that your need ? => http://codepen.io/anon/pen/GWdJjy
nav {
position: relative; (...)
}
simply add relative position on "nav" tag element in your CSS ;)
You need to add position: relative.
The element will be positioned relative to the browser window/viewport.
nav{
width: 1200px;
margin: 0 auto;
posistion: relative;
}
http://codepen.io/Reece_Dev/pen/VpXVMq
Related
Is it possible to prevent the "auto scroll" to top event happening whenever you dynamically switch from overflow:hidden to overflow:auto?
Here's a demo of the issue: https://stackblitz.com/edit/angular-ivy-6v9nyc. If you scroll down to the end and click on the Toggle nested scrollbar button, you automatically get taken back to the top of the page.
I don't want this to happen. I want to remain at the same scroll position.
Here's my code:
app.component.css
.showcase-no-scrollbar {
overflow-y: hidden;
overflow-x: hidden;
}
.showcase-scrollbar {
overflow-y: auto;
overflow-x: hidden;
height: calc(100vh - 115px) !important;
overscroll-behavior: none;
}
.showcase-scrollbar::-webkit-scrollbar {
width: 0.31rem;
background: #f9fbfd;
}
.showcase-scrollbar::-webkit-scrollbar-thumb {
background: #959da5 !important;
}
app.component.html
<div class="navbar">For your reading pleasure</div>
<div
class="container-fluid showcase"
[ngClass]="showScrollbar ? 'showcase-no-scrollbar' : 'showcase-scrollbar'"
>
<div class="row justify-content-between">
<div
class="col-9"
[attr.data-cy]="'showcase'"
[ngClass]="showScrollbar ? 'showcase-scrollbar' : 'showcase-no-scrollbar'"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices
tellus id magna maximus porta. Fusce pretium nibh nisl, sodales elementum
nisi tincidunt at. Maecenas est tellus, dignissim et mattis sed, dictum et
ex. Nunc purus nisl, tristique eu mi mollis, interdum pretium leo. Cras
venenatis dui at tellus porttitor, sed pulvinar nibh posuere. Duis
placerat sapien eu leo pulvinar, sit amet convallis tellus finibus. Ut et
ipsum et nibh feugiat tempor. Phasellus vehicula arcu sit amet velit
maximus, ac ullamcorper enim auctor. Praesent at condimentum nisl. Fusce
ultricies massa luctus, imperdiet erat vitae, sagittis erat. Nullam
gravida, libero a auctor condimentum, metus magna feugiat erat, eget
ullamcorper diam justo in ipsum. Mauris neque mauris, congue a
pellentesque a, molestie non turpis. Suspendisse at tincidunt libero.
Nulla vitae est commodo, sodales metus sit amet, sodales urna. Quisque ex
urna, luctus eu ultricies nec, imperdiet ac enim. Vestibulum tincidunt
rutrum mi, id pharetra nunc sodales nec. Aliquam vulputate metus eros, ac
rutrum magna venenatis id. Fusce dictum malesuada suscipit. Quisque luctus
consequat venenatis. Duis iaculis vestibulum quam. Sed cursus dolor eget
dui interdum, ac vestibulum ipsum blandit. In suscipit neque vitae
malesuada rutrum. Vivamus quis mauris mi. Nunc tristique arcu gravida
neque commodo, eu facilisis augue tempus. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Nam
scelerisque nisl id est semper, vel mollis massa iaculis. Integer eu
tortor vitae nisi pharetra elementum vel eget quam. Donec facilisis, risus
et tristique sollicitudin, est est feugiat nibh, dapibus consectetur nibh
ligula eget erat. Mauris venenatis sodales lectus, id auctor ligula
posuere condimentum. Integer et nulla et enim lacinia scelerisque at in
dui. Donec nec massa nisi. Donec diam mauris, hendrerit ut sem et,
malesuada varius eros. Nam blandit tempor erat, nec congue augue
consectetur at. Nam viverra dictum elementum. Mauris malesuada ipsum eget
enim posuere, id consequat mi eleifend. Aenean feugiat diam in orci
sagittis pellentesque. Nunc gravida condimentum ipsum, a pretium erat
egestas et. Curabitur tempus convallis neque sollicitudin volutpat. Ut
lacinia, mi lobortis vehicula egestas, nibh lorem pretium odio, nec
feugiat augue turpis quis purus. Morbi maximus congue lacus, ac tempus
enim viverra ac. Ut quis efficitur dui. Suspendisse sagittis justo non
enim vulputate volutpat. Nunc sollicitudin lectus eget varius venenatis.
Morbi elementum imperdiet eros, vel suscipit ex mattis vel. Morbi ipsum
libero, iaculis vitae orci in, feugiat euismod lacus. Ut molestie et nibh
non vehicula. Mauris vitae justo risus. Nam orci mi, volutpat quis
vestibulum sed, consequat vel nibh. Mauris nec ultricies dui, eu lacinia
mi. Ut quis ex sit amet metus luctus vestibulum. Cras at accumsan mi.
Proin quis sagittis augue. Proin eget convallis est, non suscipit tortor.
Pellentesque libero purus, efficitur vel egestas vel, dictum vel eros.
<br />
<br />
<button
type="button"
class="btn btn-primary"
(click)="toggleNestedScrollbar()"
>
Toggle nested scrollbar
</button>
</div>
<div
class="col-3 showcase-course-content-sidebar"
id="shepherd-body-showcase-course-content-sidebar"
>
test
</div>
</div>
</div>
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 have two javascript snippets below. They both do the job they're meant to do, except that now clicking .info in the second snippet triggers the classes being added to the body as per the first snippet, causing unwanted flickering. Is it possible to make it so that the second snippet doesn't add or remove classes? Or even combine the two somehow to avoid this issue? Thanks in advance for all help!
I have added the full code below. As you can see, if you click one of the red squares without scrolling down, there is no flicker. Once you scroll down and click on them a flicker occurs.
$(window).scroll(function () {
var elem = $('#object');
var header_height = (window.innerWidth <= 999) ? 50 : 100;
var header_top = elem.offset().top;
var current_top = $(this).scrollTop();
if (current_top > header_height && !elem.hasClass('fixed-object'))
{
elem.addClass('fixed-object');
$('body').addClass('fixed-padding');
}
else if(current_top <= header_height && elem.hasClass('fixed-object'))
{
elem.removeClass('fixed-object');
$('body').removeClass('fixed-padding');
}
});
#charset "UTF-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
body {
background: #F4F5F9;
}
.clear {
clear: both;
}
/*------------------------------------*\
STRUCTURE
\*------------------------------------*/
.wrapper {
max-width: 1020px;
margin: 0 auto;
}
/*------------------------------------*\
MAIN OBJECT DETAILS AREA
\*------------------------------------*/
section#object, section#comparison {
background: #fff;
border-radius: 5px;
box-shadow: 0 10px 30px 0 rgba(0,0,0,0.05);
}
section#object {
min-height: 200px;
border: 1px solid #000;
}
.fixed-object {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 100;
width: 1020px;
margin: 0 auto;
border-radius: 0;
}
section#object {
height:209px;
transition: height 0.2s, width 0.2s;
}
/*------------------------------------*\
CONTENT AREA
\*------------------------------------*/
.info {
width: 17px;
height: 17px;
background: #ff0000;
display: inline-block;
text-indent: 999999px;
overflow: hidden;
background-repeat: no-repeat;
}
.info:hover {
opacity: 0.7;
filter: alpha(opacity=70); /* For IE8 and earlier */
}
.info:active, .info:focus {
opacity: 0.8;
filter: alpha(opacity=80); /* For IE8 and earlier */
}
.infobox {
background: #FFF;
border: 1px solid #000;
width:300px;
z-index: 99;
border-radius: 2px;
padding: 8px 10px;
}
.infobox:after, .infobox:before {
top: 100%;
left: 80%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.infobox:after {
border-color: rgba(255, 255, 255, 0);
border-top-color: #fff;
border-width: 5px;
margin-left: -5px;
}
.infobox:before {
border-color: rgba(0, 0, 0, 0);
border-top-color: #000;
border-width: 6px;
margin-left: -6px;
}
.infobox p {
font-size: 11px;
display: inline-block !Important;
white-space: normal;
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<link type="text/css" rel="stylesheet" href="bug_flicker.css"/>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<style type="text/css">
.lightbox, .infobox {
display: none;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!--/ HEADER-->
<main>
<div class="wrapper">
<!--MAIN OBJECT-->
<section id="object">
</section>
<!--/ MAIN OBJECT-->
<!--CONTENT-->
<section id="comparison">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra cursus sollicitudin. Läs mer<div class="infobox LB2-box"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ullamcorper scelerisque arcu sed suscipit. Proin sodales enim enim, vitae ullamcorper tellus hendrerit ac.</p></div>Integer dignissim placerat nulla, vitae molestie sem egestas at. Curabitur et mauris nisi. Integer condimentum aliquam risus venenatis cursus. Vestibulum et elit dui. Fusce sed turpis quam. Phasellus sit amet massa semper, maximus augue pulvinar, vulputate lorem. Phasellus luctus augue tortor. Sed semper sapien nec nisl blandit, sed sollicitudin quam sagittis. Praesent auctor dui et neque porta, vitae tempus dui feugiat. Vivamus maximus placerat consectetur. Donec a risus mattis, aliquam velit efficitur, venenatis massa. Etiam pellentesque molestie mi a molestie. Proin finibus lectus ac leo feugiat pretium. Cras tincidunt vel lorem ut vulputate. Quisque sit amet ornare massa.
Suspendisse convallis justo velit, sit amet dictum orci mattis ac. Sed a tellus id massa sagittis faucibus. Aenean molestie justo hendrerit, porta ligula non, iaculis urna. Sed sed quam feugiat, tristique lectus sit amet, posuere ex. Nam faucibus ultrices magna, vel tristique nisi. Nulla erat lectus, accumsan at lobortis ac, semper sit amet justo. Praesent convallis felis turpis, eget auctor libero aliquam semper.
Mauris aliquet diam fringilla ipsum auctor, nec feugiat massa tincidunt. Sed vel facilisis nisi. Suspendisse sit amet orci mattis, aliquet diam vitae, volutpat tortor. Etiam sed imperdiet metus. Nam eget porttitor erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras laoreet semper ultrices. Nunc et libero ligula. Vivamus interdum rutrum mauris. Nullam aliquam pretium nunc et ornare.
Aenean aliquam tempor nisi ut scelerisque. Mauris sagittis tortor lectus, at ornare libero imperdiet quis. Donec rutrum dictum mauris, eu eleifend neque volutpat nec. Vestibulum sodales molestie fringilla. Sed eget quam erat. Integer scelerisque volutpat urna sed convallis. Nunc mollis tempus nunc. Maecenas consequat ligula id neque malesuada, id vulputate eros lobortis. Proin aliquet fringilla massa at placerat. Praesent eu ultrices sem, vitae finibus nibh.
Pellentesque diam neque, ultrices sit amet varius quis, vulputate sed mi. Nunc nibh ante, cursus non aliquam non, iaculis sit amet turpis. Quisque molestie aliquam accumsan. Phasellus a eros neque. Phasellus at erat vel enim gravida bibendum. Nulla vel fermentum nisl. Aliquam lectus odio, elementum vel gravida at, vehicula quis tortor. In vehicula, turpis et ultricies mollis, dolor magna iaculis turpis, eu fringilla nisi nisl a diam. Nullam et pharetra diam. Quisque eleifend leo ac risus cursus, id sollicitudin odio fermentum. Duis mattis mauris erat, eu eleifend enim lobortis id. Fusce ut leo nec nibh dignissim commodo. Pellentesque sagittis, velit vitae pharetra posuere, nunc lorem pulvinar sem, eget mattis tellus odio tempor ante. Praesent a consectetur magna. Phasellus at vestibulum tortor, ut vehicula ligula.
Läs mer<div class="infobox LB2-box"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ullamcorper scelerisque arcu sed suscipit. Proin sodales enim enim, vitae ullamcorper tellus hendrerit ac.</p></div>
Ut tempor rhoncus diam in consectetur. Vestibulum ex lacus, fermentum a gravida et, ultricies eget orci. Maecenas commodo risus eu purus varius hendrerit. Nam ultricies elementum magna quis vulputate. Aenean sit amet porta mauris, a mollis mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam ac fringilla diam. Sed suscipit arcu vel pharetra consequat. Suspendisse blandit dapibus arcu, imperdiet mollis lorem faucibus vitae. Quisque id est et turpis euismod pharetra. Donec tempus scelerisque ullamcorper. Fusce a ipsum a lacus iaculis interdum id non massa. Fusce vestibulum elit a facilisis placerat.
Mauris eros sapien, scelerisque vitae aliquam sed, blandit ut orci. Suspendisse at dui et lectus pretium sagittis. Proin ac mi vel ligula sodales gravida. Nulla ultricies nisl massa, in vulputate massa fringilla at. Etiam id tristique leo. Quisque et mi non elit molestie eleifend et nec risus. Praesent vestibulum vestibulum ante.
Aliquam consectetur risus nec lectus efficitur, non fringilla sem ultricies. Nunc dapibus consequat ante sit amet pharetra. Nulla fermentum purus convallis magna rutrum, venenatis eleifend tellus tristique. Vivamus vel aliquet leo, a venenatis massa. Nunc tincidunt gravida dolor, ut euismod sapien mattis eget. Donec vel justo purus. Morbi rhoncus elementum elit vitae iaculis. Suspendisse imperdiet ex massa, sed sagittis quam pretium in. Donec ut scelerisque dolor. Quisque nec nunc ac tortor dapibus suscipit. Etiam auctor et lectus ac aliquet. Praesent aliquet ultricies ullamcorper. Suspendisse tincidunt lacus nec arcu pharetra, sed malesuada augue commodo. Vestibulum accumsan dui nec lectus posuere blandit. Sed a leo convallis, ullamcorper mauris quis, sodales velit. Suspendisse scelerisque ultricies dictum.
Läs mer<div class="infobox LB2-box"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ullamcorper scelerisque arcu sed suscipit. Proin sodales enim enim, vitae ullamcorper tellus hendrerit ac.</p></div>
Nunc egestas sem ut augue ultricies suscipit. Aenean non pharetra purus. Maecenas nec orci diam. Etiam ultrices luctus velit, nec sagittis sapien. Morbi aliquam magna sed maximus luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum lectus dolor, placerat sit amet sem sed, suscipit ultrices dui. Nulla dictum porta arcu et sodales. Donec dictum fringilla nibh aliquam venenatis. Pellentesque vel sollicitudin erat, et fermentum lorem. Maecenas non mollis arcu, a ullamcorper enim. Phasellus nec vulputate urna. Aenean ac ligula laoreet, vestibulum nisl a, ultrices ligula. Nam at tincidunt mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac tortor porta, porta augue a, eleifend nulla.
Integer laoreet dapibus ligula, sed tincidunt odio. Praesent sed sagittis elit. Donec urna magna, viverra sit amet porttitor vel, aliquam ac risus. Mauris ac fringilla odio, a pellentesque magna. Donec ultrices sapien id felis sollicitudin, sed malesuada leo condimentum. Curabitur sit amet luctus turpis. Praesent ornare enim a finibus posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra cursus sollicitudin. Integer dignissim placerat nulla, vitae molestie sem egestas at. Curabitur et mauris nisi. Integer condimentum aliquam risus venenatis cursus. Vestibulum et elit dui. Fusce sed turpis quam. Phasellus sit amet massa semper, maximus augue pulvinar, vulputate lorem. Phasellus luctus augue tortor. Sed semper sapien nec nisl blandit, sed sollicitudin quam sagittis. Praesent auctor dui et neque porta, vitae tempus dui feugiat. Vivamus maximus placerat consectetur. Donec a risus mattis, aliquam velit efficitur, venenatis massa. Etiam pellentesque molestie mi a molestie. Proin finibus lectus ac leo feugiat pretium. Cras tincidunt vel lorem ut vulputate. Quisque sit amet ornare massa.
Suspendisse convallis justo velit, sit amet dictum orci mattis ac. Sed a tellus id massa sagittis faucibus. Aenean molestie justo hendrerit, porta ligula non, iaculis urna. Sed sed quam feugiat, tristique lectus sit amet, posuere ex. Nam faucibus ultrices magna, vel tristique nisi. Nulla erat lectus, accumsan at lobortis ac, semper sit amet justo. Praesent convallis felis turpis, eget auctor libero aliquam semper.
Mauris aliquet diam fringilla ipsum auctor, nec feugiat massa tincidunt. Sed vel facilisis nisi. Suspendisse sit amet orci mattis, aliquet diam vitae, volutpat tortor. Etiam sed imperdiet metus. Nam eget porttitor erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras laoreet semper ultrices. Nunc et libero ligula. Vivamus interdum rutrum mauris. Nullam aliquam pretium nunc et ornare.
Aenean aliquam tempor nisi ut scelerisque. Mauris sagittis tortor lectus, at ornare libero imperdiet quis. Donec rutrum dictum mauris, eu eleifend neque volutpat nec. Vestibulum sodales molestie fringilla. Sed eget quam erat. Integer scelerisque volutpat urna sed convallis. Nunc mollis tempus nunc. Maecenas consequat ligula id neque malesuada, id vulputate eros lobortis. Proin aliquet fringilla massa at placerat. Praesent eu ultrices sem, vitae finibus nibh.
Pellentesque diam neque, ultrices sit amet varius quis, vulputate sed mi. Nunc nibh ante, cursus non aliquam non, iaculis sit amet turpis. Quisque molestie aliquam accumsan. Phasellus a eros neque. Phasellus at erat vel enim gravida bibendum. Nulla vel fermentum nisl. Aliquam lectus odio, elementum vel gravida at, vehicula quis tortor. In vehicula, turpis et ultricies mollis, dolor magna iaculis turpis, eu fringilla nisi nisl a diam. Nullam et pharetra diam. Quisque eleifend leo ac risus cursus, id sollicitudin odio fermentum. Duis mattis mauris erat, eu eleifend enim lobortis id. Fusce ut leo nec nibh dignissim commodo. Pellentesque sagittis, velit vitae pharetra posuere, nunc lorem pulvinar sem, eget mattis tellus odio tempor ante. Praesent a consectetur magna. Phasellus at vestibulum tortor, ut vehicula ligula.
Ut tempor rhoncus diam in consectetur. Vestibulum ex lacus, fermentum a gravida et, ultricies eget orci. Maecenas commodo risus eu purus varius hendrerit. Nam ultricies elementum magna quis vulputate. Aenean sit amet porta mauris, a mollis mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam ac fringilla diam. Sed suscipit arcu vel pharetra consequat. Suspendisse blandit dapibus arcu, imperdiet mollis lorem faucibus vitae. Quisque id est et turpis euismod pharetra. Donec tempus scelerisque ullamcorper. Fusce a ipsum a lacus iaculis interdum id non massa. Fusce vestibulum elit a facilisis placerat.
Mauris eros sapien, scelerisque vitae aliquam sed, blandit ut orci. Suspendisse at dui et lectus pretium sagittis. Proin ac mi vel ligula sodales gravida. Nulla ultricies nisl massa, in vulputate massa fringilla at. Etiam id tristique leo. Quisque et mi non elit molestie eleifend et nec risus. Praesent vestibulum vestibulum ante.
Aliquam consectetur risus nec lectus efficitur, non fringilla sem ultricies. Nunc dapibus consequat ante sit amet pharetra. Nulla fermentum purus convallis magna rutrum, venenatis eleifend tellus tristique. Vivamus vel aliquet leo, a venenatis massa. Nunc tincidunt gravida dolor, ut euismod sapien mattis eget. Donec vel justo purus. Morbi rhoncus elementum elit vitae iaculis. Suspendisse imperdiet ex massa, sed sagittis quam pretium in. Donec ut scelerisque dolor. Quisque nec nunc ac tortor dapibus suscipit. Etiam auctor et lectus ac aliquet. Praesent aliquet ultricies ullamcorper. Suspendisse tincidunt lacus nec arcu pharetra, sed malesuada augue commodo. Vestibulum accumsan dui nec lectus posuere blandit. Sed a leo convallis, ullamcorper mauris quis, sodales velit. Suspendisse scelerisque ultricies dictum.
Nunc egestas sem ut augue ultricies suscipit. Aenean non pharetra purus. Maecenas nec orci diam. Etiam ultrices luctus velit, nec sagittis sapien. Morbi aliquam magna sed maximus luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum lectus dolor, placerat sit amet sem sed, suscipit ultrices dui. Nulla dictum porta arcu et sodales. Donec dictum fringilla nibh aliquam venenatis. Pellentesque vel sollicitudin erat, et fermentum lorem. Maecenas non mollis arcu, a ullamcorper enim. Phasellus nec vulputate urna. Aenean ac ligula laoreet, vestibulum nisl a, ultrices ligula. Nam at tincidunt mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac tortor porta, porta augue a, eleifend nulla.
Integer laoreet dapibus ligula, sed tincidunt odio. Praesent sed sagittis elit. Donec urna magna, viverra sit amet porttitor vel, aliquam ac risus. Mauris ac fringilla odio, a pellentesque magna. Donec ultrices sapien id felis sollicitudin, sed malesuada leo condimentum. Curabitur sit amet luctus turpis. Praesent ornare enim a finibus posuere.
</section>
<!--/ CONTENT-->
</div>
</main>
</body>
<script>
$('.infobox').hide();
$('a.info').click(function() {
console.log($(this).index('a'));
var $div = $('.infobox').eq($(this).index('a.info'));
$div.toggle();
$('.infobox').not($div).hide();
});
</script>
<script>
$(document).ready(function() {
$(".info").click(function(event){
$('html, body').animate({scrollTop: '+=0px'}, 1);
});
});
</script>
</html>
$(window).scroll(function() {
var elem = $('#object');
var header_height = (window.innerWidth <= 999) ? 50 : 100;
var header_top = elem.offset().top;
var current_top = $(this).scrollTop();
if (current_top > header_height && !elem.hasClass('fixed-object')) {
elem.addClass('fixed-object');
$('body').addClass('fixed-padding');
} else if (current_top <= header_height && elem.hasClass('fixed-object')) {
elem.removeClass('fixed-object');
$('body').removeClass('fixed-padding');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(document).ready(function() {
$(".info").click(function(event) {
$('html, body').animate({
scrollTop: '+=0px'
}, 1);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You want to use .preventDefault(). Like so:
$(document).ready(function() {
$(".info").click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: '+=0px'
}, 1);
});
});
Hello guys i'm looking for an answer to disable the body content scroll in navigation overlay, but when I close the navigation overlay the body scroll should start working but i'm unable to do that.
I couldn't find any correct answer on Stackoverflow. Any help would be appreciated.
You can use JavaScript to set the body overflow (or whatever element's) to hidden when the overlay opens & set it back to auto when you click the close button.
$('.open-overlay').click(function() {
$('body').css('overflow', 'hidden');
});
$('.close-overlay').click(function() {
$('body').css('overflow', 'auto');
});
Here's a working fiddle: https://jsfiddle.net/44gk77d3/1
EDIT: I've added the option to both enable/disable the overflow by clicking on the same button.
https://jsfiddle.net/44gk77d3/2/
Seeing your requirement I have created a code considering your conditions.
I have created body content with scrollable content and overlay menu also with scrollable content.
In the below-mentioned code you can check how body scroll is disabled while overlay menu is visible and again body scroll appears when overlay menu hides.
function openNav() {
document.getElementById("myNav").style.width = "100%";
document.querySelector("body").style.overflow = "hidden";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
document.querySelector("body").style.overflow = "auto";
}
body {
font-family: 'Lato', sans-serif;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
<div id="myNav" class="overlay">
×
<div class="overlay-content">
About
Services
Clients
Contact
About
Services
Clients
Contact
About
Services
Clients
Contact
About
Services
Clients
Contact
About
Services
Clients
Contact
About
Services
Clients
Contact
About
Services
Clients
Contact
About
Services
Clients
Contact
About
Services
Clients
Contact
</div>
</div>
<h2>Fullscreen Overlay Nav Example</h2>
<p>Click on the element below to open the fullscreen overlay navigation menu.</p>
<p>In this example, the navigation menu will slide in, from left to right:</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat est eget consequat varius. Vestibulum non sapien ligula. Ut in nunc vel tortor finibus euismod vitae at ex. Cras ac purus iaculis, dapibus mi quis, volutpat lorem. Nunc rutrum tellus
massa, vitae molestie enim fermentum eu. Fusce id ex eu mi luctus rhoncus ut eget nulla. Cras a vehicula arcu, id pharetra mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean malesuada dui ac iaculis vehicula. Etiam venenatis,
est a tincidunt commodo, ex sapien cursus diam, non dictum purus lorem eu tellus. Ut ornare enim orci, ut vulputate odio feugiat at. Nullam laoreet sed ex non ultricies. Maecenas suscipit tincidunt elit, non pellentesque enim ornare et. Phasellus eu
gravida libero, vel tincidunt orci. Nulla facilisi. In congue, sapien tincidunt eleifend ornare, ex lectus finibus felis, aliquet pretium dui justo sed sapien. Nulla elementum arcu non leo lobortis, in ullamcorper eros convallis. Nullam luctus tincidunt
semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque ac risus sagittis, venenatis dolor eget, tempus nunc. Proin et nisl ac metus blandit interdum convallis ac quam. Proin porttitor nulla vel egestas
euismod. Suspendisse malesuada tellus quis purus consectetur molestie. Cras interdum varius interdum. Vestibulum condimentum nisi turpis, ut sodales arcu fringilla ut. Quisque ultricies sollicitudin lacus, sit amet euismod sem sagittis ac. Praesent
consectetur libero ut nunc suscipit vulputate. Duis commodo neque vel convallis euismod. Suspendisse potenti. Sed viverra eu enim a rhoncus. Proin sodales commodo odio non blandit. Phasellus rhoncus tellus at velit maximus tincidunt. Nullam lacus lectus,
mattis vel justo vitae, lacinia tempus elit. Sed dignissim posuere accumsan. In malesuada luctus tristique. Ut fringilla aliquet sapien in aliquet. Proin ac ultrices lectus. Mauris sed libero rutrum, tincidunt urna et, dignissim massa. Cras iaculis
sed tortor id maximus. Aliquam in sem id mi tristique pellentesque vitae efficitur leo. Proin non dolor ac libero fringilla tempor sed a arcu. Aenean rutrum tellus sapien, in volutpat lectus cursus et. Sed vel bibendum nulla. Proin nunc quam, dictum
eget congue maximus, vestibulum eu mauris. Aliquam erat volutpat. Morbi quis magna et est tempor condimentum in eu purus. Sed dignissim nulla sed diam scelerisque, non malesuada purus sodales. Praesent in nunc condimentum, tempor dolor vitae, accumsan
enim. Sed nec elit in ex porttitor rutrum. Maecenas ultricies augue eu ex porta, finibus efficitur ex eleifend. Proin volutpat diam a diam ultrices euismod. Sed bibendum semper lorem sodales auctor. Sed turpis dolor, pellentesque nec dui quis, tincidunt
commodo urna. Fusce sit amet elementum enim. Curabitur vel sodales mi, sed laoreet leo. Fusce ut ultricies justo. Etiam nec massa tortor. Mauris interdum commodo erat, in pulvinar urna vestibulum in. In posuere dictum nisl, non bibendum velit mattis
vulputate. Vivamus elementum magna et egestas bibendum. Nulla efficitur urna pellentesque, feugiat augue fringilla, pulvinar felis. In at sollicitudin metus. Aliquam vehicula aliquet dolor vel bibendum. Donec euismod enim metus, et gravida sem tempus
et. Donec ipsum quam, fermentum vel finibus quis, tempor vitae sem. Suspendisse tincidunt nulla ut eros congue cursus. Praesent ante ligula, congue in laoreet sed, pellentesque vel sapien. Nam pulvinar dolor at odio dignissim, vestibulum finibus justo
aliquet. Duis lobortis, metus a vehicula interdum, quam metus convallis orci, et rutrum nibh purus at massa. Aenean rutrum mi enim, accumsan efficitur lorem accumsan quis. In laoreet id arcu non accumsan. Donec quis urna et risus auctor feugiat eget
quis nisl. Aliquam vulputate libero a lacus luctus dignissim. Duis accumsan a tellus sed ultrices. Etiam ornare purus id iaculis volutpat. Pellentesque euismod mi orci, malesuada hendrerit ligula varius sollicitudin. Integer tortor justo, rhoncus a
lobortis vel, pharetra eu ipsum. Aliquam et lectus turpis. Aenean sagittis sapien ut mattis efficitur. Ut ut ullamcorper nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque tempus leo metus. Donec tempus dictum mauris. Praesent
finibus dolor vel faucibus finibus. Vestibulum tincidunt euismod dui in pretium. Donec quis facilisis augue. Praesent at lacus vestibulum, finibus leo a, lacinia est. Praesent vehicula sem turpis, non maximus elit placerat quis. Sed quis mi eu nunc
feugiat fermentum ut in mauris. Fusce turpis augue, mollis eu risus a, tincidunt pretium felis. Aliquam sapien velit, bibendum in bibendum at, porta et purus. Nam feugiat lectus vitae ex blandit vestibulum. Curabitur et vestibulum quam, quis ornare
odio. Pellentesque cursus, felis sit amet convallis rutrum, eros dolor finibus justo, sed finibus metus augue quis tellus. Morbi rutrum, mi ut pretium egestas, nisi risus luctus tellus, at pulvinar magna orci ut nunc. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Maecenas nec eros malesuada, ornare arcu vitae, dictum massa. Suspendisse suscipit, ante vitae elementum scelerisque, orci neque mattis massa, vel luctus ante orci ac urna. Vestibulum sagittis, urna eget pellentesque convallis, massa
lorem tincidunt purus, eget tincidunt enim libero at lacus. Maecenas dignissim quam ut leo consectetur facilisis. Phasellus tincidunt viverra malesuada. Phasellus nec quam maximus, egestas ante ut, facilisis erat. Phasellus porta magna enim, nec semper
dolor facilisis sit amet. Proin dapibus dui sit amet urna convallis, et bibendum nunc aliquet. Suspendisse ac ex eu dui mollis molestie. Sed dignissim, sem in pretium ultrices, enim elit pellentesque odio, quis elementum nunc magna vitae nibh. Nulla
venenatis quis risus vitae rhoncus. Vivamus varius tempus justo vitae volutpat. Suspendisse vitae venenatis erat. In et ultrices nunc. Curabitur ac suscipit orci. Proin porta nibh ac urna viverra, a porttitor risus porttitor. Aliquam bibendum convallis
enim, eget porttitor dui dignissim vitae. Duis aliquet congue enim sit amet pretium. Ut sed imperdiet diam. Nam ut est mauris. Vestibulum ut lorem tristique, accumsan neque et, egestas diam. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Sed justo leo, accumsan suscipit purus nec, auctor faucibus leo. Donec at tincidunt purus, sit amet vulputate risus. Duis sed sodales neque. Donec nec risus id metus venenatis aliquam. Sed maximus tortor et ligula commodo
finibus. Nullam in leo at urna aliquam pellentesque. Donec egestas ex sapien, vitae commodo magna accumsan vitae. Sed tincidunt sit amet lacus accumsan rhoncus. Mauris feugiat magna vel nisl tincidunt, nec auctor neque pulvinar. Cras sit amet pellentesque
justo, sit amet elementum sapien. Suspendisse imperdiet feugiat massa, eu vulputate neque commodo quis. Morbi venenatis est ut massa sollicitudin consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin
porttitor diam sed convallis faucibus. Fusce pretium eget mi id consequat. Proin non sem euismod, porttitor elit sed, porttitor eros. Nam elementum, turpis quis convallis lacinia, libero nisi consectetur lectus, in luctus neque enim in leo. Quisque
congue elementum interdum. Quisque commodo urna ipsum, in ullamcorper sapien elementum vitae. Vivamus mollis magna orci, id volutpat felis sodales vitae. Quisque sagittis, ante a luctus dignissim, nisi elit mattis sapien, et sodales neque risus ut lacus.
Duis viverra justo augue, vel ornare erat laoreet ac. Aenean imperdiet leo non tristique dapibus. Morbi in tempus metus. Sed eu scelerisque dolor, ac vehicula tellus. Vivamus a quam a nisi dignissim posuere. Nulla facilisi. Praesent tristique dui nec
neque aliquam blandit. Nam non tincidunt ipsum. Morbi cursus sed nulla quis porta. Ut urna libero, iaculis ut velit sed, sagittis consectetur nisi. Aliquam pretium, est ac auctor pellentesque, nulla odio ornare dolor, sed vulputate purus neque ut ligula.
Cras diam felis, tempor quis placerat a, suscipit non odio. Nam enim erat, tempor nec euismod at, venenatis ut mi. Sed lacus sem, semper vel blandit id, rutrum et augue. Nulla varius mattis felis. Vestibulum ac eros sollicitudin, vehicula massa non,
suscipit dolor. Phasellus posuere ultricies nunc, lacinia viverra augue tempus eget. Quisque id lacinia nisi, sit amet tempor augue. Integer massa velit, aliquam vitae ex et, placerat euismod augue. Nullam faucibus, lorem eget sodales hendrerit, nulla
enim molestie risus, sed laoreet velit erat nec elit. Pellentesque nec condimentum felis. Quisque at nisi nec purus blandit hendrerit in et risus. Nam mattis enim tortor, eu porttitor purus blandit sed. Aenean scelerisque sodales consectetur. Sed euismod
ullamcorper mauris at aliquet. Praesent varius quam vulputate gravida tincidunt. Cras vitae nisl bibendum, dictum lectus sed, semper enim. Donec id felis ex. Proin sit amet eros nec metus eleifend dapibus at a nibh. Suspendisse est nibh, bibendum quis
tincidunt non, lobortis eget lorem. Aenean cursus pharetra porta. In congue, erat sit amet tempus molestie, arcu nisl finibus risus, eu tempus augue purus et ex. Vivamus maximus nisl ut facilisis suscipit. Vivamus nec ullamcorper arcu. Etiam eu dolor
vel orci consequat imperdiet nec eget nulla. Praesent volutpat maximus dolor, ut ornare odio aliquet interdum. Duis at felis velit. In non facilisis leo. Nulla a convallis nulla. Donec nulla odio, vestibulum eget pulvinar in, congue et lorem. Mauris
mollis cursus erat, in dignissim tortor viverra non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vel nisi fringilla, molestie mi id, placerat lorem. Nullam elementum diam mauris, vel hendrerit lacus faucibus
ac. Donec justo orci, pretium at mollis et, rhoncus sed est. In tincidunt pellentesque nisl eu malesuada. Donec sagittis eros sit amet aliquam fringilla. Duis ullamcorper, ipsum vitae dignissim elementum, est odio accumsan orci, non pharetra ipsum dolor
sit amet nisi. In vulputate scelerisque arcu, sed laoreet nunc laoreet gravida. Fusce arcu sapien, dapibus nec dui vel, imperdiet luctus elit. Nullam ultrices velit a ex euismod, id fermentum risus mollis. Curabitur sem magna, posuere a nisl non, fringilla
pellentesque quam. Suspendisse ornare aliquet sem, ut luctus diam vulputate id. Nunc ac rhoncus erat. Nullam sed tortor mi. Etiam sed lorem ligula. Pellentesque efficitur fermentum lacinia. Aliquam erat volutpat. In fringilla elit ornare lacus euismod,
vel facilisis lorem tempus. Nulla et arcu vitae eros lacinia laoreet. Etiam convallis hendrerit libero, et tempus erat placerat ac. Nulla vitae tellus vitae risus euismod bibendum quis vel magna. Donec pellentesque mollis risus. Proin eleifend ipsum
mi, id malesuada lacus tincidunt sed. Maecenas aliquam facilisis urna, eget fringilla dui vulputate ac. Nam et lectus magna. Nulla sed mauris ut velit tempus sollicitudin eget id lacus. Vivamus venenatis massa orci, ut dapibus quam porttitor et. Maecenas
neque mi, commodo quis diam et, pellentesque porttitor nisl. Fusce dictum lectus mauris, a iaculis turpis tincidunt eu. Sed vestibulum quis ex dignissim ullamcorper. Integer tempus elit et dolor semper, eget interdum magna fermentum. Ut pulvinar venenatis
ultricies. Donec rutrum turpis at ipsum congue bibendum. Nam porttitor id dolor in pharetra. Ut lectus mi, suscipit ut odio et, condimentum luctus sapien. Vivamus est enim, volutpat at viverra ut, sollicitudin at ex. Nulla imperdiet porta sem. Nulla
facilisi. Maecenas et risus sit amet magna fringilla placerat. Nulla elementum nunc vitae dictum varius. Ut eu felis risus. Aliquam viverra vestibulum velit, ut cursus nisl cursus in. Sed molestie massa at nisi ornare sodales.
</p>
If still you face any doubt feel free to comment.