Home bootstrap 4 Scrollspy How to use Scrollspy with bootstrap 4?

How to use Scrollspy with bootstrap 4?

5:52 AM
Read
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
                            magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur
                            labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do
                            non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et
                            incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit
                            dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit
                            ut eiusmod cupidatat elit dolore.</p>
                        <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
                            magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur
                            labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do
                            non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et
                            incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit
                            dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit
                            ut eiusmod cupidatat elit dolore.</p>
                        <h4 id="list-item-2">Item 2</h4>
                        <p>Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum
                            consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur
                            mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit
                            elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi
                            sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor
                            excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.
                        </p>
                        <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id
                            magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur
                            labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do
                            non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et
                            incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit
                            dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit
                            ut eiusmod cupidatat elit dolore.</p>
                        <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
                            aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor
                            reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa
                            irure ullamco est ex ullamco excepteur.</p>
                        <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id
                            magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur
                            labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do
                            non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et
                            incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit
                            dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit
                            ut eiusmod cupidatat elit dolore.</p>
                        <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id
                            magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur
                            labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do
                            non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et
                            incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit
                            dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit
                            ut eiusmod cupidatat elit dolore.</p>
                        <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
                            aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor
                            reprehenderit.</p>

                    </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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <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>

</html>

Tags :

No comments:

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments ( Atom )
Copyright Reserved to Anything Learn. Powered by Blogger.