• 前端基础之《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中无法实现滚动。

  • 相关阅读:
    Kettle【实践 07】CSV类型文件数据解析及Concat fields使用（云资源分享:ktr脚本+csv测试文件）
    Windows 服务器远程桌面不能复制粘贴的解决方法
    OpenCV+YOLO+IP摄像头实现目标检测
    【Lilishop商城】No2-3.确定软件架构搭建二（本篇包括接口规范、日志处理）
    Tomcat的启动问题
    kubernates的集群安装-kubadm
    面向对象设计-UML六种箭头含义
    创建项目与认识DevEco Studio界面
    Python进阶之迭代器
    基于机器学习LightGBM进行海洋轨迹预测 代码+数据
  • 原文地址：https://blog.csdn.net/csj50/article/details/127805828