Login/Register
Fixing navbar to top on scroll
Asked Answered
Solved twitter-bootstrapbootstrap-4navbaraffix
G

1

-1

We are trying to fix the navbar of the page to the top of the viewport as soon as the scroll reaches it, and also, to prevent it from going over the footer. We are trying to do it via affix (Bootstrap plugin) but it doesn't seem to sort any effect. Can you give some advice?

Here's the html of the sidebar:

<div id="sidebar-wrapper" class="affix-top" data-spy="affix-top" data-offset-top="250">
    <nav id="spy">
        <ul class="sidebar-nav nav">
            <li>
                <a href="#anchA" data-scroll>
                    <span class="fa fa-anchor solo selected">A</span>
                </a>
            </li>
            <!--
            … <li> elements for letters A-to-Z here
            -->
        </ul>
    </nav>
</div>

The page is available here: https://jsfiddle.net/br6n0hma/

Genus answered 26/1, 2018 at 15:5 Comment(1)
I'm not seeing any navbar in that fiddle and the code snippet posted here is incomplete. – Tuberculin
S
1

If I get your requirements right, you fill find the example below useful. Without all the fancy things, it shows a possible core structure of your layout.

Couple of notes:

  • #wrapper got a .d-flex class, so it is easier to position/size the sidebar and the content divs.
  • The sidebar sticks to the top thanks to .sticky-top on #spy.
  • .page-content node was extended with the .container-fluid class to properly wrap .row elements.
  • It uses the built-in Scrollspy functionality of Bootstrap, spying on the <body> itself. This allows to remove a part of your javascript. (This requires the .nav-link classes on the links in the sidebar.)

$(document).ready(function() {
    $('.nav-link').on('click', function(event) {
        $('.nav-link').removeClass('active');
        $(this).addClass('active');
    });
});
#sidebar-wrapper {
    /* Simple sizing of sidebar from one property */
    width: 250px;
    background: #000;
}

.sidebar-nav li {
    /* Rendering <li>-s into 2 columns */
    flex: 0 0 50%;
    max-width: 50%;
    text-align: right;  
}

.nav-link {
    color: #999999;
}

/* .active is added by scrollspy */
.nav-link.active {
    color: red;
    background: yellow;
}

