• 前端基础之《Bootstrap（12）—JavaScript插件_滚动监听、侧边栏浮动》

    一、滚动监听
    滚动文件，监听它的位置，然后有个缩略地图跟着走。一楼，二楼，三楼，四楼，回到顶部。

    1、使用导航条+面板组合

    2、滚动监听，滚动区域就是监听的区域
    监听的是整个body区域。

    （1）所以body必须要相对定位：

    1. body {
    2.   position: relative;
    3. }

    （2）在body身上加上【data-spy="scroll" data-target="#mynav"】

    （3）找到页面上的导航菜单nav标签，加上【id="mynav"】

    （4）在导航栏四个列表的href上加上，我要监听的是下文中id是谁的高度

    1. <ul class="nav navbar-nav">
    2.   <li class="active"><a href="#linux">linuxa>li>
    3.   <li><a href="#js">jsa>li>
    4.   <li><a href="#php">phpa>li>
    5.   <li><a href="#html">htmla>li>
    6. ul>

    （5）在下文中panel-title中h1标题上加上id值

    （6）离目标多远的时候命中，在body标签上加上【data-offset="100"】
    计算滚动位置时相对于顶部的偏移量（像素数）。

    二、滚动监听例子

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5. <meta charset="UTF-8">
    6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    7. <link rel="stylesheet" type="text/css" href="bs/css/bootstrap.css">
    8. <script src="bs/js/jquery-3.6.1.js">script>
    9. <script src="bs/js/bootstrap.js">script>
    10. <script src="bs/js/holder.js">script>
    11. <title>bootstraptitle>
    12. <style>
    13.     body {
    14.         padding-top: 30px;
    15.         position: relative;
    16.     }
    17. style>
    18. head>
    19.  
    20. <body data-spy="scroll" data-target="#mynav" data-offset="150">
    21. 	<div class="container">
    22.         <h1 class="page-header">bootstrap前端框架h1>
    23.  
    24.         
    25.         <nav class="navbar navbar-inverse navbar-fixed-top" id="mynav">
    26.             <div class="container-fluid">
    27.               
    28.               <div class="navbar-header">
    29.                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    30.                   <span class="sr-only">Toggle navigationspan>
    31.                   <span class="icon-bar">span>
    32.                   <span class="icon-bar">span>
    33.                   <span class="icon-bar">span>
    34.                 button>
    35.                 <a class="navbar-brand" href="#">Branda>
    36.               div>
    37.           
    38.               
    39.               <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    40.                 <ul class="nav navbar-nav">
    41.                   <li class="active"><a href="#linux">linuxa>li>
    42.                   <li><a href="#js">jsa>li>
    43.                   <li><a href="#php">phpa>li>
    44.                   <li><a href="#html">htmla>li>
    45.                 ul>
    46.                 
    47.               div>
    48.             div>
    49.         nav>
    50.  
    51.         
    52.         <div class="panel panel-primary">
    53.             <div class="panel-heading">
    54.                 <div class="panel-title">
    55.                     <h1 id="linux">linux技术文章h1>
    56.                 div>
    57.             div>
    58.             <div class="panel-body">
    59.                 <p>linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章
    60.                     linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章
    61.                 p>
    62.             div>
    63.         div>
    64.  
    65.         <div class="panel panel-primary">
    66.             <div class="panel-heading">
    67.                 <div class="panel-title">
    68.                     <h1 id="js">js技术文章h1>
    69.                 div>
    70.             div>
    71.             <div class="panel-body">
    72.                 <p>linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章
    73.                     linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章
    74.                 p>
    75.             div>
    76.         div>
    77.  
    78.         <div class="panel panel-primary">
    79.             <div class="panel-heading">
    80.                 <div class="panel-title">
    81.                     <h1 id="php">php技术文章h1>
    82.                 div>
    83.             div>
    84.             <div class="panel-body">
    85.                 <p>linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章
    86.                     linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章
    87.                 p>
    88.             div>
    89.         div>
    90.  
    91.         <div class="panel panel-primary">
    92.             <div class="panel-heading">
    93.                 <div class="panel-title">
    94.                     <h1 id="html">html技术文章h1>
    95.                 div>
    96.             div>
    97.             <div class="panel-body">
    98.                 <p>linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章
    99.                     linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章linux技术文章
    100.                 p>
    101.             div>
    102.         div>
    103.     div>
    104. body>
    105.  
    106. <script>
    107. 	
    108. script>
    109.  
    110. html>

    三、侧边栏浮动
    bootstrap3中无法实现滚动。

  • 相关阅读:
    Hadoop 分布式集群搭建教程（2023在校生踩坑版）
    浅析 Redis 中 String 数据类型及其底层编码
    nginx正反向代理，负载均衡
    论文解读：Segment Anything
    jquery常用方法积累
    安达发|可视化APS高级排产系统实现精益制造
    爬取Elastic Stack采集的Nginx内容
    QT软件开发-基于FFMPEG设计视频播放器-支持软解与硬解（二）
    “揭秘！京东关键字搜索接口，轻松获取海量精准商品信息！“
    翻了ConcurrentHashMap1.7 和1.8的源码，我总结了它们的主要区别。
  • 原文地址：https://blog.csdn.net/csj50/article/details/127805828