jquery - Bootstrap - 为较小的视口(viewport)更改 Affix 数据偏移

标签 jquery html css twitter-bootstrap

我的导航栏有点问题。基本上我遇到的问题是我使用的是 Bootstrap 词缀,我只能设置一个数据偏移量,这里是 HTML 的示例:

<nav class="navbar navbar-default affix-top nav-links" data-spy="affix" data-offset-top="120" role="navigation">

只是让您知道,当导航栏滚动经过导航栏时,词缀基本上将导航栏固定到视口(viewport)的顶部。

问题是,当视口(viewport)缩小时, Logo 也会缩小,并且数据偏移量需要更改,因为页面顶部和导航栏之间的距离现在因 Logo 大小更改而不同。

有没有办法在缩放视口(viewport)时更改数据偏移量?如果我可以创建一个媒体查询但数据偏移量是在 HTML 中输入的,那就太好了。

谢谢 :)

最佳答案

这里有一个关于 SO 的工作解决方案 Bootstrap 3.0 scrollspy responsive offsets

当我不得不在我开发的设计中考虑偏移时,我在 CSS 中进行了偏移,而不是使用数据模型。然后我就可以用媒体查询来定位了。如此处引用的 SO 所示,来自 jQuery 的数据仅加载一次。

关于jquery - Bootstrap - 为较小的视口(viewport)更改 Affix 数据偏移,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25104341/

相关文章:

jQuery 可拖动 : Stop dragging when mouse out of parent

javascript - 当显示较小时,div 从外部 div 弹出

css - 背景颜色样式不起作用

javascript - ionic 框架 : Generating divs dynamically doesn't work

html - CSS 菜单悬停效果

jquery - 滚动上闪烁的 jquery div?

javascript - jquery .remove() 是否在后代 DOM 元素上触发 .off()

jquery - 输入与 :Input in jQuery

javascript - 如何找到 Canvas 创建的文本的中心位置坐标?

html - 为什么我不能居中这个表格?