bootstrap-js组件-滚动监听

最新推荐文章于 2022-11-11 14:37:08 发布

嫌疑-人

最新推荐文章于 2022-11-11 14:37:08 发布

阅读量307

点赞数

分类专栏： bootstrap 文章标签： bootstrap javascript css data-spy

本文链接：https://blog.csdn.net/qq_39396275/article/details/81478704

版权

bootstrap 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

注意的点：
1.设置body属性：position: relative;
2.设置body属性：data-target=’#导航条的id’
3.设置body属性：data-offset;来表示内容距顶部的高度范围
4.让导航的a标签来通过id确定应该显示的标题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery.1.12.4.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/holder.js"></script>
    <title>Bootstrap</title>
</head>
<style type="text/css">
    *{
        font-family: 微软雅黑;
    }
    body{
        position: relative;
        padding-top: 60px;
    }
</style>
<body data-spy='scroll' data-target='#mynavbar' data-offset='200'>
    <div class="container">
        <!-- navbar  begining -->
        <nav class="navbar navbar-inverse navbar-fixed-top" id="mynavbar"> <!-- navbar-default 默认灰色； navbar-inverse :黑灰色-->
            <div class="container">
                    <div class="navbar-header">
                        <!-- 标题 -->
                        <a href="#" class="navbar-brand">Brand</a><!--  也可以换成logo图片 -->
                        <!-- 设置合并后的菜单按钮 -->
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsed_navbar">
                            <span class="sr-only">Toggle navigation</span>
                            <!-- 三条横线 -->
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <!-- 可折叠的菜单栏 -->
                    <div id="collapsed_navbar" class="collapse navbar-collapse">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#java">java</a></li>
                            <li><a href="#js">javascript</a></li>
                            <li><a href="#bs">bootstrap</a></li>
                            <li><a href="#vue">vue</a></li>
                            <li><a href="#jq">jquery</a></li>
                        </ul>
                    </div>
            </div>
        </nav>
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="panel-title">
                    <h2 id="java">java</h2>
                </div>
            </div>
            <div class="panel-body">
                <img src="holder.js/1100x500">
                <p>java is good!</p>
            </div>

            <div class="panel-heading">
                <div class="panel-title">
                    <h2 id="js">javascript</h2>
                </div>
            </div>
            <div class="panel-body">
                <img src="holder.js/1100x500">
                <p>javascript is good!</p>
            </div>
            <div class="panel-heading">
                <div class="panel-title">
                    <h2 id="bs">bootstrap</h2>
                </div>
            </div>
            <div class="panel-body">
                <img src="holder.js/1100x500">
                <p>bootstrap is good!</p>
            </div>
            <div class="panel-heading">
                <div class="panel-title">
                    <h2 id="vue">vue</h2>
                </div>
            </div>
            <div class="panel-body">
                <img src="holder.js/1100x500">
                <p>vue is good!</p>
            </div>
            <div class="panel-heading">
                <div class="panel-title">
                    <h2 id="jq">jquery</h2>
                </div>
            </div>
            <div class="panel-body">
                <img src="holder.js/1100x500">
                <p>jquery is good!</p>
            </div>

        </div>
    </div>
</body>
</html>