locked
How to create sticky long sidebar that starts and ends in specific points and scrolls within RRS feed

  • Question

  • User959284418 posted

    How can I implement this link's sidebar that sticks when it reaches the end of the sidebar and also sticks when it reaches top of it and it's fixed only until you reach some points.
    when we use fixed position it doesn't scroll within the element and also how we should stop scrolling the sidebar when it reaches for example the footer area.
    I hope you get what I meant.
    Thanks in advance

    Monday, October 26, 2020 5:00 PM

All replies

  • User1535942433 posted

    Hi kasrap,

    Accroding to your description,I'm guessing that you want affix navbar. I suggest you could use bootstrap. Or you could use sticky-top.

    More details,you could refer to below codes:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>  
        <style>
            body {
                padding-top: 50px;
            }
            #masthead {
                min-height: 270px;
                background-color: #000044;
                color: #aaaacc;
            }
                #masthead h1 {
                    font-size: 55px;
                    line-height: 1;
                }
                #masthead .well {
                    margin-top: 13%;
                    background-color: #111155;
                    border-color: #000033;
                }
            .icon-bar {
                background-color: #fff;
            }
            @media screen and (min-width: 768px) {
                #masthead h1 {
                    font-size: 100px;
                }
            }
            .navbar-bright {
                background-color: #111155;
                color: #fff;
            }
                .navbar-bright a, #masthead a, #masthead .lead {
                    color: #aaaacc;
                }
                .navbar-bright li > a:hover {
                    background-color: #000033;
                }
            .affix-top, .affix {
                ;
            }
            #sidebar {
                background-color: #eee;
            }
                #sidebar li.active {
                    border: 0 #ddd solid;
                    border-right-width: 4px;
                }
            @media screen and (min-width: 992px) {
                #sidebar .nav > .active > ul {
                    display: block;
                }
                /* Widen the fixed sidebar */
                #sidebar.affix-top {
                    ;
                    margin-top: 30px;
                    width: 234px;
                }
                #sidebar.affix,
                #sidebar.affix-bottom {
                    width: 234px;
                }
                #sidebar.affix {
                    ;
                    top: 100px;
                }
                #sidebar.affix-bottom {
                    ;
                }
            }
            @media screen and (min-width: 1200px) {
                #sidebar.affix-bottom,
                #sidebar.affix {
                    width: 234px;
                }
            }
            footer {
                padding-top: 40px;
                padding-bottom: 30px;
                margin-top: 100px;
                color: #777;
                border-top: 1px solid #e5e5e5;
            }
        </style>
        <script>
            $(function () {
                var $body = $(document.body);
                var navHeight = $('.navbar').outerHeight(true) + 10;
                $('#sidebar').affix({
                    offset: {
                        /* affix after top masthead */
                        top: function () {
                            var navOuterHeight = $('#masthead').height();
                            return this.top = navOuterHeight;
                        },
                        /* un-affix when footer is reached */
                        bottom: function () {
                            return (this.bottom = $('footer').outerHeight(true))
                        }
                    }
                });
                $body.scrollspy({
                    target: '#leftCol',
                    offset: navHeight
                });
            })
        </script>
    <header class="navbar navbar-bright navbar-fixed-top" role="banner">
                <div class="container">
                    <div class="navbar-header">
                        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a href="/" class="navbar-brand">Bootply</a>
                    </div>
                    <nav class="collapse navbar-collapse" role="navigation">
                        <ul class="nav navbar-nav">
                            <li>
                                <a href="#sec">Get Started</a>
                            </li>
                            <li>
                                <a href="#sec">Edit</a>
                            </li>
                            <li>
                                <a href="#sec">Visualize</a>
                            </li>
                            <li>
                                <a href="#sec">Prototype</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </header>
            <div id="masthead">
                <div class="container">
                    <div class="row">
                        <div class="col-md-7">
                            <h1>Bootply       
                                <p class="lead">The easiest way to apply Bootstrap</p>
                            </h1>
                        </div>
                        <div class="col-md-5">
                            <div class="well well-lg">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <img src="//placehold.it/180x100" class="img-responsive">
                                    </div>
                                    <div class="col-sm-6">
                                        <strong>Important</strong>
                                        <p>Blah blah blah blah bla!</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /cont -->
            </div>
            <!-- Begin Body -->
            <div class="container">
                <div class="row">
                    <div class="col-md-3" id="leftCol">
    
                        <ul class="nav nav-stacked affix-top" id="sidebar">
                            <li><a href="#sec0">Section 0</a></li>
                            <li><a href="#sec1">Section 1</a></li>
                            <li><a href="#sec2">Section 2</a></li>
                            <li><a href="#sec3">Section 3</a></li>
                            <li><a href="#sec4">Section 4</a></li>
                        </ul>
                    </div>
                    <div class="col-md-9">
                        <h2 id="sec0">Content</h2>
                        At Bootply we like to build simple Bootstrap templates that utilize the code Bootstap CSS without a lot of customization. Sure you can 
                  	find a lot of Bootstrap themes and inspiration, but these templates tend to be heavy on customization.
                        <hr class="col-md-12">
                        Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae 
                    dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores 
                    eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, 
                    sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. 
                    Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut.              
                  	Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae 
                    dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores 
                    eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, 
                    sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. 
                    Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut!
                        <h2 id="sec1">Content</h2>
                        <p>
                            Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae 
                    dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut.            
                        </p>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h3>Hello.</h3>
                                    </div>
                                    <div class="panel-body">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
                          Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
                          dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
                          Aliquam in felis sit amet augue.                 
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h3>Hello.</h3>
                                    </div>
                                    <div class="panel-body">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
                          Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
                          dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
                          Aliquam in felis sit amet augue.                  
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <h2 id="sec2">Section 2</h2>
                        <p>
                            Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae 
                    dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores 
                    eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, 
                    sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. 
                    Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut!            
                        </p>
                        <div class="row">
                            <div class="col-md-4">
                                <img src="//placehold.it/300x300" class="img-responsive">
                            </div>
                            <div class="col-md-4">
                                <img src="//placehold.it/300x300" class="img-responsive">
                            </div>
                            <div class="col-md-4">
                                <img src="//placehold.it/300x300" class="img-responsive">
                            </div>
                        </div>
                        <hr>
                        <h2 id="sec3">Section 3</h2>
                        Images are responsive sed @mdo but sum are more fun peratis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
                    totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae 
                    dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores 
                    eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, 
                    sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. 
                    Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
                        <h2 id="sec4">Section 4</h2>
                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
                    totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae 
                    dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores 
                    eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, 
                    sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. 
                    Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
                        <hr>
                        <h4><a href="http://bootply.com/84981">Edit on Bootply</a></h4>
                        <hr>
                    </div>
                </div>
            </div>
            <footer role="contentinfo">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <h1>FOOTER GOES HERE</h1>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac felis sed eros bibendum tincidunt. In vel lectus sit amet velit ullamcorper sollicitudin eu lacinia nisi. Ut sagittis massa non ultricies hendrerit. Fusce non mauris augue. Phasellus imperdiet nisi quis ante commodo dignissim. Aenean vel bibendum ipsum. Proin lobortis lobortis felis nec aliquet. Nunc vestibulum quis enim eu venenatis. Vivamus consectetur justo nec quam euismod, ac pellentesque justo varius. Morbi vel dolor at nisi dictum convallis nec eu ligula. Duis consequat purus ut neque bibendum convallis. Aliquam tempor justo diam, sed dapibus diam laoreet aliquam. Curabitur feugiat neque quis nunc tincidunt porttitor. Integer in nulla metus. Proin pulvinar, massa quis bibendum ullamcorper, arcu arcu convallis mi, ut egestas eros dolor non lacus. Morbi id orci sapien. Mauris quis congue eros. Donec a nibh feugiat, elementum nisi in, bibendum velit. Morbi non est at urna convallis interdum ac ac mi. Donec pretium nulla sit amet dapibus dapibus. Mauris interdum sed mauris eu congue. Nunc id adipiscing elit. Aenean risus mi, tempus vel lectus sed, egestas pulvinar mi. Vestibulum dolor erat, tempor at erat sit amet, consectetur scelerisque felis. Aenean sit amet congue velit. Sed tincidunt facilisis fringilla. Ut feugiat dolor sed risus vehicula facilisis. Integer dolor ligula, porttitor a mi eu, hendrerit fermentum tortor. Sed et dui arcu. Donec dui sem, tincidunt quis lorem fringilla, rutrum hendrerit arcu. Suspendisse quis arcu tincidunt, tincidunt risus condimentum, sodales massa. Maecenas aliquet elit in tortor placerat, nec sagittis augue condimentum. Integer laoreet vitae erat semper pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec egestas nisi nec mi facilisis, eget ultricies est posuere. Integer tempor bibendum pellentesque. Nulla pretium sollicitudin mi id rhoncus. Aliquam eget congue nunc. Maecenas tincidunt nulla quis metus pellentesque pulvinar. Maecenas tincidunt sapien ac odio aliquam, id malesuada sem condimentum. Nam neque eros, aliquet non sem ut, ornare rutrum libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec et leo metus. Fusce elit nunc, elementum vitae egestas sit amet, consectetur nec ipsum. Aenean nisl libero, rutrum eget lacinia vel, faucibus ultrices turpis. Nullam nunc metus, auctor sed mi in, convallis euismod mi. Nulla pulvinar scelerisque mauris vel varius. Nunc eu condimentum odio, eget placerat sem. Integer suscipit, sapien vitae laoreet convallis, velit nibh pellentesque felis, quis tristique nulla orci eu felis. Duis eu turpis rutrum, malesuada augue vitae, posuere nisi. Etiam vitae dolor eget dui eleifend fermentum. Mauris convallis, risus vitae congue ultricies, nibh velit vehicula arcu, at tempor risus metus vitae diam. Donec pretium euismod mi id porta. Integer dictum diam at erat feugiat, eu fringilla mi molestie. Phasellus interdum ultricies aliquet. Donec a elementum risus. Phasellus non fringilla tellus, eu convallis augue. Aliquam enim lectus, vulputate ut sem et, fringilla commodo erat. Aliquam urna magna, auctor scelerisque nisi a, egestas tempor nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac felis sed eros bibendum tincidunt. In vel lectus sit amet velit ullamcorper sollicitudin eu lacinia nisi. Ut sagittis massa non ultricies hendrerit. Fusce non mauris augue. Phasellus imperdiet nisi quis ante commodo dignissim. Aenean vel bibendum ipsum. Proin lobortis lobortis felis nec aliquet. Nunc vestibulum quis enim eu venenatis. Vivamus consectetur justo nec quam euismod, ac pellentesque justo varius. Morbi vel dolor at nisi dictum convallis nec eu ligula. Duis consequat purus ut neque bibendum convallis. Aliquam tempor justo diam, sed dapibus diam laoreet aliquam. Curabitur feugiat neque quis nunc tincidunt porttitor. Integer in nulla metus. Proin pulvinar, massa quis bibendum ullamcorper, arcu arcu convallis mi, ut egestas eros dolor non lacus. Morbi id orci sapien.
                        </div>
                    </div>
                </div>
            </footer>

    Result:

    More details,you could refer to below article:

    https://www.w3schools.com/bootstrap/bootstrap_affix.asp

    Best regards,

    Yijing Sun

    Tuesday, October 27, 2020 2:47 AM