将导航栏固定在滚动顶部答案

【问题标题】：Fixing navbar to top on scroll将导航栏固定在滚动顶部
【发布时间】：2018-01-26 15:05:38
【问题描述】：

我们试图在滚动到达时将页面的导航栏固定到视口的顶部，同时防止它越过页脚。我们正在尝试通过词缀（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/

【问题讨论】：

我在该小提琴中没有看到任何导航栏，并且此处发布的代码 sn-p 不完整。

标签： twitter-bootstrap bootstrap-4 navbar affix

【解决方案1】：

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

几个笔记：

#wrapper 有一个 .d-flex 类，因此更容易定位/调整侧边栏和内容 div。
感谢.sticky-top #spy 上的侧边栏。
.page-content 节点使用 .container-fluid 类进行了扩展，以正确包装 .row 元素。
它使用 Bootstrap 的内置 Scrollspy 功能，监视 <body> 本身。这允许删除您的 javascript 的一部分。（这需要侧边栏中的链接上的 .nav-link 类。）

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

【讨论】：

这是一个很好的解决方案！有什么办法让左侧菜单在一列而不是两列？
当然，只要检查上面.sidebar-nav li的css并删除这两个属性：flex: 0 0 50%和max-width: 50%。
很高兴为您提供帮助，顺便欢迎使用 Stack Overflow。如果此答案或网站上的任何其他答案解决了您的问题，请将其标记为已接受。感恩！