前端基础之《Bootstrap（14）—JavaScript插件_固定右侧栏目、回到顶部》

已于 2022-11-15 16:09:09 修改
阅读量609 收藏 1
点赞数
分类专栏： 前端基础 文章标签： 前端 bootstrap
于 2022-11-15 15:31:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csj50/article/details/127866968
版权

一、affix

1、自己实现固定在侧边栏
position: fixed;

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="bs/css/bootstrap.css">
<script src="bs/js/jquery-3.6.1.js"></script>
<script src="bs/js/bootstrap.js"></script>
<script src="bs/js/holder.js"></script>
<title>bootstrap</title>
<style>
    .list-group {
        position: fixed;
        width: 100px;
    }
</style>
</head>

<body>
	<div class="container">
        <h1 class="page-header">bootstrap前端框架</h1>
        <div class="row">
            <div class="col-md-10">
                <div class="panel panel-danger">
                    <div class="panel-heading">
                        <div class="panel-title">技术文档</div>
                    </div>
                    <div class="panel-body">
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                    </div>
                </div>
                
            </div>
            <div class="col-md-2">
                <div class="list-group">
                    <a href="" class="list-group-item">linux</a>
                    <a href="" class="list-group-item">linux</a>
                    <a href="" class="list-group-item">linux</a>
                    <a href="" class="list-group-item">linux</a>
                    <a href="" class="list-group-item">linux</a>
                    <a href="" class="list-group-item">linux</a>
                </div>
            </div>
        </div>
    </div>
</body>

<script>
    
</script>

</html>

2、affix实现固定
data-spy="affix"：代替position: fixed;
data-offset-top="60"：离开顶部的距离
data-offset-bottom="200"：离开底部的距离

<div class="col-md-2">
    <div class="list-group" data-spy="affix">
        <a href="" class="list-group-item">linux</a>
        <a href="" class="list-group-item">linux</a>
        <a href="" class="list-group-item">linux</a>
        <a href="" class="list-group-item">linux</a>
        <a href="" class="list-group-item">linux</a>
        <a href="" class="list-group-item">linux</a>
    </div>
</div>

二、回到顶部

1、例子

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="bs/css/bootstrap.css">
<script src="bs/js/jquery-3.6.1.js"></script>
<script src="bs/js/bootstrap.js"></script>
<script src="bs/js/holder.js"></script>
<title>bootstrap</title>
<style>
    .list-group {
        width: 100px;
    }
    .top {
        cursor: pointer;
        width: 100px;
        height: 50px;
        background: #00f;
        border-radius: 10px;
        color: #fff;
        text-align: center;
        line-height: 50px;
        font-size: 30px;
        position: fixed;
        right: 20px;
        bottom: 100px;
    }
    .top:hover {
        opacity: 0.7;
    }
</style>
</head>

<body>
	<div class="container">
        <h1 class="page-header">bootstrap前端框架</h1>
        <div class="row">
            <div class="col-md-10">
                <div class="panel panel-danger">
                    <div class="panel-heading">
                        <div class="panel-title">技术文档</div>
                    </div>
                    <div class="panel-body">
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                        <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
                    </div>
                </div>
                
            </div>
            <div class="col-md-2">
                <div class="top">
                    <span class="glyphicon glyphicon-menu-up"></span>
                </div>
            </div>
        </div>
    </div>
</body>

<script>
    $('.top').click(function(){
        $(window).scrollTop(0)
    });
</script>

</html>

