Bootstrap3 Affix 中的 data-offset-bottom

2023-12-23

我想从我的附加元素中设置“停止”。

例如投票http://9gag.com/ http://9gag.com/,它滚动直到其父容器。

我为此使用了affix,我发现了“data-offset-bottom”属性(没有太多记录)

<div id="news" class="homepage-row row">
    <div class="col-xs-3">
        <div class="ssAffix" data-spy="affix" data-offset-top="400" data-offset-bottom="800">
            123
        </div>
    </div>
    <div class="col-xs-9">
        <div id="homepage-gallery" class="product-gallery">
            gallery here
        </div>
    </div>
</div>
body {
    position:relative
}
.ssAffix {
    height: 200px;
    width: 200px;
}
.ssAffix.affix{
    top:50px;
    bottom:auto;
}
.ssAffix.affix-top{}
.ssAffix.affix-bottom{
    position:absolute;
    top:0;
    bottom:800px;
}

首先,我不知道这应该如何工作,如何计算data-offset-bottom value.

我只有一个词缀,我希望它能粘在容器中(#news)

此后至少有 1000 像素的空间用于其他行。


同样有趣的是,对于data-offset-bottom="800,当它变成 affix-bottom 时,元素被添加"top:-998.765625px",这个属性随不同的data-offset-bottom values


也可以看看:Bootstrap 3.0:固定列 https://stackoverflow.com/questions/18550718/bootstrap-3-0-fixed-column/18629559

the .affix-bottom是距离页面底部的像素数。您附加的元素的底部将滚动到该位置。由于位置在 affix-bottom 设置为绝对位置,因此固定容器的顶部将为负值(该容器的高度)。

在你的CSS中你不必设置top and bottom的 affix-bottom 或将位置设置为绝对。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Bootstrap3 Affix 中的 data-offset-bottom 的相关文章

  • 如何在 PHPStorm 中禁用 html 标签完成

    当我在 HTML 其他上下文中并输入时foobar然后按Tab键它会自动变成
  • 如何将表格中的td高度设置为0px?

    我有一个包含几行的 HTML 表 这是动态构建的 全部 tr 有一个 td inside If one td 里面没有 HTML 内容 我希望它是不可见的 如何才能做到这一点 并不是说里面的 HTML 是动态渲染的 我不想使用display
  • 根据复选框和数据元素隐藏/显示表格行

    我想隐藏表中的行 因为我选中了复选框并且该数据元素在表中不正确 另一个实验 我还可以使用数据元素进行排序并按下拉列表排序 查看 tr 标签 价格 名称 评级 吗 div class filter list div
  • 如何防止 CFDocument 中的内容中间发生分页?

    我使用 cfdocument 标签从 html css 动态生成 PDF 文件 有些内容块我不想跨越多个页面 经过一番搜索后 我发现根据文档支持 page break inside 样式 然而 在我的测试中 声明 page break in
  • 有没有办法禁用网站上表单的自动填写? [复制]

    这个问题在这里已经有答案了 我最近才学会使用创建网站HTML and PHP 我创建了一个网站 其中有一个测验 要求人们随机翻译单词 用户将他们的答案输入到表格中 网站评估答案是否正确 现在 当一个问题在一个会话中被问两次时 就会出现自动填
  • 使用 javascript 更改 div 颜色

    div style height 20px width 100 background color 000000 div br
  • HTML 属性不带引号?

    我一直认为html的属性中需要引号 div class service definition or div class service definition 但最近我注意到 w3 验证器不会将以下内容识别为错误 div class serv
  • 如何删除flexbox中所有换行行的左右边距(没有nth-child或js)

    我正在寻找一种好方法来删除每行中每个第一个和最后一个项目的左右边距 而不使用 nth child 或 JavaScript 如果这是不可能的 那么我想下一个最好的方法是在主弹性盒元素上设置负左 右边距 但我不太确定使用弹性盒来做到这一点的最
  • html 表格单元格的条件格式

    是否有现成的解决方案可以对 HTML 表格进行条件格式设置 通过条件格式 我更感兴趣的是根据该列或其他列 在同一个表中 的值 数字 将不同的颜色作为单元格背景 类似于我们在 Excel 条件格式 gt 色阶 gt 红黄绿中的内容 我想在通过
  • 是否可以使用 Flying Saucer (XHTML-Renderer) 将 css 解析为类路径资源?

    我正在尝试将资源打包到 jar 中 但我无法让 Flying Saucer 在类路径上找到 css 我无法轻松构建 URL 来无缝解决此问题 https stackoverflow com questions 861500 url to l
  • iOS 解决方法:在没有 CSS 属性的情况下平滑滚动 滚动行为:平滑?

    编辑 我找到了一个 jQuery 解决方案 https codepen io chriscoyier pen dpBMVP https codepen io chriscoyier pen dpBMVP这个确实可以在 iOS 上运行 我想
  • 如何仅在 css/html 中强制在单词之间换行?

    我只有一段普通的文本 p 标签内的 p div 标签 但只有 Firefox 可以正确显示 Firefox 打破了单词之间的界限 所有其他浏览器都会在单词中间断行 这使得阅读变得困难 这是我的意思的一个例子 火狐浏览器 工作中 This w
  • 有没有办法将变量从 javascript 导入到 sass 或反之亦然?

    我正在制作一个依赖于块概念的 CSS 网格系统 所以我有一个基本文件 例如 max columns 4 block width 220px block height 150px block margin 10px 它被 mixin 使用 m
  • 扩展位置绝对div超出溢出隐藏div

    我已经好几个月没有做过CSS了 所以我可能会错过一些简单的东西 但无论解决方案是什么 我都无法弄清楚 所以问题就在这里 这是我的代码的简化版本 div style height 100 width 200px div style margi
  • ToggleClass 动画 jQuery?

    我的网站上有一个部分 当用户单击时我希望它展开 我正在使用 jQuerytoggleClass为了这 expandable function e e preventDefault this closest article toggleCla
  • 如何使用 vanilla JS 实现可维护的反应式 UI

    今天我遇到了一个问题 可以通过使用像 Vue 这样的反应式和状态管理框架来轻松解决 遗憾的是 无法使用它 以下 简化 情况 链接到代码笔 https codepen io theiaz pen BazErKV 我们有一个服务器渲染的页面 其
  • 如何强制外部 div 扩展到内部 div 的高度?

    我有 ajax 到的数据 div class content 我希望外部 div 扩展到内部 div 的高度 我不知道该怎么做 HTML div class outer div class inner div class content S
  • 如何让div与包含td的高度相匹配?

    我沿着桌子的一排布置了三个 面板 一个比另外两个高 我希望所有三个面板都与最高的一个的高度相匹配 我尝试将 div 的样式设置为 height 100 但是即使包含的 tds 增长 短面板仍然很短 我的 HTML 是由 JSF 生成的 因此
  • 如何在表格列标题处垂直旋转文本

    我用过这个数据表 http www datatables net 在我的网页上 这是fiddle http jsfiddle net fxju7 2 链接我放置代码的地方 我想要 第一个数字第二个数字列应该垂直旋转 我已经做到了 但是 问题
  • 从输入类型编号获取无效值

    我正在使用输入类型数字 当它无效时 我如何从中获取值 例如 使用类型编号并仅打印 e 这本身是无效的 我正在使用 React 但我认为这个问题非常普遍 onChange event console log event target valu

随机推荐

  • 非 jQuery .ready() 替代方案,在 jQuery 的 .ready() 之前执行,与 DOMContentLoaded 不同

    我正在制作一个不依赖 jQuery 的插件 为了与各种现有的流行 jQuery 功能和插件很好地配合 它必须执行一个函数after已到达 DOM 末尾 但是不之后使用 jQuery 执行稍后排队的任何内容 ready 标准非 jQuery
  • Sublime Text 2 - 已安装 Package Control 但未显示列表

    I am using Sublime Text 2 for Mac I have installed the Package Control for Sublime Text 2 following the instructions fro
  • Spring数据JPA获取

    有没有办法定义 Spring 数据规范 返回 JPA 谓词 其唯一目的是执行急切获取 我有一个使用延迟加载定义各种关系的实体 但有几个查询我想返回整个实体表示 包括所有相关集合 但这些查询的条件可能有所不同 我看过一些帖子 例如春季论坛 h
  • ng-grid 如何在最后一行的列单元格中显示/隐藏按钮

    我有一个 ng grid 表 其中一列 Defs 有一个单元格模板来显示图标 目前图标显示在所有行中 谁能帮助我如何显示 ng grid 中最后一行的图标 我尝试使用ng show last 并没有奏效 scope reasonsGrid
  • Gradle 无法 HEAD https://..pom > 对等点未经过身份验证

    当您从 gradle 2 0 升级到 2 1 时 您可能会看到以下错误 Could not HEAD https jcenter bintray com de undercouch gradle download task 1 0 grad
  • 基于 ASP.NET WebAPI 控制器生成 JS 客户端

    在使用 RESTful API 的现代 Web 项目中 我们经常看到像下面这样的 AJAX 调用散布在我们的 JavaScript 文件中 ajax type POST url myapp baseUrl Api Note data ko
  • 将 JSON 反序列化为类

    服务器返回 JSON 的以下部分 condition or and operand a operator value true not operand b operator
  • Flutter,如何创建嵌入文本的边框?

    有谁知道如何创建顶部带有文本的边框 如下所示 创建帐户 Stack children
  • SKSpriteNode 隐藏在父节点下方

    使用 Swift 和 SpriteKit 我遇到了当将 SKSpriteNode 作为子项添加到另一个 SKSpriteNode 时未显示的问题 相比之下 放置在完全相同位置的 SKLabelNode 确实会出现 does not show
  • Javascript - onerror 事件在 Firefox 中不起作用

    img src 这个非常简单的 onerror 事件处理程序会在找不到图像时隐藏图像 它在 Chrome 中按预期工作 但在 Firefox 中 它什么也不做 这是一个 jsFiddle 您可以尝试在 Chrome 和 Firefox 中运
  • 在flutter中将小部件封装在它自己的类中?

    我正在尝试创建一个tile for my listview 虽然图块在放置在列表视图文件中时可以工作 但我想知道如何封装tile小部件到它自己的类文件中 具体来说 如果tile对象不接受参数 我可以简单地扩展一个无状态小部件并调用build
  • 通过 CSS 属性“transform:scale(0.5)”进行缩放的 Angular CDK 拖放无法按预期工作

    通过 CSS 属性 transform scale 0 5 进行缩放的 Angular CDK 拖放无法按预期工作 如果外层 DIV 按 CSS 属性缩放 变换 比例 0 5 拖动与鼠标指针未正确对齐 一旦标度不等于 1 就会发生这种情况
  • 法拉第超时

    我已经在线搜索了文档和其他地方 似乎无法想出为法拉第设置超时选项的正确方法 有人有答案吗 我试过了 conn FaradayStack build url conn headers user agent AppConfig user age
  • 使用Phantom.js评估,如何获取页面的HTML?

    page evaluate function return document function result console log result next 结果实际上是一个巨大的物体 我不知道该对象的属性和属性 我只想要页面的 HTMLa
  • R 中 3 个分类变量和 1 个连续变量的 SE 点图

    我正在尝试生成一个点图 其中包含具有三个分类变量 mea tre 和 sex 的设计中单个测量值 len 的值 I ve produced a plot that has all I m looking for split across s
  • Google 地图 v3:大尺寸标记

    我需要在地图上显示标记 它运行良好 唯一的问题是它们看起来太小了 如何确保所使用的标记尺寸较大并且几乎在任何缩放状态下都可以看到 为了使图标更大 我绝对建议使图标图像更大 例如 要使用缩小的高分辨率图标修复高 dpi 移动设备上的像素图标
  • 打开 Storyboard 时 Xcode 8 挂起/无响应

    我最近升级到了 Xcode 8 并将我的项目更新到了 Swift 3 一段时间内一切都运行良好 故事板加载一直很慢 即使仍然运行 Xcode 7 并且与 Xcode 8 几乎一样 慢 我一直以为这是因为我使用的是较旧的 2011 年末 Ma
  • git-log 和 git-whatchanged 之间的区别?

    Given 这个答案 https stackoverflow com a 280140 10608另一个问题 以及 鉴于两者的手册页git log http linux die net man 1 git log and git whatc
  • 字符串文字作为方法的参数

    Java 中的任何字符串文字都是类型的常量对象String并存储在字符串文字池中 Will String作为参数传递给方法的文字也存储在String文字池 例如当我们写的时候 System out println Hello OR anyo
  • Bootstrap3 Affix 中的 data-offset-bottom

    我想从我的附加元素中设置 停止 例如投票http 9gag com http 9gag com 它滚动直到其父容器 我为此使用了affix 我发现了 data offset bottom 属性 没有太多记录 div class homepa