bootstrap插件里Affix附加导航的理解与使用

最新推荐文章于 2023-07-24 22:50:05 发布
VIP文章 最新推荐文章于 2023-07-24 22:50:05 发布
阅读量424 收藏
点赞数
分类专栏： affix 导航 偏移量 文章标签： js css 定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44297988/article/details/107526127
版权

确定监测类型与监测链接

  • data-spy="scroll"：确定监测类型为滚动
  • data-target="#myScrollspy"：确定监测链接为id为myScrollspy的元素

添加为affix类时的css

  • 使导航栏固定在离顶部30px的位置

    ul.nav-tabs.affix{
     
        top: 30px; /* Set the top position of pinned element */
    }

设置添加了附加导航的元素的偏移量

  • 意思是使添加了affix（附加导航）的元素的最顶部距离窗口的顶部为125px，在实际的操作中，当网

最低0.47元/天 解锁文章
faceshe
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap 附加导航（Affix）插件实例详解
09-02
附加导航（Affix）插件允许某个 <div> 固定在页面的某个位置。接下来通过本文给大家介绍Bootstrap 附加导航（Affix）插件实例详解，感兴趣的朋友一起看看吧
BootStrap-CSS样式_插件_附加导航（Affix）插件
LoveyourselfJiuhao的博客
01-06 1561
附加导航（Affix）插件  附加导航（Affix）插件允许某个 &lt;div&gt; 固定在页面的某个位置。您也可以在打开或关闭使用 该插件之间进行切换。一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个 标记，该 &lt;div&gt; 会锁定在某个位置，不会随着页面其他部分一起滚动。  如果您想要单独引用该插件的功能，那么您需要引用 affix.js。或者，您可以引用 Bo...
5.13 Bootstrap 附加导航(Affix)插件
梁辰兴的博客
07-24 269
附加导航（Affix）插件允许某个 注意：如果您想要单独引用该插件的功能，那么您需要引用 affix.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。您可以通过 data 属性或者通过 JavaScript 来使用附加导航（Affix）插件。实例下面的实例演示了通过 data 属性使用附加导航（Affix）插件的用法： 结果如下所示： 实例下面的实例演示了通过 JavaScript 使用附加导航（Affix）
bootstrap的 附加导航Affix导航 (侧边窄条式 滚动监控式导航) 附加导航使用3.
weixin_34245749的博客
02-10 197
affix: 意思是粘附, 附着, 沾上. 因此, 附加导航就是 bootstrap的 Affix.js组件. bootstrap的 附加导航, 不是说导航分成主导航, 或者什么 副导航的 而是指, 这个导航栏 会"粘帖"在页面的某个竖直位置, 实现页面锚点 + 滚动监听的 效果. 类样式选择器的子集: 注意区别两个类之间 有空格 和 没有空格, (两个类紧密挨着没有空格)的方式, 后者表示类选择...
vue3 组件篇 Affix
秋来九月八
04-20 1131
Affix是一种常用于前端界面设计的组件，它可以让网页元素固定在页面中的某个位置，随着用户的滚动而保持不变。通常用于固定导航栏、侧边栏等。通过设置相应的CSS样式和JavaScript代码，我们可以轻松地实现Affix组件的效果。Affix可以增强网页的用户体验，让用户在页面滚动时能够方便地访问重要的导航链接或信息，提高页面的可用性。
Bootstrap 滚动监听（Scrollspy）插件
美奇软件开发工作室
04-15 849
滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。如果您想要单独引用该插件的功能，那么您需要引用 scrollspy.js。或者，您可以引用bootstrap.js 或压缩版的 bootstrap.min.js。用法您可以向顶部导航添加滚动监听行为：通过 data ...
Bootstrap每天必学之附加导航（Affix）插件
09-02
Bootstrap每天必学之附加导航（Affix）插件，附加导航即粘贴在屏幕某处实现锚点功能，感兴趣的小伙伴们可以参考一下
Bootstrap 附加导航（Affix）插件
12-13
Bootstrap 附加导航（Affix）插件 附加导航（Affix）插件允许指定 固定在页面的某个位置。一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个标记，该 会锁定在某个位置，不会随着页面其他部分...
antd的a-affix切换标签页样式错位问题解决
guochiscoding
11-12 1462
问题描述 我们在满足需要操作吸顶的需求，通常会用到a-affix。这个antd组件可以很方便的满足我们的需求。只要在需要吸顶的部分使用这个组件，并指定容器（详见antd文档=>api=>target)就可以正常使用。但是组件有点小bug，这个bug还蛮容易复现的。我们在切换页面时，会发现affix组件溢出了原容器。官方对此的回答： 发现问题解决方案 这个时候可以发现，当页面开始滚动，则溢出的部分就会恢复正常 解决问题代码 结合上面的想法，我们在页面active的时候，把容器滚动1
Bootstrap3 Affix插件
歪脖先生的博客
06-04 1144
Affix Affix插件（affix.js）是一个很有用的插件，它可以让你的导航始终都固定在某个位置。一开始的时候，导航出现在页面的某个位置，当页面滚动一定距离时，无论页面如何滚动，它都固定在一个位置，就像被帖在页面上一样。 Affix插件被翻译为多种中文名称，如粘条、固定导航等，每种翻译都很难准确表达作者的原意。本文干脆不做翻译，直接使用Affix了事，免得画蛇添足。 以下是Affix插...
antd学习之Affix固钉的学习
qq_44565140的博客
12-26 3642
Affix的学习 这个组件有四个属性值，当我们的页面过长我们需要对某些元素进行固钉在某个位置不再进行跟着父级容器进行滚动时候使用 offsetTop={200}属性是当下拉页面的时候距离顶部200的时候触发，不会在向上面移动 offsetBottom={200} 属性是距离底部200的时候触发，不会在向下移动 target属性的参数是一个回掉函数，返回一个，html元素对象，默认返回的是windo...
使用附加导航(affix)实现内容切换
qq_31567523的博客
03-22 2226
html> html> head> title> new document title> meta charset="utf-8"> style> a { text-decoration: none; color: #000; line-height: 2em; } ul { list-style:none; padding: 0 0 0 20px; } .affix {
boostrap中scrollspy结合affix、以及affix的滚动与定位
changreal的博客
04-04 5853
个人觉得affix是个好插件，但是为了理解affix，我最近越来越迟钝的脑袋真是理解了好久= = 这是一个悲伤的故事。 不废话了，先强势插入一个affix结合scrollspy的干货：http://9iphp.com/web/javascript/understanding-bootstraps-affix-scrollspy-plugins.html 介个我真理解了好久，蠢。希望以后不要再那么
bootstrap之affix
xixi
11-13 2394
一、前言这节介绍下affix(自动定位浮标)模块的源码实现。二、源码 /* ======================================================================== * Bootstrap: affix.js v3.3.7(自动定位浮标) * http://getbootstrap.com/javascript/#affix * =
Affix 固钉的使用
gyueh的博客
11-25 1704
需求：当内容区域比较长，需要滚动页面时，操作按钮需要在滚动范围内始终展现 代码如下： <a-affix :offsetTop="50" :style="{ position: 'absolute', top: '15px', left: 0, width: '98%', 'text-align': 'right'}"> <a-button><router-link :to="{ name: 'CheckIn' }">取消</router-link></
bootstrap affix 的使用
06-05 2461
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 JS插件使用实例(10)-附加导航(affix)
djskl的专栏
08-08 5620
bootstrap-affix.js组件，直译过来就是固定，典型的应用就是导航，即当页面内容过多出现滚动条时的浮动导航，如官网页面的左侧导航(下图)。其实这组件很简单，就是通过检测滚动位置来动态的添加或移除 affix 、 affix-top 、affix-bottom 三个样式，来使导航仍然处在一个合适的位置。当采用标记法，页面加载完毕时，JS插件会搜索页面上所有[data-spy="affix
Bootstrap 固定定位（Affix）
weixin_33860528的博客
08-01 1080
来自：慕课网 http://www.imooc.com/code/5396 Affix 效果常见的有以下三种： ☑顶部固定 ☑侧边栏固定 ☑底部固定 固定定位--声明式触发固定定位 Affix 插件可以对任何元素进行固定定位，其中比较简单的方法，就是通过自定义属性data来触发。其主要包括两个参数： 1、data-spy：取值 affix，...
bootstrap手机响应式多级导航插件
最新发布
01-02
手机响应式多级导航插件是Bootstrap中一个非常有用的组件，它可以帮助开发者在移动端设备上实现更好的用户体验。 这个插件可以让导航菜单在手机屏幕上展开和收缩，以适应不同尺寸的屏幕。用户可以点击按钮或者滑动...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值