bootstrap实现垂直滚动监听

最新推荐文章于 2023-07-24 22:10:38 发布

smile radiantly

最新推荐文章于 2023-07-24 22:10:38 发布

阅读量1.2k

点赞数

分类专栏：前端问题集文章标签： bootstrap

本文链接：https://blog.csdn.net/zhixingwu/article/details/102806253

版权

前端问题集专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在工作中，需要将导航条放在右侧，并实现垂直滚动监听效果，在实现时遇到的一个坑在此记录一下，以便后续查看。
坑：实现后，发现点击导航条中a按钮可以定位到页面相关内容(类似锚点效果)，但高亮效果不能随之跟着变化。之后写了个小demo，发现效果都是好的，但是引入到项目中，高亮效果始终不能跟着随之变化，高亮始终显示是最后一个列表。花了一下午时间，最后发现自己代码和demo只差“≶ !DOCTYPE html>”这条语句，添加之后果然好了。至于原因不太清楚，去看了scrollspy.js这个插件源码没看太懂，哪位大佬看到能解释一下吗

html：

<%-- <!DOCTYPE html>这条必须要写，不然滚动监听时高亮显示不会跟随 --%>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>gms_result</title>
    <%-- 支持移动设备优先 --%>
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">

    <div class="container">
        <div class="row">
            <nav class="col-sm-3" id="myScrollspy">
                <div class="container-fluid">
                    <div class="container-fluid">
                        <ul class="nav nav-pills nav-stacked">
                            <li class="active"><a href="#ctsIn_content">CTSIS</a></li>
                            <li><a href="#cts_content">CTS</a></li>
                            <li><a href="#gsi_content">GSI</a></li>
                            <li><a href="#gts_content">GTS</a></li>
                            <li><a href="#vts_content">VTS</a></li>
                            <li><a href="#sts_content">STS</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <div class="container-fluid" id="box">
    	<div>
            <h2 id="ctsIn_content" class="h2_style">cts-instant</h2>
            <div class="ct1">cts-instant</div>
        </div>
        <div>
            <h2 id="cts_content" class="h2_style">cts</h2>
            <div class="ct2">cts</div>
        </div>
        <div>
            <h2 id="gsi_content" class="h2_style">gsi</h2>
            <div class="ct3">gsi</div>
        </div>
        <div>
            <h2 id="gts_content" class="h2_style">gts</h2>
            <div class="ct4">gts</div>
        </div>
        <div>
            <h2 id="vts_content" class="h2_style">vts</h2>
            <div class="ct5">vts</div>
        </div>
        <div>
            <h2 id="sts_content" class="h2_style">sts</h2>
            <div class="ct6">sts</div>
        </div    </div>

css：

	body {position: relative;}
    ul.nav-pills {
        top: 40px;
        position: fixed;
        right: 5px;
        text-align: center;
        padding-top: 10px;
        padding-bottom: 10px;
        background-color: #ADD8E6;
        border-radius: 10px;
        overflow: hidden;
    }
    div.ct1,div.ct2,div.ct3,div.ct4,div.ct5,div.ct6{
    	height: 250px;font-size: 28px;color: #fff;
    }
	div.ct1 { background-color: #1E88E5;}
	div.ct2 { background-color: #673ab7;}
	div.ct3 { background-color: #ff9800;}
	div.ct4 { background-color: #00bcd4;}
	div.ct5 { background-color: #009688;}
	div.ct6 { background-color: #002365;}