- 综合排序
- 最热优先
- 最新优先
- 来自专栏与前端沾边
Affix 组件学习
超过定义的范围就会固定定位，否则会跟随页面滚动 [7857f11d-c51b-4f02-9e43-ace57e9ce47f.gif] 上一节我们介绍了 DButton 和 DIcon 的实现，所以新建 affix 代码分析 dom 结构 <template>
<! -- 定位元素 滚动时监听 root 位置和页面可视区的关系设置 fixed，定位的时候设置样式--> <div :class="{ 'd-<em>affix</em>--fixed': state.fixed ，为了当内部元素 fixed 定位脱离文档流时，页面占位结构不变；同时需要对比 d-<em>affix</em> 的 top 和 bottom 值判断元素何时脱离文档，何时复位。 __ro__.disconnect() } } 以上就是对 <em>affix</em> 组件的学习。如有不对欢迎指正。下一篇我们进行 alert 组件的学习。1.5K30发布于 2021-05-26Bootstrap 附加导航（Affix）插件
如果您想要单独引用该插件的功能，那么您需要引用 affix.js。 通过 data 属性：如需向元素添加附加导航（Affix）行为，只需要向需要监听的元素添加 data-spy="affix" 即可。请使用偏移来定义何时切换元素的锁定和移动。 附加导航（Affix）插件在三种 class 之间切换，每种 class 都呈现了特定的状态： .affix、.affix-top 和 .affix-bottom。 在开始时，插件添加 .affix-top 来指示元素在它的最顶端位置。这个时候不需要任何的 CSS 定位。 当滚动经过添加了附加导航（Affix）的元素时，应触发实际的附加导航（Affix）。 此时 .affix 会替代 .affix-top，同时设置 position: fixed;（由 Bootstrap 的 CSS 代码提供）。
20610编辑于 2025-12-17来自专栏sktjbootstrap affix 左侧栏导航栏
DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap 附加导航（Affix）插件</title> <link border-radius: 4px 4px 0 0; } ul.nav-tabs li:last-child a{ border-radius: 0 0 4px 4px; } ul.nav-tabs.affix { top: 30px; / Set the top position of pinned element */ } </style> <script> ("#myNav").affix({ scroll" data-target="#myScrollspy">
Bootstrap Affix
4.6K20发布于 2019-07-07来自专栏cnblogsBootstrap源码分析之transition、affix
if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments) } } }) 二、Affix 参数表示其定位参考节点（应该是产生滚动条的父容器对象），默认是window 2、Data-offset设置的top和bottom值，只会用于计算表达式，不会设置到css中 3、三种位置定位样式类： 3.1、Affix-top ：到达页面顶部的时候会添加的样式 3.2、Affix：在页面中部的时候会添加的样式 3.3、Affix-bottom：在页面底部的时候会添加的样式 4、处理公式： 1、Top：traget的滚动条高度（ 粘住元素距离底部的高度 4、能改变粘住元素的只有他的top，top值为：文档高度 — 粘住元素高度 — 粘住元素距离底部的高度 5、坑之所在： 1、top和bottom一起使用的时候，会出现冲突，原因： Affix-bottom 6、总结 1、在top情况表现良好，在bottom情况下需要自己加入手动控制 2、应用affix控件，至少要自己重写affix样式，用于控制粘住条的定位。
1.8K70发布于 2018-01-17来自专栏YoungGyFSWD_BootStrap
bar JS review css js and jquery use of jquery tabs and tabbed navigation hide and seek scrollspy and affix and panel-group class Use the scrollspy to reflect the current position of the scroll Employ the affix plugin to fix the position of the nav element after an initial scroll scrollspy and affix Design an and panel-group class Use a scrollspy to highlight the current scroll position in a nav Use the affix
1.1K90发布于 2018-01-02来自专栏大宇笔记《vue3+ts+element-plus 后台管理系统系列五》之 标签栏导航(TagsView)
Affix 固钉 当在声明路由是 添加了 Affix 属性，则当前tag会被固定在 tags-view中（不可被删除）。 meta: { title: 'dashboard', icon: 'dashboard', noCache: true, affix
3.8K11发布于 2021-02-22来自专栏sktjbootstrap 左边栏菜单 常用样式
border-radius: 4px 4px 0 0; } ul.nav-tabs li:last-child a{ border-radius: 0 0 4px 4px; } ul.nav-tabs.affix scroll" data-target="#myScrollspy">
Bootstrap Affix class="row">
<ul class="nav nav-tabs nav-stacked" data-spy="<em>affix</em>1.9K40发布于 2019-07-05来自专栏前端导学jquery技巧
实现控件拖拽排序使用sortable http://jqueryui.com/sortable/ bootstrap 的 affix 可以实现向下滑动 ，显示菜单 然后固定 http://v3. bootcss.com/javascript/#affix contentEditable的作用相当神奇．可以让div或整个网页，以及span等等元素设置为可写，有了这玩意我还要iframe作甚
54810发布于 2019-05-26来自专栏趣学前端「前端代码简洁之路」后台系统之详情页设计
这个时候需要在原来的基础上进行功能扩展. 3.2.1 详情组件 详情组件已开发好了，新增功能只需要在原来的基础上新增代码逻辑即可 导航条，使用antd提供的Affix固钉组件，Affix固钉官网地址； ( <Affix offsetTop={120} className='sider-affix'>
- (
<Affix offsetTop={120} className='sider-affix'>
- view-content {
padding-top: 20px;
padding-right: 120px;
padding-bottom: 80px;
}
.sider-affix {
position: fixed;
top: 50px;
right: 10px;
.affix {
padding-left: 0;
margin
2.6K30编辑于 2023-03-31来自专栏红队蓝军CISP-PTE经典靶场解析（超详细）
/upfile/affix/"+fileName 文件路径为：http://192.168.111.129:27689/upfile/affix/638582066907968750-aaaaaaaa.aspx /upfile/affix/"+fileName http://192.168.111.129:27689/upfile/affix/636625082296562500-bbbbbbbb.aspx 查看文件内容
1.6K10编辑于 2024-08-06来自专栏JavaScript高级程序设计2021了自己写个loader吧
content,打印出来就是接收到的整个vue文件的代码,如图： content是什么 再举个例子 iview-loader iview-loader的主要功能是将带有前缀i-的组件替换为驼峰，例如i-affix 替换为Affix。 exports.tag = { 'Switch': 'i-switch', 'Circle': 'i-circle' }; exports.prefixTag = { 'i-affix ': 'Affix', 'i-alert': 'Alert', 'i-anchor': 'Anchor', 'i-anchor-link': 'AnchorLink',
43310编辑于 2022-07-14))} </Affix))} </Affix ( <Affix offsetTop={120} className='sider-affix'>来自专栏趣学前端前端代码简洁之路，后台系统之详情页设计
这个时候需要在原来的基础上进行功能扩展.3.2.1 详情组件详情组件已开发好了，新增功能只需要在原来的基础上新增代码逻辑即可导航条，使用antd提供的Affix固钉组件，Affix固钉官网地址；affixTabs ( <Affix offsetTop={120} className='sider-affix'>
- item.name}
- item.name}
1.7K10编辑于 2022-10-24来自专栏全栈程序员必看构建vscode的vue组件代码补全插件以及上传
"Affix": { "prefix": "Affix", "body": ["<affix", ":offsetTop =\"offsetTop\"", ":offsetBottom =\"offsetBottom\"", "></affix>"], "description": "affix组件配置参数：" } 复制代码 效果： 回车后自动填充代码片段 /src/components/affix/index.js"); console.log(component); 复制代码 已经可以获取到vue组件中的export部分，从中可以提取到props部分
1.9K20编辑于 2022-07-21来自专栏TDesign 技术视野・开发篇TDesign 更新周报（2022年3月第1周）
& errorMessage Upload： 支持 onCancelUpload & onSelectChange SelectInput：修复点击弹框输入框不高亮、allowInput 无效问题 Affix ：修复 affix 导出问题 InputNumber： 修复加减按钮超出 min、max 的边界问题 Dialog：支持使用 Esc 按键关闭 TreeSelect： 使用 SelectInput 组件重构
1.2K20编辑于 2022-03-08来自专栏PY的开发实践TDesign 在 vitest 的实践
请勿手写直接修改，否则会被覆盖 */import { mount } from '@vue/test-utils';import baseVue from '@/examples/affix/demos /base.vue';import containerVue from '@/examples/affix/demos/container.vue';const mapper = { baseVue, containerVue,};describe('Affix', () => { Object.keys(mapper).forEach((demoName) => { it(`Affix
1.7K42编辑于 2022-07-17来自专栏owentExcel转表工具(xresloader)的新验证器（验证外部Excel和文本数据，唯一性和自定义规则）
资源 值校验" rules: - InText("UeSource_AbilitySet.txt", 3) - name: "ExcelAffixCountRandomPool_affix_count_pool_id " description: "Affix.xlsx|词条数量随机池表|affix_count_pool_id 值校验" rules: - InTableColumn("Affix.xlsx ", "词条数量随机池表", 3, 2, "affix_count_pool_id") 验证器检查不通过的一个示例如下(还包含一个唯一性检查报错): 数值范围验证器的增强 范围验证器的增强主要有两处，一处是支持
1.1K20编辑于 2023-10-21来自专栏fastmock修改iview的标签为i-的形式而不是驼峰的形式
} ] } 参数 prefix 设置为 true 后，所有 iView 组件标签名都可以使用前缀 i-，例如 <i-row>、<i-select> 完整的标签名如下： { 'i-affix ': 'Affix', 'i-alert': 'Alert', 'i-auto-complete': 'AutoComplete', 'i-avatar': 'Avatar',
1.1K20编辑于 2022-07-13来自专栏vue封装H5Eleui+vue后管中面包屑打开新窗口的判断依据
', meta: { title: '卡片管理', icon: '', noCache: false, affix
70530编辑于 2022-03-06来自专栏测试游记13.寻光集后台管理系统-控制前端菜单栏展示内容
path": "/dashboard", "meta": { "title": "控制台", "icon": "el-icon-menu", "affix "title": "控制台", "icon": "el-icon-menu", "affix
52720编辑于 2022-12-02来自专栏Cordova封装H5 APPEleui+vue后管中面包屑打开新窗口的判断依据
', meta: { title: '卡片管理', icon: '', noCache: false, affix
82260编辑于 2022-03-05腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059
粤公网安备44030502008569号腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号