Fixing navbar to top on scroll

2019-09-20 03:39发布

站内问答 / 移动开发
1328 1 4

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条回答
SAY GOODBYE
2楼-- · 2019-09-20 04:21

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>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)