How can I change Navbar-Brand Image and Menu class in Bootstrap 3 after scrolling?
My js skills are too low atm and I don't know how to change after scroll my logo__web__light.png to logo__web__dark.png and navbar menu class also.
Thank you in advance!
$(window).scroll(function() {
if($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/
{
$('.sticky-navbar').addClass('sticky');
} else {
$('.sticky-navbar').removeClass('sticky');
}
});
.sticky-navbar {
background-color: rgba(0, 0, 0, 0);
/* Transparent = rgba(0,0,0,0) / Translucent = (0,0,0,0.5) */
height: 60px;
border-bottom: 0px;
transition: background-color .5s ease 0s;
}
.sticky-navbar.sticky {
background-color: rgba(0, 0, 0, 0.46);
height: 105px;
transition: background-color .5s ease 0s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!DOCTYPE html>
<html lang="en">
<body>
<div class="navbar navbar-inverse navbar-fixed-top sticky-navbar">
<div class="container-fluid custom-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
<a class="navbar-brand" href="#"><img src="assets/images/logo__web__light.png" alt=""></a>
</div>
<div class="collapse navbar-collapse" id="navMain">
<ul class="nav navbar-nav pull-right custom-pull">
<li class="active">Home</li>
<li>Work</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<section class="demo">
<div class="container">
<div class="row">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et sodales sem, vel molestie turpis. Sed vitae metus tempus tellus fermentum mollis. Nam eleifend ipsum ut urna viverra interdum. Mauris ac rhoncus eros, in pulvinar massa. Curabitur venenatis ipsum quis nulla pulvinar, quis bibendum urna interdum. Fusce ac semper nulla, sit amet finibus dui. Quisque turpis nisi, gravida ultricies felis et, posuere accumsan elit. Pellentesque mollis consectetur neque a auctor. Donec iaculis dui fermentum lacus lobortis, non dignissim est tempor. Mauris vel convallis est. Donec ac urna eget purus sagittis semper. In quis porttitor mauris.
Nunc vehicula nulla eu tempus cursus. Aenean sagittis elementum nunc, vel cursus mauris ornare id. Sed ullamcorper urna massa, sit amet scelerisque nisi aliquam eu. Praesent tristique felis vitae fermentum ornare. Morbi ac nisl vel ipsum sagittis gravida nec nec nisi. Ut quis elit congue, elementum nisi sit amet, vehicula odio. Proin porta arcu neque, sit amet suscipit felis euismod ut. Pellentesque facilisis tincidunt risus et hendrerit. Phasellus condimentum at leo sit amet bibendum.
Suspendisse aliquam eros ante, at posuere lectus accumsan sed. Praesent est mi, pretium ac sem vitae, aliquet accumsan nibh. Maecenas est libero, eleifend eget dui ac, fermentum auctor leo. Cras feugiat vitae nisi vitae accumsan. Maecenas luctus nisl massa. Morbi tempus ornare mauris quis finibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam euismod felis et mi fringilla, non convallis tortor egestas. Maecenas vestibulum nisl et nibh rhoncus hendrerit et ut sapien.
In orci felis, scelerisque sed lectus blandit, semper commodo nisl. Sed in tempus lectus. Ut ultrices, justo eget tristique venenatis, velit tellus fermentum orci, eu tempor lacus turpis id ligula. Cras fermentum vel eros quis malesuada. Phasellus elementum in magna vel elementum. Integer fermentum gravida tellus in luctus. Fusce venenatis velit ac ipsum fermentum, eu fermentum elit dictum. Proin mattis lobortis nibh, vel ultrices justo semper in. In elementum nec purus id imperdiet.
Sed rutrum nisi ante, vitae vehicula dui dapibus non. Integer fermentum velit a leo rutrum, at ultrices mauris volutpat. Pellentesque maximus ex id augue ornare elementum a quis sapien. Nullam vel vestibulum risus. Nulla ante sapien, pellentesque ac leo sed, feugiat tempus enim. Pellentesque at mauris in ex laoreet tempor. Donec pharetra mattis quam, et tincidunt turpis ornare at. Vivamus dignissim blandit fringilla. Suspendisse semper dolor eros, at hendrerit felis iaculis nec. Morbi sapien sapien, porta eu est eget, auctor aliquet ante. Duis eget sodales mauris. Donec bibendum sollicitudin semper. Vivamus non gravida dolor. Vivamus suscipit massa ut luctus mattis. Quisque ultrices porttitor efficitur.
Sed felis lorem, suscipit vitae massa non, pretium malesuada dui. Vivamus sagittis arcu a sem finibus blandit. Curabitur semper nisi justo, congue malesuada lorem mattis a. Nam pulvinar, sem quis auctor viverra, enim sem pellentesque eros, id ultricies lectus urna non velit. Duis tincidunt elementum ipsum, ac semper felis ullamcorper eget. Aenean et sem at lacus aliquam vestibulum non pretium dui. Aenean placerat eros magna, vel venenatis turpis lobortis id. Pellentesque at elit urna. Sed vestibulum odio ex, ut vehicula eros varius at. Quisque ac risus in arcu hendrerit volutpat. In rhoncus fermentum convallis. Duis interdum, sem id ullamcorper sagittis, elit dui blandit ex, interdum volutpat odio magna et neque. Fusce cursus id lorem quis ornare. Suspendisse luctus mauris in elit finibus, vitae convallis velit commodo. Proin ligula leo, feugiat non risus sed, finibus malesuada orci. Donec egestas porttitor est, sed viverra nulla dignissim quis.</p>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
You can add second logo which should appear when navbar have .sticky class and hide/show images according to that class
$(window).scroll(function() {
if($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/
{
$('.sticky-navbar').addClass('sticky');
} else {
$('.sticky-navbar').removeClass('sticky');
}
});
.sticky-navbar {
background-color: rgba(0, 0, 0, 0);
/* Transparent = rgba(0,0,0,0) / Translucent = (0,0,0,0.5) */
height: 60px;
border-bottom: 0px;
transition: background-color .5s ease 0s;
}
.sticky-navbar.sticky {
background-color: rgba(0, 0, 0, 0.46);
height: 105px;
transition: background-color .5s ease 0s;
}
.sticky-navbar .sticky-logo,
.sticky-navbar.sticky .main-logo
{
display: none;
}
.sticky-navbar.sticky .sticky-logo{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!DOCTYPE html>
<html lang="en">
<body>
<div class="navbar navbar-inverse navbar-fixed-top sticky-navbar">
<div class="container-fluid custom-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
<a class="navbar-brand main-logo" href="#"><img src="assets/images/logo__web__light.png" alt="">logo 1</a>
<a class="navbar-brand sticky-logo" href="#"><img src="assets/images/logo__web__light.png" alt="">logo 2</a>
</div>
<div class="collapse navbar-collapse" id="navMain">
<ul class="nav navbar-nav pull-right custom-pull">
<li class="active">Home</li>
<li>Work</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<section class="demo">
<div class="container">
<div class="row">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et sodales sem, vel molestie turpis. Sed vitae metus tempus tellus fermentum mollis. Nam eleifend ipsum ut urna viverra interdum. Mauris ac rhoncus eros, in pulvinar massa. Curabitur venenatis ipsum quis nulla pulvinar, quis bibendum urna interdum. Fusce ac semper nulla, sit amet finibus dui. Quisque turpis nisi, gravida ultricies felis et, posuere accumsan elit. Pellentesque mollis consectetur neque a auctor. Donec iaculis dui fermentum lacus lobortis, non dignissim est tempor. Mauris vel convallis est. Donec ac urna eget purus sagittis semper. In quis porttitor mauris.
Nunc vehicula nulla eu tempus cursus. Aenean sagittis elementum nunc, vel cursus mauris ornare id. Sed ullamcorper urna massa, sit amet scelerisque nisi aliquam eu. Praesent tristique felis vitae fermentum ornare. Morbi ac nisl vel ipsum sagittis gravida nec nec nisi. Ut quis elit congue, elementum nisi sit amet, vehicula odio. Proin porta arcu neque, sit amet suscipit felis euismod ut. Pellentesque facilisis tincidunt risus et hendrerit. Phasellus condimentum at leo sit amet bibendum.
Suspendisse aliquam eros ante, at posuere lectus accumsan sed. Praesent est mi, pretium ac sem vitae, aliquet accumsan nibh. Maecenas est libero, eleifend eget dui ac, fermentum auctor leo. Cras feugiat vitae nisi vitae accumsan. Maecenas luctus nisl massa. Morbi tempus ornare mauris quis finibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam euismod felis et mi fringilla, non convallis tortor egestas. Maecenas vestibulum nisl et nibh rhoncus hendrerit et ut sapien.
In orci felis, scelerisque sed lectus blandit, semper commodo nisl. Sed in tempus lectus. Ut ultrices, justo eget tristique venenatis, velit tellus fermentum orci, eu tempor lacus turpis id ligula. Cras fermentum vel eros quis malesuada. Phasellus elementum in magna vel elementum. Integer fermentum gravida tellus in luctus. Fusce venenatis velit ac ipsum fermentum, eu fermentum elit dictum. Proin mattis lobortis nibh, vel ultrices justo semper in. In elementum nec purus id imperdiet.
Sed rutrum nisi ante, vitae vehicula dui dapibus non. Integer fermentum velit a leo rutrum, at ultrices mauris volutpat. Pellentesque maximus ex id augue ornare elementum a quis sapien. Nullam vel vestibulum risus. Nulla ante sapien, pellentesque ac leo sed, feugiat tempus enim. Pellentesque at mauris in ex laoreet tempor. Donec pharetra mattis quam, et tincidunt turpis ornare at. Vivamus dignissim blandit fringilla. Suspendisse semper dolor eros, at hendrerit felis iaculis nec. Morbi sapien sapien, porta eu est eget, auctor aliquet ante. Duis eget sodales mauris. Donec bibendum sollicitudin semper. Vivamus non gravida dolor. Vivamus suscipit massa ut luctus mattis. Quisque ultrices porttitor efficitur.
Sed felis lorem, suscipit vitae massa non, pretium malesuada dui. Vivamus sagittis arcu a sem finibus blandit. Curabitur semper nisi justo, congue malesuada lorem mattis a. Nam pulvinar, sem quis auctor viverra, enim sem pellentesque eros, id ultricies lectus urna non velit. Duis tincidunt elementum ipsum, ac semper felis ullamcorper eget. Aenean et sem at lacus aliquam vestibulum non pretium dui. Aenean placerat eros magna, vel venenatis turpis lobortis id. Pellentesque at elit urna. Sed vestibulum odio ex, ut vehicula eros varius at. Quisque ac risus in arcu hendrerit volutpat. In rhoncus fermentum convallis. Duis interdum, sem id ullamcorper sagittis, elit dui blandit ex, interdum volutpat odio magna et neque. Fusce cursus id lorem quis ornare. Suspendisse luctus mauris in elit finibus, vitae convallis velit commodo. Proin ligula leo, feugiat non risus sed, finibus malesuada orci. Donec egestas porttitor est, sed viverra nulla dignissim quis.</p>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
Because the scroll event fires more time you can change your code to:
$(window).scroll(function() {
var scrolltop = $(this).scrollTop();
var sticky = $('.sticky-navbar.sticky').length;
if (scrolltop > 50 && sticky == 0) {
$('.sticky-navbar').addClass('sticky')
.find('.navbar-brand img').attr('src', 'logo__web__dark.png');
return;
}
if (scrolltop <= 50 && sticky != 0) {
$('.sticky-navbar').removeClass('sticky')
.find('.navbar-brand img').attr('src', 'assets/images/logo__web__light.png');
}
});
In this way you will toggle the class and image source only one time per condition:
scrolltop > 50
$(window).scroll(function() {
var scrolltop = $(this).scrollTop();
var sticky = $('.sticky-navbar.sticky').length;
if (scrolltop > 50 && sticky == 0) {
$('.sticky-navbar').addClass('sticky')
.find('.navbar-brand img').attr('src', 'logo__web__dark.png');
console.log('changed on > 50');
return;
}
if (scrolltop <= 50 && sticky != 0) {
$('.sticky-navbar').removeClass('sticky')
.find('.navbar-brand img').attr('src', 'assets/images/logo__web__light.png');
console.log('changed on <= 50');
}
});
.sticky-navbar {
background-color: rgba(0, 0, 0, 0);
/* Transparent = rgba(0,0,0,0) / Translucent = (0,0,0,0.5) */
height: 60px;
border-bottom: 0px;
transition: background-color .5s ease 0s;
}
.sticky-navbar.sticky {
background-color: rgba(0, 0, 0, 0.46);
height: 105px;
transition: background-color .5s ease 0s;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="navbar navbar-inverse navbar-fixed-top sticky-navbar">
<div class="container-fluid custom-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
<a class="navbar-brand" href="#"><img src="assets/images/logo__web__light.png" alt=""></a>
</div>
<div class="collapse navbar-collapse" id="navMain">
<ul class="nav navbar-nav pull-right custom-pull">
<li class="active">Home</li>
<li>Work</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<section class="demo">
<div class="container">
<div class="row">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et sodales sem, vel molestie turpis. Sed vitae metus tempus tellus fermentum mollis. Nam eleifend ipsum ut urna viverra interdum. Mauris ac rhoncus eros, in pulvinar massa. Curabitur venenatis ipsum quis nulla pulvinar, quis bibendum urna interdum. Fusce ac semper nulla, sit amet finibus dui. Quisque turpis nisi, gravida ultricies felis et, posuere accumsan elit. Pellentesque mollis consectetur neque a auctor. Donec iaculis dui fermentum lacus lobortis, non dignissim est tempor. Mauris vel convallis est. Donec ac urna eget purus sagittis semper. In quis porttitor mauris.
Nunc vehicula nulla eu tempus cursus. Aenean sagittis elementum nunc, vel cursus mauris ornare id. Sed ullamcorper urna massa, sit amet scelerisque nisi aliquam eu. Praesent tristique felis vitae fermentum ornare. Morbi ac nisl vel ipsum sagittis gravida nec nec nisi. Ut quis elit congue, elementum nisi sit amet, vehicula odio. Proin porta arcu neque, sit amet suscipit felis euismod ut. Pellentesque facilisis tincidunt risus et hendrerit. Phasellus condimentum at leo sit amet bibendum.
Suspendisse aliquam eros ante, at posuere lectus accumsan sed. Praesent est mi, pretium ac sem vitae, aliquet accumsan nibh. Maecenas est libero, eleifend eget dui ac, fermentum auctor leo. Cras feugiat vitae nisi vitae accumsan. Maecenas luctus nisl massa. Morbi tempus ornare mauris quis finibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam euismod felis et mi fringilla, non convallis tortor egestas. Maecenas vestibulum nisl et nibh rhoncus hendrerit et ut sapien.
In orci felis, scelerisque sed lectus blandit, semper commodo nisl. Sed in tempus lectus. Ut ultrices, justo eget tristique venenatis, velit tellus fermentum orci, eu tempor lacus turpis id ligula. Cras fermentum vel eros quis malesuada. Phasellus elementum in magna vel elementum. Integer fermentum gravida tellus in luctus. Fusce venenatis velit ac ipsum fermentum, eu fermentum elit dictum. Proin mattis lobortis nibh, vel ultrices justo semper in. In elementum nec purus id imperdiet.
Sed rutrum nisi ante, vitae vehicula dui dapibus non. Integer fermentum velit a leo rutrum, at ultrices mauris volutpat. Pellentesque maximus ex id augue ornare elementum a quis sapien. Nullam vel vestibulum risus. Nulla ante sapien, pellentesque ac leo sed, feugiat tempus enim. Pellentesque at mauris in ex laoreet tempor. Donec pharetra mattis quam, et tincidunt turpis ornare at. Vivamus dignissim blandit fringilla. Suspendisse semper dolor eros, at hendrerit felis iaculis nec. Morbi sapien sapien, porta eu est eget, auctor aliquet ante. Duis eget sodales mauris. Donec bibendum sollicitudin semper. Vivamus non gravida dolor. Vivamus suscipit massa ut luctus mattis. Quisque ultrices porttitor efficitur.
Sed felis lorem, suscipit vitae massa non, pretium malesuada dui. Vivamus sagittis arcu a sem finibus blandit. Curabitur semper nisi justo, congue malesuada lorem mattis a. Nam pulvinar, sem quis auctor viverra, enim sem pellentesque eros, id ultricies lectus urna non velit. Duis tincidunt elementum ipsum, ac semper felis ullamcorper eget. Aenean et sem at lacus aliquam vestibulum non pretium dui. Aenean placerat eros magna, vel venenatis turpis lobortis id. Pellentesque at elit urna. Sed vestibulum odio ex, ut vehicula eros varius at. Quisque ac risus in arcu hendrerit volutpat. In rhoncus fermentum convallis. Duis interdum, sem id ullamcorper sagittis, elit dui blandit ex, interdum volutpat odio magna et neque. Fusce cursus id lorem quis ornare. Suspendisse luctus mauris in elit finibus, vitae convallis velit commodo. Proin ligula leo, feugiat non risus sed, finibus malesuada orci. Donec egestas porttitor est, sed viverra nulla dignissim quis.</p>
</div>
</div>
</section>
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 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);
});
});
Currently working on a section where there are three rows of content. An image, a title, and some text. When the section hits the top of the window, there's an additional div that becomes fixed 50px from the top of the window and scrolls as the user scrolls.
When the div hits 30px from the bottom of the section, its position is then switched to absolute.
It seems that this is mostly js issue so I'll leave the JS here for review. Ideally I'd like to get away from using a fixed number like I'm currently using so if anyone has any suggestions on how to maybe get away from that or like I mentioned, position the div absolute when 30px from the bottom of the section, regardless of the height.
var stickyTop = $('.scroller_anchor').offset().top;
$(window).on( 'scroll', function(){
if ($(window).scrollTop() >= stickyTop) {
$('.depositionx-contact').addClass('scrolling');
$('.map-anchor').addClass('scrolling');
if ($(window).scrollTop() > 2990) {
$('.depositionx-contact').addClass('unstick');
} else {
$('.depositionx-contact').removeClass('unstick');
}
} else {
$('.depositionx-contact').removeClass('scrolling');
$('.map-anchor').removeClass('scrolling');
}
});
I've attached a pen for the sake of a more visual example.
https://codepen.io/crawbuck/pen/wpeRWW
Any input would be greatly appreciated.
Sorry for the delay. I slapped together a working sample. You can see the fiddle here.
The gist of it is to only scroll the element when it falls in a range of the parent container offset to the parent container height - the height of the element.
function SemiFixElement($container, $element) {
$container = $($container);
$container.width($container.width());
$container.height($container.height());
$container.css('position', 'absolute');
$container.css('left', '0');
$element = $($element);
$element.css('position', 'relative');
$(window).on('scroll', function(ev) {
let top = -$container[0].getBoundingClientRect().top;
top = Math.max(0, top);
top = Math.min(top, $container.height() - $element.height());
$element.css('top', top);
});
}
SemiFixElement('.semi-fixed-container', '.semi-fixed');
.column-layout {
display: flex;
justify-content: flex-end;
}
.column-layout > .semi-fixed-container {
background: LightBlue;
width: 100px;
}
.column-layout > div {
background: LightGreen;
max-width: calc(100% - 100px);
}
ul {
list-style-type: none;
margin-top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan lacus libero, vitae finibus elit pretium a. In sit amet neque non urna convallis rutrum a nec dolor. Duis feugiat, odio vel vulputate pretium, orci massa sollicitudin lacus, sed eleifend
mauris augue sed sem. Morbi imperdiet venenatis sollicitudin. Vestibulum ut ipsum sit amet enim mattis sollicitudin. Donec enim nulla, efficitur a scelerisque fringilla, ornare quis mauris. Mauris iaculis odio ut quam tincidunt imperdiet. Nam quam dui,
iaculis nec neque vitae, dapibus accumsan magna. Sed sollicitudin urna sagittis turpis porta, a sagittis diam feugiat. Praesent auctor sodales velit, in vestibulum nisl posuere id. Aenean dapibus felis sit amet mauris commodo, at posuere sem imperdiet.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean et lorem felis.
</p>
<p>
Fusce rhoncus tristique justo, at ultricies urna lobortis non. Ut mollis, lorem dictum egestas rutrum, dolor erat commodo lacus, sit amet consequat mi massa ac tortor. Nulla tristique euismod odio ut pharetra. Morbi accumsan iaculis lectus, eget suscipit
lacus hendrerit vel. Phasellus elit elit, congue quis lacinia ullamcorper, vulputate et diam. Etiam eu eleifend nunc. Suspendisse nibh mauris, vestibulum id purus vitae, tristique semper nisi. Donec mollis mauris ex, faucibus porta turpis consequat
eget. Proin volutpat quis mauris ut dictum. Nullam ut gravida odio. Praesent finibus turpis non dapibus convallis. Nunc condimentum urna luctus dui sodales malesuada. Vestibulum iaculis consequat sodales. Maecenas ac elit vitae leo luctus mollis. Proin
condimentum dapibus augue et tristique.
</p>
<p>
Pellentesque nec bibendum est, non molestie lacus. Curabitur at magna sapien. Ut suscipit imperdiet finibus. Nam in massa eget felis efficitur finibus. Mauris venenatis placerat elit, a placerat tortor venenatis vitae. Duis et nisl ut augue laoreet dignissim
ut a arcu. Maecenas eu fermentum nisl. Morbi vestibulum leo eu lacus interdum, in tincidunt lacus malesuada. Mauris nec cursus erat, a fermentum magna. Donec bibendum libero et leo ultrices venenatis. Donec eget metus sodales, dapibus ante quis, dictum
mi. Vestibulum orci quam, malesuada ac venenatis vitae, finibus in massa.
</p>
<p>
Aliquam aliquet massa sit amet ipsum porttitor, nec malesuada massa sodales. Phasellus placerat massa et nisl scelerisque, nec egestas leo accumsan. Pellentesque et tempor leo. Suspendisse sit amet iaculis mauris. In sed orci sollicitudin, vestibulum
est sit amet, lobortis tellus. Nunc sit amet hendrerit nibh. Integer dictum nibh at elit euismod, tincidunt sollicitudin libero mollis. Morbi placerat felis sem, a vulputate augue faucibus sed. Morbi bibendum feugiat ornare. Integer id fringilla felis.
Nulla eget est ut tellus iaculis laoreet. Proin eu aliquam nisl, eu consequat eros. Vivamus finibus ligula vel feugiat volutpat.
</p>
<div>
<div class="column-layout">
<div class="semi-fixed-container">
<div class="semi-fixed">
<ul>
<li><a>Link 1</a></li>
<li><a>Link 2</a></li>
<li><a>Link 3</a></li>
<li><a>Link 4</a></li>
<li><a>Link 5</a></li>
</ul>
</div>
</div>
<div>
<p>
Donec et tristique libero. Suspendisse sit amet nunc ante. Sed id aliquet nibh. Praesent sodales ante ullamcorper mauris pellentesque, eu lobortis ipsum accumsan. Nam eget justo nec mi sollicitudin maximus. Phasellus ac lacinia sapien. Sed sed volutpat
velit. In in justo vel odio pellentesque imperdiet at nec augue. Aenean vel pulvinar nisl. Suspendisse efficitur in diam quis vestibulum. Cras egestas metus eget mi lobortis, eu tincidunt augue lobortis. Donec sed enim venenatis, eleifend lacus
in, rutrum enim. Aenean ut est sed leo dapibus auctor.
</p>
<p>
Pellentesque gravida tincidunt faucibus. Nunc in elit sit amet velit efficitur imperdiet ut ac arcu. Vivamus eget nisl in dui accumsan tincidunt hendrerit vitae nisl. Etiam placerat quis elit ut tincidunt. Praesent ipsum metus, vestibulum et odio lacinia,
volutpat maximus est. Donec facilisis aliquam felis at ultricies. Quisque enim lorem, euismod et sapien sit amet, consequat vehicula leo. Nam commodo massa neque, et porttitor urna egestas ut. Vivamus condimentum neque eu mi elementum tincidunt.
Aliquam porta condimentum metus quis maximus. Nunc ornare arcu rhoncus metus sodales fringilla. Morbi elementum est sit amet pellentesque consequat. Quisque sem enim, lobortis a augue nec, fringilla dictum ex. Duis efficitur consectetur ultricies.
</p>
<p>
Aenean eget justo id mi condimentum cursus. Sed molestie erat nec mauris ultricies, sed porttitor nisl fermentum. Curabitur quis luctus metus. Quisque scelerisque consectetur eros consectetur bibendum. Cras quis aliquet quam. Donec ac nunc finibus, pulvinar
libero eu, tincidunt libero. Morbi et commodo mi. Nam ut massa sit amet nulla tristique porta a id dui. Nunc cursus porttitor finibus. Nunc dictum, enim ornare fermentum maximus, eros urna fermentum risus, eu rutrum est turpis sollicitudin ipsum.
Curabitur id urna in lacus dictum commodo nec a urna. Ut quis aliquet mauris. Praesent commodo consectetur consequat. Nulla porttitor nec ante id placerat.
</p>
<p>
Aliquam condimentum purus vel justo congue, vitae iaculis turpis pretium. Suspendisse venenatis purus sed porttitor pellentesque. In nulla nulla, pulvinar vitae maximus in, tincidunt non erat. Donec pharetra commodo semper. Suspendisse potenti. Mauris
metus mauris, venenatis in quam vel, mattis commodo velit. Vivamus in pretium enim, vitae condimentum enim. Nulla dictum, turpis eu porttitor convallis, metus ipsum porttitor urna, eu rhoncus metus dolor vel enim. Nunc vulputate mattis tellus.
In eu tempor ex. Sed quam elit, elementum a ultricies in, efficitur ac nulla. Morbi vel aliquet neque. Quisque sagittis tempor purus, eu lacinia velit gravida nec.
</p>
<p>
Nulla congue luctus mauris at convallis. Sed tortor tortor, faucibus vitae elementum a, mattis in mi. Aenean tellus odio, sagittis vitae finibus eu, finibus eu dui. Duis mattis sollicitudin ante ornare bibendum. Nulla a sapien pellentesque, rhoncus urna
eu, iaculis nunc. Suspendisse pellentesque urna ut nibh hendrerit volutpat. Sed lacinia vehicula luctus. Sed nec ligula eu neque varius ultricies. Sed imperdiet metus et eros sodales auctor. Aenean erat sem, laoreet at placerat nec, feugiat at
nulla. Nulla eu magna mauris. Aenean condimentum tortor velit, et lacinia purus luctus et.
</p>
<p>
Duis in nibh vitae ex elementum malesuada. Aliquam tempus, ligula ac fringilla congue, nibh leo egestas est, ac bibendum tellus nisi sed ex. Donec lobortis suscipit lectus, quis luctus magna aliquam imperdiet. Proin tellus ipsum, tempus eget velit a,
bibendum egestas enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. In convallis convallis nulla eget faucibus. Duis laoreet est in faucibus lacinia. Pellentesque mi nisl, elementum sit amet egestas ac, dapibus in elit. Vestibulum
pulvinar quam arcu. Proin molestie nunc vitae ante varius rutrum.
</p>
</div>
</div>
</div>
<p>
Fusce rhoncus tristique justo, at ultricies urna lobortis non. Ut mollis, lorem dictum egestas rutrum, dolor erat commodo lacus, sit amet consequat mi massa ac tortor. Nulla tristique euismod odio ut pharetra. Morbi accumsan iaculis lectus, eget suscipit
lacus hendrerit vel. Phasellus elit elit, congue quis lacinia ullamcorper, vulputate et diam. Etiam eu eleifend nunc. Suspendisse nibh mauris, vestibulum id purus vitae, tristique semper nisi. Donec mollis mauris ex, faucibus porta turpis consequat
eget. Proin volutpat quis mauris ut dictum. Nullam ut gravida odio. Praesent finibus turpis non dapibus convallis. Nunc condimentum urna luctus dui sodales malesuada. Vestibulum iaculis consequat sodales. Maecenas ac elit vitae leo luctus mollis. Proin
condimentum dapibus augue et tristique.
</p>
<p>
Pellentesque nec bibendum est, non molestie lacus. Curabitur at magna sapien. Ut suscipit imperdiet finibus. Nam in massa eget felis efficitur finibus. Mauris venenatis placerat elit, a placerat tortor venenatis vitae. Duis et nisl ut augue laoreet dignissim
ut a arcu. Maecenas eu fermentum nisl. Morbi vestibulum leo eu lacus interdum, in tincidunt lacus malesuada. Mauris nec cursus erat, a fermentum magna. Donec bibendum libero et leo ultrices venenatis. Donec eget metus sodales, dapibus ante quis, dictum
mi. Vestibulum orci quam, malesuada ac venenatis vitae, finibus in massa.
</p>
<p>
Fusce rhoncus tristique justo, at ultricies urna lobortis non. Ut mollis, lorem dictum egestas rutrum, dolor erat commodo lacus, sit amet consequat mi massa ac tortor. Nulla tristique euismod odio ut pharetra. Morbi accumsan iaculis lectus, eget suscipit
lacus hendrerit vel. Phasellus elit elit, congue quis lacinia ullamcorper, vulputate et diam. Etiam eu eleifend nunc. Suspendisse nibh mauris, vestibulum id purus vitae, tristique semper nisi. Donec mollis mauris ex, faucibus porta turpis consequat
eget. Proin volutpat quis mauris ut dictum. Nullam ut gravida odio. Praesent finibus turpis non dapibus convallis. Nunc condimentum urna luctus dui sodales malesuada. Vestibulum iaculis consequat sodales. Maecenas ac elit vitae leo luctus mollis. Proin
condimentum dapibus augue et tristique.
</p>
<p>
Pellentesque nec bibendum est, non molestie lacus. Curabitur at magna sapien. Ut suscipit imperdiet finibus. Nam in massa eget felis efficitur finibus. Mauris venenatis placerat elit, a placerat tortor venenatis vitae. Duis et nisl ut augue laoreet dignissim
ut a arcu. Maecenas eu fermentum nisl. Morbi vestibulum leo eu lacus interdum, in tincidunt lacus malesuada. Mauris nec cursus erat, a fermentum magna. Donec bibendum libero et leo ultrices venenatis. Donec eget metus sodales, dapibus ante quis, dictum
mi. Vestibulum orci quam, malesuada ac venenatis vitae, finibus in massa.
</p>
The nav sticky at the top of the page without scrolling.
It happens only in Safari browser.
Demo http://codepen.io/anon/pen/PGqxKa
$("#myNav").affix({
offset: {
top: 0
}
});
.jumbotron {
margin-bottom: 0;
}
.navbar {
border-radius: 0;
}
.navbar.affix {
top: 0;
z-index: 9999;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<div data-spy="scroll" data-target="#myNav">
<div class="header">
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>Bootstrap Affix</h1>
</div>
</div>
</div>
</div>
</div>
<nav id="myNav" class="navbar navbar-inverse" data-spy="affix">
<div class="container">
<div class="row">
<div class="col-sm-12">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Brand
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Section One
</li>
<li>Section Two
</li>
<li>Section Three
</li>
<li>Section Four
</li>
<li>Section Five
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2 id="section-1">Section One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse
varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet
quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
<p>Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt
dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
<hr>
<h2 id="section-2">Section Two</h2>
<p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis dapibus orci. In dapibus velit blandit pharetra tincidunt. Quisque non sapien nec lacus condimentum facilisis ut iaculis
enim. Sed viverra interdum bibendum. Donec ac sollicitudin dolor. Sed fringilla vitae lacus at rutrum. Phasellus congue vestibulum ligula sed consequat.</p>
<p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem convallis sed. Nam odio tortor, dictum quis malesuada at, pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis, diam velit egestas lacus, quis fermentum metus ante quis
urna. Sed at facilisis libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum bibendum blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit tincidunt ante. Vivamus sem augue, hendrerit
non sapien in, mollis ornare augue.</p>
<hr>
<h2 id="section-3">Section Three</h2>
<p>Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada
condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue in porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse tincidunt risus quis dolor fringilla blandit. Ut
sed sapien at purus lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl semper tortor, vel sagittis lacus est consequat eros. Sed id pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit amet mauris.</p>
<p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus turpis at accumsan tincidunt. Phasellus risus risus, volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit
dolor eget ante rutrum adipiscing. Cras interdum ipsum mattis, tempus mauris vel, semper ipsum. Duis sed dolor ut enim lobortis pellentesque ultricies ac ligula. Pellentesque convallis elit nisi, id vulputate ipsum ullamcorper ut. Cras ac pulvinar
purus, ac viverra est. Suspendisse potenti. Integer pellentesque neque et elementum tempus. Curabitur bibendum in ligula ut rhoncus.</p>
<p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo sed ligula porta semper eu quis enim. Pellentesque pellentesque, metus at facilisis hendrerit, lectus velit facilisis leo, quis volutpat turpis arcu quis enim. Nulla viverra lorem
elementum interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus. Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p>
<hr>
<h2 id="section-4">Section Four</h2>
<p>Suspendisse a orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum a iaculis lacus. Phasellus vitae convallis ligula, nec volutpat tellus. Vivamus scelerisque mollis nisl, nec vehicula elit egestas a. Sed luctus metus id mi gravida,
faucibus convallis neque pretium. Maecenas quis sapien ut leo fringilla tempor vitae sit amet leo. Donec imperdiet tempus placerat. Pellentesque pulvinar ultrices nunc sed ultrices. Morbi vel mi pretium, fermentum lacus et, viverra tellus. Phasellus
sodales libero nec dui convallis, sit amet fermentum sapien auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eu elementum nibh, quis varius libero.</p>
<p>Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt
dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
<p>Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada
condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue in porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse tincidunt risus quis dolor fringilla blandit. Ut
sed sapien at purus lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl semper tortor, vel sagittis lacus est consequat eros. Sed id pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit amet mauris.</p>
<p>Phasellus fermentum, neque sit amet sodales tempor, enim ante interdum eros, eget luctus ipsum eros ut ligula. Nunc ornare erat quis faucibus molestie. Proin malesuada consequat commodo. Mauris iaculis, eros ut dapibus luctus, massa enim elementum
purus, sit amet tristique purus purus nec felis. Morbi vestibulum sapien eget porta pulvinar. Nam at quam diam. Proin rhoncus, felis elementum accumsan dictum, felis nisi vestibulum tellus, et ultrices risus felis in orci. Quisque vestibulum
sem nisl, vel congue leo dictum nec. Cras eget est at velit sagittis ullamcorper vel et lectus. In hac habitasse platea dictumst. Etiam interdum iaculis velit, vel sollicitudin lorem feugiat sit amet. Etiam luctus, quam sed sodales aliquam,
lorem libero hendrerit urna, faucibus rhoncus massa nibh at felis. Curabitur ac tempus nulla, ut semper erat. Vivamus porta ullamcorper sem, ornare egestas mauris facilisis id.</p>
<p>Sed vitae lobortis diam, id molestie magna. Aliquam consequat ipsum quis est dictum ultrices. Aenean nibh velit, fringilla in diam id, blandit hendrerit lacus. Donec vehicula rutrum tellus eget fermentum. Pellentesque ac erat et arcu ornare tincidunt.
Aliquam erat volutpat. Vivamus lobortis urna quis gravida semper. In condimentum, est a faucibus luctus, mi dolor cursus mi, id vehicula arcu risus a nibh. Pellentesque blandit sapien lacus, vel vehicula nunc feugiat sit amet.</p>
<p>Ut ut risus nisl. Fusce porttitor eros at magna luctus, non congue nulla eleifend. Aenean porttitor feugiat dolor sit amet facilisis. Pellentesque venenatis magna et risus commodo, a commodo turpis gravida. Nam mollis massa dapibus urna aliquet,
quis iaculis elit sodales. Sed eget ornare orci, eu malesuada justo. Nunc lacus augue, dictum quis dui id, lacinia congue quam. Nulla sem sem, aliquam nec dolor ac, tempus convallis nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Nulla suscipit convallis iaculis. Quisque eget commodo ligula. Praesent leo dui, facilisis quis eleifend in, aliquet vitae nunc. Suspendisse fermentum odio ac massa ultricies pellentesque. Fusce eu suscipit massa.</p>
<hr>
<h2 id="section-5">Section Five</h2>
<p>Nam eget purus nec est consectetur vehicula. Nullam ultrices nisl risus, in viverra libero egestas sit amet. Etiam porttitor dolor non eros pulvinar malesuada. Vestibulum sit amet est mollis nulla tempus aliquet. Praesent luctus hendrerit arcu
non laoreet. Morbi consequat placerat magna, ac ornare odio sagittis sed. Donec vitae ullamcorper purus. Vivamus non metus ac justo porta volutpat.</p>
<p>Vivamus mattis accumsan erat, vel convallis risus pretium nec. Integer nunc nulla, viverra ut sem non, scelerisque vehicula arcu. Fusce bibendum convallis augue sit amet lobortis. Cras porta urna turpis, sodales lobortis purus adipiscing id. Maecenas
ullamcorper, turpis suscipit pellentesque fringilla, massa lacus pulvinar mi, nec dignissim velit arcu eget purus. Nam at dapibus tellus, eget euismod nisl. Ut eget venenatis sapien. Vivamus vulputate varius mauris, vel varius nisl facilisis
ac. Nulla aliquet justo a nibh ornare, eu congue neque rutrum.</p>
<p>Suspendisse a orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum a iaculis lacus. Phasellus vitae convallis ligula, nec volutpat tellus. Vivamus scelerisque mollis nisl, nec vehicula elit egestas a. Sed luctus metus id mi gravida,
faucibus convallis neque pretium. Maecenas quis sapien ut leo fringilla tempor vitae sit amet leo. Donec imperdiet tempus placerat. Pellentesque pulvinar ultrices nunc sed ultrices. Morbi vel mi pretium, fermentum lacus et, viverra tellus. Phasellus
sodales libero nec dui convallis, sit amet fermentum sapien auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eu elementum nibh, quis varius libero.</p>
<p>Morbi sed fermentum ipsum. Morbi a orci vulputate tortor ornare blandit a quis orci. Donec aliquam sodales gravida. In ut ullamcorper nisi, ac pretium velit. Vestibulum vitae lectus volutpat, consequat lorem sit amet, pulvinar tellus. In tincidunt
vel leo eget pulvinar. Curabitur a eros non lacus malesuada aliquam. Praesent et tempus odio. Integer a quam nunc. In hac habitasse platea dictumst. Aliquam porta nibh nulla, et mattis turpis placerat eget. Pellentesque dui diam, pellentesque
vel gravida id, accumsan eu magna. Sed a semper arcu, ut dignissim leo.</p>
<p>Sed vitae lobortis diam, id molestie magna. Aliquam consequat ipsum quis est dictum ultrices. Aenean nibh velit, fringilla in diam id, blandit hendrerit lacus. Donec vehicula rutrum tellus eget fermentum. Pellentesque ac erat et arcu ornare tincidunt.
Aliquam erat volutpat. Vivamus lobortis urna quis gravida semper. In condimentum, est a faucibus luctus, mi dolor cursus mi, id vehicula arcu risus a nibh. Pellentesque blandit sapien lacus, vel vehicula nunc feugiat sit amet.</p>
</div>
</div>
</div>
</div>
Add Affix.prototype.getState = function (scrollHeight, height, offsetTop, offsetBottom) { to the affix.js
Affix.prototype.getState = function(scrollHeight, height, offsetTop, offsetBottom) {
var scrollTop = this.$target.scrollTop()
var position = this.$element.offset()
var targetHeight = this.$target.height()
// added line 👇
if (scrollTop < 0) {
return 'bottom';
}
------------------------------------------
------------------------------
------------------
}
i am new to bootstrap and trying to figure out how i could:
Have a vertical sidebar with fixed width, that doesnt scroll with content but still responsive(if the screen width is too small, it become a top bar with hamburger menu like we are used to)
Have the main content div take 100% of remaining width(minus the sidebar fixed width)
Here is what i have so far(codes that i found somewhere that almost accomplish what i want, however the sidebar scroll with the content and content div doesnt take 100% remamining width):
IMPORTS:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="scripts/css/bootstrap.css" />
<script type="text/javascript" src="scripts/js/bootstrap.min.js"></script>
JS
<script type="text/javascript">
$(document).ready(function () {
$('[data-toggle=offcanvas]').click(function () {
$('.row-offcanvas').toggleClass('active');
});
});
</script>
CSS:
body {
padding-top: 51px;
}
.text-center {
padding-top: 20px;
}
.col-xs-12 {
background-color: #fff;
}
#sidebar {
height: 100%;
padding-right: 0;
padding-top: 20px;
}
#sidebar .nav {
width: 95%;
}
#sidebar li {
border:0 #f2f2f2 solid;
border-bottom-width:1px;
}
#media screen and (max-width: 767px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.row-offcanvas-right
.sidebar-offcanvas {
right: -41.6%;
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -41.6%;
}
.row-offcanvas-right.active {
right: 41.6%;
}
.row-offcanvas-left.active {
left: 41.6%;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 41.6%;
}
#sidebar {
padding-top:0;
}
}
.fixed {
width: 200px;
float: left;
}
HTML:
<body>
<div class="page-container">
<!-- top navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".sidebar-nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project Name</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row row-offcanvas row-offcanvas-left">
<!-- sidebar -->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas fixed" id="sidebar" role="navigation">
<ul class="nav">
<li class="active">Home</li>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<!-- main area -->
<div class="col-xs-12 col-sm-9" style="background-color: blue;">
<h1>Shrink Width to Collapse Sidebar</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est.
Aenean pellentesque lorem a porttitor placerat. Vestibulum placerat nunc ac rutrum fringilla. Donec
arcu leo, tempus adipiscing volutpat id, congue in purus. Pellentesque scelerisque mattis nibh vel
semper. Sed a risus purus. Fusce pulvinar, velit eget rhoncus facilisis, enim elit vulputate nisl, a
euismod diam metus eu enim. Nullam congue justo vitae justo accumsan, sit amet malesuada nulla sagittis.
Nam neque tellus, tristique in est vel, sagittis congue turpis. Aliquam nulla lacus, laoreet dapibus
odio vitae, posuere volutpat magna. Nam pulvinar lacus in sapien feugiat, sit amet vestibulum enim
eleifend. Integer sit amet ante auctor, lacinia sem quis, consectetur nulla.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est.
Aenean pellentesque lorem a porttitor placerat. Vestibulum placerat nunc ac rutrum fringilla. Donec
arcu leo, tempus adipiscing volutpat id, congue in purus. Pellentesque scelerisque mattis nibh vel
semper. Sed a risus purus. Fusce pulvinar, velit eget rhoncus facilisis, enim elit vulputate nisl, a
euismod diam metus eu enim. Nullam congue justo vitae justo accumsan, sit amet malesuada nulla sagittis.
Nam neque tellus, tristique in est vel, sagittis congue turpis. Aliquam nulla lacus, laoreet dapibus
odio vitae, posuere volutpat magna. Nam pulvinar lacus in sapien feugiat, sit amet vestibulum enim
eleifend. Integer sit amet ante auctor, lacinia sem quis, consectetur nulla.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est.
Aenean pellentesque lorem a porttitor placerat. Vestibulum placerat nunc ac rutrum fringilla. Donec
arcu leo, tempus adipiscing volutpat id, congue in purus. Pellentesque scelerisque mattis nibh vel
semper. Sed a risus purus. Fusce pulvinar, velit eget rhoncus facilisis, enim elit vulputate nisl, a
euismod diam metus eu enim. Nullam congue justo vitae justo accumsan, sit amet malesuada nulla sagittis.
Nam neque tellus, tristique in est vel, sagittis congue turpis. Aliquam nulla lacus, laoreet dapibus
odio vitae, posuere volutpat magna. Nam pulvinar lacus in sapien feugiat, sit amet vestibulum enim
eleifend. Integer sit amet ante auctor, lacinia sem quis, consectetur nulla.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est.
Aenean pellentesque lorem a porttitor placerat. Vestibulum placerat nunc ac rutrum fringilla. Donec
arcu leo, tempus adipiscing volutpat id, congue in purus. Pellentesque scelerisque mattis nibh vel
semper. Sed a risus purus. Fusce pulvinar, velit eget rhoncus facilisis, enim elit vulputate nisl, a
euismod diam metus eu enim. Nullam congue justo vitae justo accumsan, sit amet malesuada nulla sagittis.
Nam neque tellus, tristique in est vel, sagittis congue turpis. Aliquam nulla lacus, laoreet dapibus
odio vitae, posuere volutpat magna. Nam pulvinar lacus in sapien feugiat, sit amet vestibulum enim
eleifend. Integer sit amet ante auctor, lacinia sem quis, consectetur nulla.
</p>
<p>
Vestibulum porttitor massa eget pellentesque eleifend. Suspendisse tempor, nisi eu placerat auctor,
est erat tempus neque, pellentesque venenatis eros lorem vel quam. Nulla luctus malesuada porttitor.
Fusce risus mi, luctus scelerisque hendrerit feugiat, volutpat gravida nisi. Quisque facilisis risus
in lacus sagittis malesuada. Suspendisse non purus diam. Nunc commodo felis sit amet tortor
adipiscing varius. Fusce commodo nulla quis fermentum hendrerit. Donec vulputate, tellus sed
venenatis sodales, purus nibh ullamcorper quam, sit amet tristique justo velit molestie lorem.
</p>
<p>
Vestibulum porttitor massa eget pellentesque eleifend. Suspendisse tempor, nisi eu placerat auctor,
est erat tempus neque, pellentesque venenatis eros lorem vel quam. Nulla luctus malesuada porttitor.
Fusce risus mi, luctus scelerisque hendrerit feugiat, volutpat gravida nisi. Quisque facilisis risus
in lacus sagittis malesuada. Suspendisse non purus diam. Nunc commodo felis sit amet tortor
adipiscing varius. Fusce commodo nulla quis fermentum hendrerit. Donec vulputate, tellus sed
venenatis sodales, purus nibh ullamcorper quam, sit amet tristique justo velit molestie lorem.
</p>
<p>
Vestibulum porttitor massa eget pellentesque eleifend. Suspendisse tempor, nisi eu placerat auctor,
est erat tempus neque, pellentesque venenatis eros lorem vel quam. Nulla luctus malesuada porttitor.
Fusce risus mi, luctus scelerisque hendrerit feugiat, volutpat gravida nisi. Quisque facilisis risus
in lacus sagittis malesuada. Suspendisse non purus diam. Nunc commodo felis sit amet tortor
adipiscing varius. Fusce commodo nulla quis fermentum hendrerit. Donec vulputate, tellus sed
venenatis sodales, purus nibh ullamcorper quam, sit amet tristique justo velit molestie lorem.
</p>
<p>
Fusce sollicitudin lacus lacinia mi tincidunt ullamcorper. Aenean velit ipsum, vestibulum nec
tincidunt eu, lobortis vitae erat. Nullam ultricies fringilla ultricies. Sed euismod nibh quis
tincidunt dapibus. Nulla quam velit, porta sit amet felis eu, auctor fringilla elit. Donec
convallis tincidunt nibh, quis pellentesque sapien condimentum a. Phasellus purus dui, rhoncus
id suscipit id, ornare et sem. Duis aliquet posuere arcu a ornare. Pellentesque consequat libero
id massa accumsan volutpat. Fusce a hendrerit lacus. Nam elementum ac eros eu porttitor.
Phasellus enim mi, auctor sit amet luctus a, commodo fermentum arcu. In volutpat scelerisque
quam, nec lacinia libero.
</p>
<p>
Aliquam a lacinia orci, iaculis porttitor neque. Nullam cursus dolor tempus mauris posuere, eu
scelerisque sem tincidunt. Praesent blandit sapien at sem pulvinar, vel egestas orci varius.
Praesent vitae purus at ante aliquet luctus vel quis nibh. Mauris id nulla vitae est lacinia
rhoncus a vel justo. Donec iaculis quis sapien vel molestie. Aliquam sed elementum orci.
Vestibulum tristique tempor risus et malesuada. Sed eget ligula sed quam placerat dapibus.
Integer accumsan ac massa at tempus.
</p>
<p>
Vestibulum porttitor massa eget pellentesque eleifend. Suspendisse tempor, nisi eu placerat auctor,
est erat tempus neque, pellentesque venenatis eros lorem vel quam. Nulla luctus malesuada porttitor.
Fusce risus mi, luctus scelerisque hendrerit feugiat, volutpat gravida nisi. Quisque facilisis risus
in lacus sagittis malesuada. Suspendisse non purus diam. Nunc commodo felis sit amet tortor
adipiscing varius. Fusce commodo nulla quis fermentum hendrerit. Donec vulputate, tellus sed
venenatis sodales, purus nibh ullamcorper quam, sit amet tristique justo velit molestie lorem.
</p>
<p>
Fusce sollicitudin lacus lacinia mi tincidunt ullamcorper. Aenean velit ipsum, vestibulum nec
tincidunt eu, lobortis vitae erat. Nullam ultricies fringilla ultricies. Sed euismod nibh quis
tincidunt dapibus. Nulla quam velit, porta sit amet felis eu, auctor fringilla elit. Donec
convallis tincidunt nibh, quis pellentesque sapien condimentum a. Phasellus purus dui, rhoncus
id suscipit id, ornare et sem. Duis aliquet posuere arcu a ornare. Pellentesque consequat libero
id massa accumsan volutpat. Fusce a hendrerit lacus. Nam elementum ac eros eu porttitor.
Phasellus enim mi, auctor sit amet luctus a, commodo fermentum arcu. In volutpat scelerisque
quam, nec lacinia libero.
</p>
<p>
Aliquam a lacinia orci, iaculis porttitor neque. Nullam cursus dolor tempus mauris posuere, eu
scelerisque sem tincidunt. Praesent blandit sapien at sem pulvinar, vel egestas orci varius.
Praesent vitae purus at ante aliquet luctus vel quis nibh. Mauris id nulla vitae est lacinia
rhoncus a vel justo. Donec iaculis quis sapien vel molestie. Aliquam sed elementum orci.
Vestibulum tristique tempor risus et malesuada. Sed eget ligula sed quam placerat dapibus.
Integer accumsan ac massa at tempus.
</p>
<p>
Vestibulum porttitor massa eget pellentesque eleifend. Suspendisse tempor, nisi eu placerat auctor,
est erat tempus neque, pellentesque venenatis eros lorem vel quam. Nulla luctus malesuada porttitor.
Fusce risus mi, luctus scelerisque hendrerit feugiat, volutpat gravida nisi. Quisque facilisis risus
in lacus sagittis malesuada. Suspendisse non purus diam. Nunc commodo felis sit amet tortor
adipiscing varius. Fusce commodo nulla quis fermentum hendrerit. Donec vulputate, tellus sed
venenatis sodales, purus nibh ullamcorper quam, sit amet tristique justo velit molestie lorem.
</p>
<p>
Fusce sollicitudin lacus lacinia mi tincidunt ullamcorper. Aenean velit ipsum, vestibulum nec
tincidunt eu, lobortis vitae erat. Nullam ultricies fringilla ultricies. Sed euismod nibh quis
tincidunt dapibus. Nulla quam velit, porta sit amet felis eu, auctor fringilla elit. Donec
convallis tincidunt nibh, quis pellentesque sapien condimentum a. Phasellus purus dui, rhoncus
id suscipit id, ornare et sem. Duis aliquet posuere arcu a ornare. Pellentesque consequat libero
id massa accumsan volutpat. Fusce a hendrerit lacus. Nam elementum ac eros eu porttitor.
Phasellus enim mi, auctor sit amet luctus a, commodo fermentum arcu. In volutpat scelerisque
quam, nec lacinia libero.
</p>
<p>
Aliquam a lacinia orci, iaculis porttitor neque. Nullam cursus dolor tempus mauris posuere, eu
scelerisque sem tincidunt. Praesent blandit sapien at sem pulvinar, vel egestas orci varius.
Praesent vitae purus at ante aliquet luctus vel quis nibh. Mauris id nulla vitae est lacinia
rhoncus a vel justo. Donec iaculis quis sapien vel molestie. Aliquam sed elementum orci.
Vestibulum tristique tempor risus et malesuada. Sed eget ligula sed quam placerat dapibus.
Integer accumsan ac massa at tempus.
</p>
</div>
</div>
</div>
</div>
</body>
Thanks in advance!
I have it working so that the menu is stuck to the left the content is 100% of the rest of the pages width. To do this;
Sidebar Postion Fixed
Step One
Change - <div class="col-xs-6 col-sm-3 sidebar-offcanvas fixed" id="sidebar" role="navigation"> to - <div class="col-xs-6 col-sm-3 sidebar-offcanvas fixedSide" id="sidebar" role="navigation">
Step Two
Add the following to your CSS at the bottom of your CSS -
.fixedSide {
position: fixed;
top: 75px;
left: 0px;
bottom: 0px;
right: 0px;
}
Step 3
Remove the following from your current CSS;
.fixed {
width: 200px;
float: left;
}
Content 100%
Step 1
Add content fix class to <div class="col-xs-12 col-sm-9" style="background-color: blue;">
Step 2
Add the following CSS;
.contentfix {
margin-left: 20%;
width: 100%;
}
#media screen and (max-width: 767px) {
.contentfix {
margin-left: 0%;
}
}