首页 > 代码库 > bootstrap-滚动监听

bootstrap-滚动监听

2024-08-25 20:55:32   225人阅读

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css" />
<title>滚动监听</title>
<style type="text/css">
    body{
        height: 2000px; 
    }
    h2{
        height: 100px;
    }
    h3{
        height: 100px
    }
    #subNav{
        position: fixed;
        top: 0;
    }
    .nav a{
        color: #666;
    }
    .nav ul{
        display: none;
    }
    .nav .nav>li>a{
        padding: 5px 15px;
        padding-left: 35px;
    }
    .nav .active ul{
        display: block;
    }
    ul .active>a{
        border-left: 3px solid red;
        color: #a94442;
        font-weight: 600;
    }
    .nav .nav .active>a{
        border-left: 3px solid red;
        color: #428bca;
        padding-left: 32px;
    }
    .nav>li>a:hover{
        border-left: 1px solid red;
        color: #428bca;
        font-weight: 600;
        background-color: transparent;
        padding-left: 34px;
    }

</style>
</head>
<body data-spy="scroll" data-target="#subNav">
<div class="container">
    <div class="row">
        <div class="col-lg-9">
            <div class="section">
                <h2 id="gailan">概览</h2>
                <h3 id="dange">单个还是全局引入</h3>
                <p>JavaScript 插件可以单个引入（使用 Bootstrap 提供的单个 *.js 文件），或者一次性全部引入（使用 bootstrap.js 或压缩版的 bootstrap.min.js）。</p>
                <h3 id="data">data 属性</h3>
                <h3 id="biancheng">编程方式的 API</h3>
                <h3 id="bimian">避免命名空间冲突</h3>
                <h3 id="shijian">事件</h3>
                <h3 id="weidui">未对禁用 JavaScript 的浏览器提供补救措施</h3>
                <h3 id="disan">第三方工具库</h3>
            </div>
        </div>
        <div class="col-lg-3">
            <div id="subNav" class="navbar-collapse">
                <ul class="nav">
                    <li>
                        <a href="#gailan">概览</a>
                        <ul class="nav">
                            <li><a href="#dange">单个还是全部引入</a></li>
                            <li><a href="#data">data 属性</a></li>    
                            <li><a href="#biancheng">编程方式的 API</a></li>
                            <li><a href="#bimian">避免命名空间冲突</a></li>
                            <li><a href="#shijian">事件</a></li>    
                            <li><a href="#weidui">未对禁用 JavaScript 的浏览器提供补救措施</a></li>
                            <li><a href="#disan">第三方工具库</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
</body>
</html>

效果图：

技术分享

bootstrap-滚动监听


联系
我们