问题标签 [affix]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
9 回答
14741 浏览

css - 带有列表更改宽度的 Bootstrap 3.0 词缀

我正在迁移到 bootstrap 3.0.0,我遇到了左侧附加菜单的问题:一旦被附加(滚动 10px 后),它的宽度就会改变。在这个小提琴中它变得更小,在我的真实网站中它变得更宽并扩展了实际内容。

它与引导程序 v2.3.2 完美配合。检查后,看起来列表项与.affix {position: fixed;}出现的内容不符。

有任何想法吗?

解决方案:根据最新评论,我终于添加了这个 JS 片段,它很好地修复了它,而无需为附加元素设置固定宽度:

0 投票
7 回答
45167 浏览

jquery - 如何获取 Bootstrap 3 附加方法的动态数据偏移值

我想使用 Bootstraps 文档 ( http://getbootstrap.com/javascript/#affix ) 中描述的 Affix 方法,但是我想在滚动到页面顶部后修复的导航栏可以有不同的偏移量值取决于它上面的内容。

这是导航栏的示例:

如您所见,data-offset-top当前设置为 200。如果上面的内容是 200px 高,这可以正常工作,但上面的内容是动态的,因此此导航栏上方的高度并不总是相同的。我怎样才能使淡水河谷data-offset-top充满活力?

我猜我将不得不使用 javascript 的方式来做这件事,但我不确定。

0 投票
1 回答
11761 浏览

single-page-application - Bootstrap affix navbar for single page with scrollspy and page anchors

This is for a single page, with a navbar that links to local anchors only.
The navbar comes after a header, but sticks to top when scrolling down.

You can see how it works on github pages

But I've got two offset problems with link/anchors:

  • as long as you don't scroll, the anchors are offset and masked by the navbar.
  • once the navbar is affixed, the following links work as intended but not the first one.

A body margin breaks the layout as it prevents the header from beginning right at the top:

I've tried without success to play with margin/padding for the sections:

Here are the html and css

  • Any idea how to fix that?
  • Can it be solved with pure css?
  • Or do I need some js fix to account for the affix?
0 投票
2 回答
3139 浏览

dictionary - .dic 行格式定义

我目前正在研究最适合在我正在构建的应用程序中使用的字典。

检查与 Sublime Text 2 捆绑的字典,文件格式如您所料 - 按字母顺序排列的单词列表。然而,很多这些词都附加了额外的信息。以这个片段为例:

没有结果的谷歌搜索没有阐明斜线 (/) 后面的字母是什么意思。

也许他们暗示了这个词的性别,但这只是一个猜测,我更愿意阅读对其含义的正式解释。

有没有人遇到过这些?

0 投票
1 回答
1767 浏览

twitter-bootstrap - bootstrap 3.0 词缀 snap down

我有一个简单的导航栏,放在标题下。当使用滚动超过标题时,我希望导航栏变得固定。

问题是当用户达到偏移量时,导航栏变得固定,但页面似乎滚动到导航栏的高度+它应用的 20px 底部边距。

http://jsfiddle.net/WzphN/

该示例看起来很像我正在处理的内容,只是标题不是这样的标题,而是响应式轮播。

由于它是响应式的,我使用 Javascrip 来启动词缀效果。

我的理解是,当浏览器滚动超过标题的高度(在我的示例中为 500)时,#nav 元素将应用于词缀类。但是为什么会这样跳下来呢?

0 投票
1 回答
1809 浏览

css - Bootstrap twitter 固定顶部较小的导航菜单

这甚至可以通过 Twitter Bootstrap http://www.usatoday.com/opinion/

向下滚动时,只有菜单部分应保持在顶部?如果有人有方便的 jsfiddle 版本,那就太好了。

0 投票
1 回答
1122 浏览

javascript - 如何以可以同时激活多个目标的方式实现“滚动间谍”?

我最近一直在玩 Bootstrap,我目前正在为我的网站创建一个新模板。我在这个问题上做了很多搜索,但我发现的大部分内容都是针对那些根本无法scrollspy上班的人。

我想做的是创建一个侧面导航,它为字母表的每个字母都有一个单独的目标。您单击一个链接可将您带到内容面板的该部分。内容面板将是一个按字母顺序排列的列表。手动滚动页面应该会自动将导航栏中的链接设置为active,从而突出显示字母(或者我决定通过 CSS 对它们执行的任何操作)。

对于那些熟悉 iPhone 的人来说,这很像他们在查看Contacts应用程序等有组织的列表时所实现的。假设视口显示了几个按字母顺序排列的名称,从D视口的顶部开始H,到底部。

使用scrollspy,仅突出显示最近的目标。下面的例子说明了我的意思。

示例:http: //jsfiddle.net/panchroma/ExWDq/embedded/result/

我希望我已经足够具体,让您了解我想要做什么。如果我在任何地方失去了你,请告诉我,我会尝试更好地重新解释。

scrollspy用来完成这项任务的工具吗?

如果我知道一种方法来检查一个元素是否在屏幕上可见,我也许可以利用它在 Javascript 中制作一些可以完成我需要的一切的东西,但我希望能够使用scrollspy它。

谢谢阅读。:)

0 投票
1 回答
36013 浏览

twitter-bootstrap - Bootstrap 3 在滚动时使用词缀将导航栏位置固定到顶部

这让我发疯......这可能很简单,因为我没有击中钉子:请给出提示:-)

我正在尝试使用 Bootstrap 3 为我的网站提供新的布局。我希望导航栏在滚动时固定在屏幕顶部。

我让它工作了,但是当词缀类开始时,导航栏下面的内容会发生变化。我找不到解决方法。

0 投票
0 回答
652 浏览

twitter-bootstrap-3 - Bootstrap 导航栏词缀模糊,Chrome 中的解决方法消失了

起初,我在单击导航栏中的导航链接后遇到导航栏间歇性消失的问题。谷歌搜索发现这是一个错误,并建议将其作为修复(https://github.com/twbs/bootstrap/issues/32,Chrome渲染问题。在正文中使用 UL 固定位置锚点

这可以防止导航栏消失。但是,我现在有一个新问题。如果使用鼠标滚轮滚动页面,导航栏会变得模糊并上下移动 +/- 可能 1 个像素,就好像它根据滚动位置在非整数像素位置呈现一样。

我没有注意到 IE 中的任何一个问题,只是 Chrome。

有没有人有解决非整数子像素位置问题的方法?

0 投票
2 回答
1332 浏览

angularjs - AngularJS/UI/Bootstrap 从元素中删除词缀?

我正在使用 AngularJS 1.2 和 Bootstrap 2.3,尽管我认为 Angular 的参与无关紧要,因为这只是 jQuery。我希望能够打开affix和关闭特定元素。我的页面上有多个元素,affix因此我不能只禁用页面上插件的所有实例。另外,我的问题与屏幕尺寸无关,因此不可能使用 css。

对于我添加了词缀的元素:

我尝试过阅读有关在线/stackoverflow 以删除词缀的内容,但均未成功:

是否可以仅删除此元素的词缀方面?

任何帮助都会很棒!