.well {
    /* Just to mimic content */
    height: 50vh;
}
<body data-spy="scroll" data-target="#spy" data-offset="0">

    <div id="header" style="height: 400px; background: red;">
        <h1>header</h1>
    </div>

    <div id="wrapper" class="d-flex">
        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <nav id="spy" class="navbar sticky-top">
                <ul class="sidebar-nav nav">
                    <li><a class="nav-link" href="#anchA"><span class="selected">A</span></a></li>
                    <li><a class="nav-link" href="#anchB"><span>B</span></a></li>
                    <li><a class="nav-link" href="#anchC"><span>C</span></a></li>
                    <li><a class="nav-link" href="#anchD"><span>D</span></a></li>
                    <li><a class="nav-link" href="#anchE"><span>E</span></a></li>
                    <li><a class="nav-link" href="#anchF"><span>F</span></a></li>
                    <li><a class="nav-link" href="#anchG"><span>G</span></a></li>
                    <li><a class="nav-link" href="#anchH"><span>H</span></a></li>
                    <li><a class="nav-link" href="#anchI"><span>I</span></a></li>
                    <li><a class="nav-link" href="#anchJ"><span>J</span></a></li>
                    <li><a class="nav-link" href="#anchK"><span>K</span></a></li>
                    <li><a class="nav-link" href="#anchL"><span>L</span></a></li>
                    <li><a class="nav-link" href="#anchM"><span>M</span></a></li>
                    <li><a class="nav-link" href="#anchN"><span>N</span></a></li>
                    <li><a class="nav-link" href="#anchO"><span>O</span></a></li>
                    <li><a class="nav-link" href="#anchP"><span>P</span></a></li>
                    <li><a class="nav-link" href="#anchQ"><span>Q</span></a></li>
                    <li><a class="nav-link" href="#anchR"><span>R</span></a></li>
                    <li><a class="nav-link" href="#anchS"><span>S</span></a></li>
                    <li><a class="nav-link" href="#anchT"><span>T</span></a></li>
                    <li><a class="nav-link" href="#anchU"><span>U</span></a></li>
                    <li><a class="nav-link" href="#anchV"><span>V</span></a></li>
                    <li><a class="nav-link" href="#anchW"><span>W</span></a></li>
                    <li><a class="nav-link" href="#anchX"><span>X</span></a></li>
                    <li><a class="nav-link" href="#anchY"><span>Y</span></a></li>
                    <li><a class="nav-link" href="#anchZ"><span>Z</span></a></li>
                </ul>
            </nav>
        </div>

        <!-- Page content -->
        <div id="page-content-wrapper">
            <div class="page-content inset container-fluid">
                <div class="row">
                    <div class="jumbotron text-center">
                        <p>This glossary is a super lolcat.</p>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 well">
                        <legend id="anchA" class="orange-title">A</legend>
                    </div>
                    <div class="col-md-12 well">
                        <legend id="anchB" class="orange-title">B</legend>
                    </div>
                    <div class="col-md-12 well">
                        <legend id="anchC" class="orange-title">C</legend>
                    </div>
                    <div class="col-md-12 well">
                        <legend id="anchD" class="orange-title">D</legend>
                    </div>
                    <div class="col-md-12 well">
                        <legend id="anchE" class="orange-title">E</legend>
                    </div>
                    <div class="col-md-12 well">
                        <legend id="anchF" class="orange-title">F</legend>
                    </div>
                    <div class="col-md-12 well">
                        <legend id="anchG" class="orange-title">G</legend>
                    </div>
                    <div class="col-md-12 well">
                        <legend id="anchH" class="orange-title">H</legend>
                    </div>
                    <div class="col-md-12 well">
                        <legend id="anchI" class="orange-title">I</legend>
                    </div>
                    <div class="col-md-12 well">
                        <legend id="anchJ" class="orange-title">J</legend>
                    </div>
                    <div class="col-md-12 well">
                        <legend id="anchK" class="orange-title">K</legend>
                    </div>
                    <div class="col-md-12 well">
                        <legend id="anchL" class="orange-title">L</legend>
                    </div>
                    <div class="col-md-12 well">
                        <legend id="anchM" class="orange-title">M</legend>
                    </div>
                    <div class="col-md-12 well">
                        <legend id="anchN" class="orange-title">N</legend>
                    </div>
                    <div class="col-md-12 well">
                        <legend id="anchO" class="orange-title">O</legend>
                    </div>
                    <div class="col-md-12 well">
                        <legend id="anchP" class="orange-title">P</legend>
                    </div>
                    <div class="col-md-12 well">
                        <legend id="anchQ" class="orange-title">Q</legend>
                    </div>
                    <div class="col-md-12 well">
                        <legend id="anchR" class="orange-title">R</legend>
                    </div>
                    <div class="col-md-12 well">
                        <legend id="anchS" class="orange-title">S</legend>
                    </div>
                    <div class="col-md-12 well">
                        <legend id="anchT" class="orange-title">T</legend>
                    </div>
                    <div class="col-md-12 well">
                        <legend id="anchU" class="orange-title">U</legend>
                    </div>
                    <div class="col-md-12 well">
                        <legend id="anchV" class="orange-title">V</legend>
                    </div>
                    <div class="col-md-12 well">
                        <legend id="anchW" class="orange-title">W</legend>
                    </div>
                    <div class="col-md-12 well">
                        <legend id="anchX" class="orange-title">X</legend>
                    </div>
                    <div class="col-md-12 well">
                        <legend id="anchY" class="orange-title">Y</legend>
                    </div>
                    <div class="col-md-12 well">
                        <legend id="anchZ" class="orange-title">Z</legend>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer style="height:250px; background: green;">
        <h1>footer</h1>
    </footer>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

</body>
Salinas answered 29/1, 2018 at 0:13 Comment(3)
That's a great solution! Any way to have the left menu on one column instead of two? – Genus
Sure, just check the css of .sidebar-nav li above and remove these two properties: flex: 0 0 50% and max-width: 50%. – Salinas
Happy to help, and by the way welcome to Stack Overflow. If this answer or any other one on the site solved your issue, please mark it as accepted. Grazie! – Salinas

© 2022 - 2024 — McMap. All rights reserved.