csj50
关注
专栏目录
back-to-top-bootstrap-icon:使用 Bootstrap 图标字体返回顶部
05-30
回到顶部引导图标 使用 Bootstrap 图标字体返回顶部 链接到 scripts.js 和 style.css 文件，或将它们添加到您当前的文档中。 您还需要链接到引导程序的图标字体作为通过 js 文件附加到正文。 “返回顶部”按钮的默认不透明度为 0.5，悬停时动画为 1。
bootstrap 回到顶部 backToTop
skysys的研究小屋
10-04 1284
【代码】bootstrap 回到顶部 backToTop。
Bootstrap导航悬浮顶部,stickUp
前往JAVA架构的路上
06-14 5599
stickUp 一个 jQuery 插件 这是一个简单的jQuery插件，它能让页面目标元素 “固定” 在浏览器窗口的顶部，即便页面在滚动，目标元素仍然能出现在设定的位置。此插件可以在多页面的网站上工作，也能在单页面上面实现导航功能。滚动当前页面看看导航条的效果吧。 首先我们去下载我们需要的js和css文件 https://github.com/LiranCohen/stickUp 经研究
前端基础之《Bootstrap（12）—JavaScript插件_滚动监听、侧边栏浮动》
csj50的专栏
11-11 720
滚动文件，监听它的位置，然后有个缩略地图跟着走。一楼，二楼，三楼，四楼，回到顶部。2、滚动监听，滚动区域就是监听的区域。监听的是整个body区域。1、使用导航条+面板组合。
漂亮的JQ“返回顶部” 按钮
凉城古梦猫扑街的博客
09-18 3143
模拟一下 B站 返回顶部 的按钮。 1、制作返回顶部 按钮。 2、控制在滚动条滑动超过800px时候，显示 “返回顶部”按钮，否则隐藏 3、鼠标事件，经过变色，离开恢复 4、bootstrap插件样式 第一张是 没有出现的 “返回顶部的”。 第二张滑动超过 800px 出现按钮。点击，一秒内返回顶部。（华丽的按钮） 一、准备的插件。 首先去 
BootStrap前端UI源码模板_javascript_BootStrap前端UI源码模板_bootstrap_
10-01
Bootstrap的核心特性包括：响应式网格系统、预定义的组件、JavaScript插件和易于定制的LESS CSS。其响应式设计使得网站能够适应各种屏幕尺寸，从桌面到手机，都能提供一致的用户体验。预定义的组件涵盖了按钮、表单...
前端插件之Bootstrap Dual Listbox使用教程
10-16
Bootstrap Dual Listbox是一款基于Bootstrap框架的前端插件，主要功能是实现双向列表选择框，是multiple select选择器的扩展。它允许用户更方便地在两个列表框之间移动项目，支持搜索过滤，以及自定义提示信息等多种...
dwz_bootstrap_javascript_jquery_
10-01
【标题】"DWZ_Bootstrap_Javascript_Jquery_" 指的是一个基于DWZ框架与Bootstrap相结合的项目，其中融入了JavaScript和jQuery技术，旨在创建一个响应式的网页应用。这个项目利用了DWZ的管理后台功能和Bootstrap的...
Web前端基础：Bootstrap框架.pptx
05-06
【Bootstrap框架】是Web前端开发中的一个重要工具，它是由Twitter推出的开源框架，旨在提供一套简洁、灵活且响应式的UI（用户界面）组件和交互设计。Bootstrap基于HTML、CSS和JavaScript，能够快速构建出美观且适应...
前端框架Bootstrap详细使用教程_极品.zip
01-09
前端框架Bootstrap详细使用教程_极品.zip
回到顶部，纯javascript代码编写
09-16
回到顶部，当页面下拉到一定高度时，就会出现回到顶部的按钮，点击回到顶部之后，会有一个速度的变化回滚到顶部，如果正在回到顶部时，鼠标的滚轮转动了就会停止回到顶部，纯javascript代码编写的
jquery实现返回顶部按钮demo
08-11
jquery实现返回顶部按钮demo，利用简单的jquery动画，易于学习
最好的回到顶部插件gotoTop.js实例
01-04
最好的回到顶部插件gotoTop.js实例:http://blog.csdn.net/libin_1/article/details/50453294
bootstrap的一些API认识以及应用和回到顶部按钮的实现 week15学习
vancher_的博客
12-25 2401
这周的很多时间是花在了bootstrap上，把慕课网的基础教学部分看完了，然后看了一下有响应式的部分以及简单看了一下回到顶部按钮是怎么实现的。 基础部分讲的都是一些API如何应用，如果可以很好地应用，可以用很少的代码实现很好地网页效果。 通过getbootstrap.com官网学习，可以将js,css,fonts等字体文件下载再链接入自己的文件，也可以直接链接目标网址进入文件来实现。当中有很多内
实现完成返回顶部
sunnyboysix的博客
05-21 584
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;script type=&quot
Bootstrap5 侧边栏导航(Offcanvas)
最新发布
shengyin714959的博客
08-23 770
Bootstrap5 侧边栏侧边栏类似于模态框，在移动端设备中比较常用。
bootstrap 点击回到顶部 超简单
weixin_30273501的博客
05-25 4272
<header class="bs-docs-nav navbar navbar-static-top" id="top"></header> <a href="#top" class="back-to-top"> Back to top </a> 转载于:https://www.cnblogs.c...
Bootstrap附加导航插件
Just The Way You Are
07-18 2229
附加导航即粘贴在屏幕某处实现锚点功能。 附加导航（Affix）插件允许某个div固定在页面的某个位置。您也可以在打开或关闭使用该插件之间进行切换。一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个标记，该div 会锁定在某个位置，不会随着页面其他部分一起滚动。 当页面内容过多出现滚动条时的浮动导航，如官网页面的左侧导航（下图红框内所示）。其实这组件很简单，就是通过检测滚动位
前端实战：教你写出简单的侧边栏功能以及返回顶部特效
MClink的博客
04-02 5187
   前阵子博主忙着一些事情，有些时间没更新了，几天前有个侧边栏的需求，于是自己简单用几个框架简单实现了一个。原理挺简单的，在此记录一下。先放效果图出来。侧边栏功能分析：模态框展示（点击上方的最后一个按钮）点击灰色区域就会退出模态框界面这些东西对一个前端高手来说可谓是小菜一碟了，不过对一个学后端的来说，如果对前端框架不够熟悉应该是写不出来的，所以这篇文章主要是面向于后端开发人员的，看完后你就能写出...
理解Bootstrap JavaScript插件架构
"Bootstrap JavaScript插件架构详解" Bootstrap是一款流行的前端开发框架，它提供了一整套美观且响应式的网页设计工具。在Bootstrap中，JavaScript插件架构是其核心组成部分之一，用于增强HTML元素的功能，实现动态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值