How to use Scrollspy with bootstrap 4?
When scroll fixed left sidebar and then go to the footer the section then fixed from the footer content.
The main concept for the fixing left sidebar then we need to
get height from the main page container and also, get the height of the footer and us
need to fix from the bottom when getting new height otherwise need to fixed from
the top position with the data content. I think you will be more understanding
when you will be use code as below example:
var footerBottomHeight = pageHeight - footerHeight;
var bottomHeight = footerBottomHeight - dataContentHeight ;
Scrollspy example with bootstrap 4.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<meta name="viewport" content ="width=device-width, initial-scale=1, shrink-to-fit=no" >
<link rel="stylesheet" href ="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css ">
<style>
header{height: 200px ; background: #0bf; color: #fff ; text-align: center;}
.fixedClass{position : fixed; width: 250px;}
footer{height: 400px ; background: #eee; border-top : 1px solid #ccc;}
</style>
</head>
<body data-spy="scroll" data-target ="#list-example">
<header>
<div class="container">
<div class="row">
<div class="col-12" >
<h1 class="text-center pt-4" >Header content </h1>
</div>
</div>
</div>
</header>
<section class="py-5">
<div class="container">
<div class="row">
<div class="col-lg-3" >
<div id="list-example" class="list-group" >
<a class ="list-group-item list-group-item-action" href="#list-item-1" >Item 1</a>
<a class ="list-group-item list-group-item-action" href="#list-item-2" >Item 2</a>
<a class ="list-group-item list-group-item-action" href="#list-item-3" >Item 3</a>
<a class ="list-group-item list-group-item-action" href="#list-item-4" >Item 4</a>
</div>
</div>
<div class="col-lg-9" >
<div data-spy ="scroll" data-target="#list-example" data-offset="0" class ="scrollspy-example">
<h4 id= "list-item-1">Item 1</h4>
<p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id
<ul class ="list-group">
<li class="list-group-item">Cras justo odio </li>
<li class="list-group-item">Dapibus ac facilisis in </li>
<li class="list-group-item">Morbi leo risus </li>
<li class="list-group-item">Porta ac consectetur ac </li>
<li class="list-group-item">Vestibulum at eros </li>
</ul>
<p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id
<h4 id= "list-item-2">Item 2</h4>
<p>Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum
</p>
<p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id
<h4 id= "list-item-3">Item 3</h4>
<p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud
<p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id
<p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id
<h4 id= "list-item-4">Item 4</h4>
<p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row mt-5" >
<div class="col-12" >
<h2 class="text-center pt-4" >Footer content </h2>
</div>
</div>
</div>
</footer>
<script>
var pageHeight = $(document ).height(); // Main page height
var footerHeight = $('footer' ).height(); // footer container height
var dataContentHeight = $('#list-example').height();
var footerBottomHeight = pageHeight - footerHeight;
var bottomHeight = footerBottomHeight - dataContentHeight ;
var mainpagewidth = $(window ).width();
if (mainpagewidth > 992 ) {
// it would be work when we go on the responsive
$(window).scroll(function () {
if (jQuery(document ).scrollTop() > 260) {
jQuery('#list-example' ).addClass('fixedClass' ).css('top', '0');
if (jQuery( document).scrollTop() > bottomHeight ) {
jQuery( '#list-example').removeAttr('style' ).css('bottom', footerHeight );
}
} else {
jQuery('#list-example' ).removeAttr('style' ).removeClass('fixedClass' );
}
});
} else {
jQuery('#list-example' ).removeAttr('style').removeClass ('fixedClass');
}
</script>
</body>
No comments:
Note: Only a member of this blog may post a comment.