滚动监听,bootstrap头文件引用方式

最新推荐文章于 2022-05-29 15:10:36 发布

qq_26495107

最新推荐文章于 2022-05-29 15:10:36 发布

阅读量304

点赞数

分类专栏： bootstrap表单

本文链接：https://blog.csdn.net/qq_26495107/article/details/72853749

版权

bootstrap表单专栏收录该内容

8 篇文章 0 订阅

订阅专栏

头文件
<meta charset="UTF-8">
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script  src="./js/jquery.min.js"></script>
<script  src="./js/bootstrap.min.js"></script>

<!-- 滚 动 监 听 -->
<style>
    #sec1,#sec2,#sec3{
        height:800px;
    }
    #sec1{
        background: red;
    }
    #sec2{
        background: green;
    }
    #sec3{
        background: blue;
    }
    #daohang{
        position: fixed;
        top: 10px;
    }
    </style>
<body data-spy='scroll'>
<!-- 滚 动 监 听 -->
<div class="row">
    <div class="col-lg-1">
        <nav id="daohang">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href='#sec1'>第一</a></li>
                <li><a href='#sec2'>第二</a></li>
                <li><a href='#sec3'>第三</a></li>
            </ul>
        </nav>
    </div>
    <div class="col-lg-11">
        <div id="sec1">aaa</div>
        <div id="sec2">bbbbb</div>
        <div id="sec3">cccccc</div>
    </div>
</div>

<!--js控制 滚 动 监 听-->
<style>
    #sec1,#sec2,#sec3{
        height:800px;
    }
    #sec1{
        background: red;
    }
    #sec2{
        background: green;
    }
    #sec3{
        background: blue;
    }
    #daohang{
        position: fixed;
        top: 10px;
    }
    </style>
<body >
<!-- js控制滚 动 监 听 -->
<div class="container">
<div class="row">
    <div class="col-lg-3" id="mycroll">
        <nav id="daohang">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href='#sec1'>第一</a></li>
                <li><a href='#sec2'>第二</a></li>
                <li><a href='#sec3'>第三</a></li>
            </ul>
        </nav>
    </div>
    <div class="col-lg-9">
        <div id="sec1"><h1>aaa</h1></div>
        <div id="sec2"><h1>bbbbb</h1> </div>
        <div id="sec3"><h1>cccccc</h1> </div>
    </div>
</div>
</div>

<script>
$(function(){
    $("body").scrollspy({
        target:'#mycroll'
    })
    $("#mycroll").on('activate.bs.scrollspy',function(){
        var data = $("#daohang li.active").text()
        alert(data)
    })
})
</script>

qq_26495107

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
滚动监听,bootstrap头文件引用方式

<style> #sec1,#sec2,#sec3{ height:800px; } #sec1{ background: red; } #sec2{ background: green; } #sec3{ background: blue;
复制链接

扫一扫