Bootstrap JavaScript插件：Affix插件 (affix.js)

最新推荐文章于 2023-07-24 22:50:05 发布
最新推荐文章于 2023-07-24 22:50:05 发布
阅读量1k 收藏
点赞数 1
分类专栏： # Bootstrap 框架 文章标签： bootstrap javascript typescript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WangMinGirl/article/details/108517645
版权

作者:WangMin
格言:努力做好自己喜欢的每一件事
CSDN原创文章
博客地址 👉 WangMin

Affix插件（affix.js）是一个很有用的插件，它可以让你的导航始终都固定在某个位置。一开始的时候，导航出现在页面的某个位置，当页面滚动一定距离时，无论页面如何滚动，它都固定在一个位置，就像被帖在页面上一样。

使用方法

1. 必须定义一个监听页面滚动的元素，它通常是 body 元素。需要给监听元素定义 data-spy=“scroll” 属性来启动滚动监听功能，还要添加 data-target 属性来指定监听对象。

<body data-spy="scroll" data-target="#affixMenu">

2. 定义监听对象，它通常是导航菜单。需要给它定义 data-spy=“affix” 属性来启动Affix功能。

<ul id="affixMenu" class=
最低0.47元/天 解锁文章
汪末末
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
bootstrap之affix
xixi
11-13 2423
一、前言这节介绍下affix(自动定位浮标)模块的源码实现。二、源码 /* ======================================================================== * Bootstrap: affix.js v3.3.7(自动定位浮标) * http://getbootstrap.com/javascript/#affix * =
前端基础之《Bootstrap（14）—JavaScript插件_固定右侧栏目、回到顶部》
csj50的专栏
11-15 594
data-spy="affix"：代替position: fixed;data-offset-bottom="200"：离开底部的距离。data-offset-top="60"：离开顶部的距离。1、自己实现固定在侧边栏。2、affix实现固定。
Bootstrap JS插件使用实例(10)-附加导航(affix)
djskl的专栏
08-08 5642
bootstrap-affix.js组件，直译过来就是固定，典型的应用就是导航，即当页面内容过多出现滚动条时的浮动导航，如官网页面的左侧导航(下图)。其实这组件很简单，就是通过检测滚动位置来动态的添加或移除 affix 、 affix-top 、affix-bottom 三个样式，来使导航仍然处在一个合适的位置。当采用标记法，页面加载完毕时，JS插件会搜索页面上所有[data-spy="affix
5.13 Bootstrap 附加导航(Affix)插件
最新发布
梁辰兴的博客
07-24 319
附加导航（Affix）插件允许某个 注意：如果您想要单独引用该插件的功能，那么您需要引用 affix.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。您可以通过 data 属性或者通过 JavaScript 来使用附加导航（Affix）插件。实例下面的实例演示了通过 data 属性使用附加导航（Affix）插件的用法： 结果如下所示： 实例下面的实例演示了通过 JavaScript 使用附加导航（Affix）
Bootstrap的js插件之侧边栏停靠(affix)
bboyjoe的博客
08-08 6445
下面是一个比较常见的侧边栏停靠的例子： js插件_侧边栏停靠 --> .affixed-element-top.affix{ top:10px; } .affixed-element-top.affix-bottom{
bootstrap中jquery插件——affix附加导航、以及滚动监听功能的实现
陈雪珊的博客
03-27 2429
在一般大型的网页，会有顶部和侧面两个导航。bootstrap提供的附加导航（侧面导航）可以实现监听页面滚动功能，下面看一下是什么样的：如上图所示，右侧导航原本是相对定位的，当它随页面滚动到顶部的时候，会变成固定定位回到原来的位置（即data-offset-top扩展属性指定的位置）。且它是导航有滚动监听功能，当页面滚动到指定位置它会改变样式，也可以点击跳转到指定位置。实现代码如下：<!--注意扩展属
Bootstrap 附加导航（Affix）插件实例详解
09-02
在Bootstrap框架中，使用Affix插件有两种主要方式：通过data属性和JavaScript API。下面将详细解释这两种方法以及如何在实际项目中应用它们。 **通过data属性使用Affix插件** 要在HTML元素上启用Affix行为，只需...
mootools.affix:Mootools.Affix
05-12
Mootools.Affix 插件则是 Mootools 生态系统的一部分，它扩展了框架的功能，使得开发者能够轻松实现类似Bootstrap Affix的效果，即元素在达到特定滚动位置时切换其定位模式，从相对定位变为固定定位。 使用 ...
Bootstrap每天必学之附加导航（Affix）插件
09-02
Bootstrap附加导航(Affix)插件是Web开发中一种实用的工具，主要用于创建固定位置的导航元素，使得用户在浏览页面时，某些重要的导航或内容始终保持可见。这种效果类似于页面内的锚点，常用于侧边栏菜单、社交图标等...
boostrap中scrollspy结合affix、以及affix的滚动与定位
changreal的博客
04-04 5860
个人觉得affix是个好插件，但是为了理解affix，我最近越来越迟钝的脑袋真是理解了好久= = 这是一个悲伤的故事。 不废话了，先强势插入一个affix结合scrollspy的干货：http://9iphp.com/web/javascript/understanding-bootstraps-affix-scrollspy-plugins.html 介个我真理解了好久，蠢。希望以后不要再那么
js固定效果插件
11-29
一个js的固定效果插件，代码如下： $('#myAffix').affix({ offset: { top: 50 , bottom: function() { return(this.bottom = $('#footer').outerHeight(true)); } } }); .affix { position: fixed; top: 50px; } .affix-bottom { position: absolute; }
响应式前端框架Bootstrap系列（20）附加导航（Affix）插件
@黄小泽的个人博客
01-15 952
附加导航（Affix）插件允许某个 固定在页面的某个位置。您也可以在打开或关闭使用该插件之间进行切换。一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个标记，该 会锁定在某个位置，不会随着页面其他部分一起滚动。 附加导航API只有一个，入参项： offset，属性data-offset（默认值为10），当计算滚动位置时，距离顶部的偏移像素。如果设置了一个数字，则该偏移量的值将
Bootstrap 附加导航（Affix）插件
Love丶兰的博客
10-10 844
Bootstrap 附加导航（Affix）插件 附加导航（Affix）插件允许某个 <div> 固定在页面的某个位置。您也可以在打开或关闭使用该插件之间进行切换。一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个标记，该 <div> 会锁定在某个位置，不会随着页面其他部分一起滚动。
Bootstrap学习笔记--插件之Carousel插件轮播图片，模态插件，提示插件，滚动监听插件，Affix插件
qq_38409944的博客
05-28 1124
Carousel插件： 轮播插件。 是一个通过元素循环的组件，如旋转木马（幻灯片） 插件可以单独包含（使用Bootstrap“carousel.js”文件），或者一次全部使用（使用“bootstrap.js”或“bootstrap.min.js”）。 注意： 在Internet Explorer 9及更早版本中不被正确支持（因为它们使用CSS3转换和动画来实现幻灯片效果 举例： ...
Bootstrap笔记之Affix
抱怨的大叔
09-19 286
升级Bootstrap 3时，顺便玩了下Affix——通常用在侧边导航条——这个控件，下面是一些坎坷和心得。（[url=http://getbootstrap.com/javascript/#affix]详细的官方文档[/url]） [size=large][color=blue][b]★：Top[/b][/color][/size] 首先就是Top——高度，由于我页面上有固定的顶...
Bootstrap 插件Affix
歪脖先生的博客
03-15 1113
AffixAffix 这个插件的名称，被翻译为多种中文名称，如粘条、固定导航等，每种翻译都很难准确表达作者的原意。本文干脆不做翻译，直接使用Affix了事，免得画蛇添足。Affix是Bootstrap中的一个很有用的插件，它可以让你的导航始终都固定在某个位置。一开始的时候，导航出现在页面的某个位置，当页面滚动一定距离时，无论页面如何滚动，它都固定在一个位置，就像被帖在页面上一样。 阅读全文&...
Bootstrap中的npm.js有什么作用
casion
03-07 4996
从官网上下载下来的用于生产环境的Bootstrap代码（下载链接）里面有一名为npm.js的文件 ├─css │ bootstrap-theme.css │ bootstrap-theme.css.map │ bootstrap-theme.min.css │ bootstrap-theme.min.css.map │ bootstrap.c...
bootstrap affix 的使用
06-05 2470
bootstrap affix <div class="js-affix"> sidebar </div> 配置 css .js-affix { top: 10px; } .js-affix.affix-bottom { position: absolute; } js $('.js-affix').affix({ offset...
bootstrap-table.min.js:10 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'total') at e.value (bootstrap-table.min.js:10:96895) at HTMLTableElement.<anonymous> (bootstrap-table.min.js:10:113747) at Function.each (jquery.min.js:2:2976) at S.fn.init.each (jquery.min.js:2:1454) at t.fn.bootstrapTable (bootstrap-table.min.js:10:113507) at building.js:33:33 value @ bootstrap-table.min.js:10 (anonymous) @ bootstrap-table.min.js:10 each @ jquery.min.js:2 each @ jquery.min.js:2 t.fn.bootstrapTable @ bootstrap-table.min.js:10 (anonymous) @ building.js:33 Promise.then (async) searchbuilding @ building.js:31 invokeWithErrorHandling @ vue.js:3700 invoker @ vue.js:1529 original_1._wrapper @ vue.js:8013
06-11
这个错误提示是在使用bootstrap-table时出现的。具体来说是在调用bootstrap-table的value函数时出现了错误，因为value函数要使用一个undefined的属性'total'，导致了TypeError。建议检查代码，看看是否正确地使用了...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值