Fixing navbar to top on scroll

问题

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/

回答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>

来源：https://stackoverflow.com/questions/48464026/fixing-navbar-to-top-on-scroll

标签

twitter-bootstrap

bootstrap-4

navbar

affix