将导航栏固定到滚动顶部

Question

我们试图在滚动到达页面时将页面的导航栏固定到视口的顶部，同时防止它越过页脚。我们正在尝试通过词缀（Bootstrap 插件）来做到这一点，但它似乎没有任何效果。你能给点建议吗？

这是侧边栏的html：

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

页面位于此处：https://jsfiddle.net/br6n0hma/

Answer 1

如果我的要求正确，您会发现下面的示例很有用。没有所有花哨的东西，它显示了布局的可能核心结构。

一些注意事项：

#wrapper 得到了 .d-flex class，所以 position/size 侧边栏和内容 div 更容易
由于 #spy 上的 .sticky-top，侧边栏保持在顶部。
.page-content 节点已使用 .container-fluid class 扩展以正确包装 .row 元素。
它使用 Bootstrap 的内置 Scrollspy 功能，监视 <body> 本身。这允许删除 javascript 的一部分。（这需要侧边栏中的链接上的 .nav-link classes。）

$(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>

将导航栏固定到滚动顶部

Fixing navbar to top on scroll

twitter-bootstrap

bootstrap-4

navbar

affix