问题标签 [affix]

我已搜索但无法获得正确的解决方案

我与以下帖子相差甚远： Bootstrap。如何添加多个添加词缀属性？ 使用多个词缀属性

请有人帮我解决两个问题：

问题1：

http://jsfiddle.net/Spiral57/b9xTs/

我需要将标题、导航栏和导航包装器固定在顶部，保持黑色背景。

问题 2

http://jsfiddle.net/Spiral57/wnbFf/

我需要将标题、导航栏和导航包装器固定在顶部，保持白色背景。有了这个，我需要徽标保留在右侧。

I have on my page:

• fixed top navbar with height 74px;
• affixed sidebar navigation on the right column;
• left column, which has toggleable content;

The issues I have are following:

• if I click the link with anchor the content on the left column is hidden under fixed-top navbar (this, I will fix probably with margin-top: -74px; padding-top: 74px)
• if I collapse the content in the left column then sidebar menu using affix goes creazy. It is still considering collapsed content as visible and therefore the sidebar highlight points to wrong (hidden/collapsed) content.

我正在尝试使用 Bootstrap Affix 功能将我的导航栏放置在全角响应图像下方。当用户滚动并到达导航栏时，随着用户向下滚动，导航栏将固定在屏幕顶部。下面链接的 JSFiddle 帮助我进行了设置，但顶部偏移量似乎不是动态的。相反，它似乎被设置为英雄图像的原始高度。因此，当我扩大或缩小屏幕尺寸时，词缀不再按预期发挥作用。

JSFiddle在这里：http: //jsfiddle.net/MarkMarine/q3J56/7/

这是我用于 Javascript 以尝试使顶部偏移动态化的代码：

});

当我添加位于标题元素下方的导航栏元素时，导航栏会过早添加，就好像标题中的图像不存在一样。

导航栏应该在导航栏到达顶部时附加，而不是更早。我用于此的代码将偏移量设置为导航栏的滚动位置，但问题是，这个位置的计算就像标题中的图像不存在一样。

我尝试在图像周围放置 p 标签，将图像高度显式设置为固定高度以及自动，将显示属性设置为每个可能的值，但无济于事。我没有在标题中浮动我的图像。当我在标题中添加额外的文本行时，导航附加到该高度（导航栏附加的偏移高度检测文本的高度，但不检测图像的高度）。

*编辑：小提琴工作正常（这是所需的行为）。 http://jsfiddle.net/gwho/8sAYW/ （由于某种原因，这个小提琴没有表现出有问题的行为）。

咖啡脚本中的 JS

**编辑：但我的本地主机的行为不同，如屏幕截图所示。

我认为问题可能是在rails的资产管道中最后加载图像（在导航栏部分之前）......并且在呈现图像之前计算js代码中导航栏的偏移位置......而在JS小提琴中, 没有这个问题。

如果/我应该如何推迟运行 javascript 代码，以便在加载所有图像后运行？

正如我在标题中所说，我正在尝试在 Bootstrap 中创建一个带有词缀的水平工具栏。我不介意工具栏是否包裹在井、导航或面板中，只要它是水平的并使用词缀即可。

我目前正在使用一口井，我尝试了几个 Bootstrap 组件，结果完全一样。

当我的工具栏未处于“已附加”状态时，它可以正常工作，它具有适当的宽度等等，但是当 affix 启动时，它会失去它的宽度，因为position: fixed. 据我所知，具有固定位置的元素必须提供特定的宽度，这很好，我的问题是我找不到准确可靠的方法来保持工具栏在“固定”之前的宽度，这将设备分辨率不同。

如何为“附加”工具栏提供适当的宽度？如果我不提供宽度，则工具栏太小；如果我提供 100% 的宽度，工具栏会在右侧溢出，并且缺少一些 UI 元素。

这是一个重现我遇到的完全相同问题的示例：http: //www.bootply.com/DAOHegIaTl。

这是用于词缀的 CSS：

我的html结构是这样的：

http://jsfiddle.net/W5U7q/2/

有人可以帮助我吗？

所以我在尝试使用粘性顶部导航实现附加侧边栏时遇到问题，在页面上滚动或单击附加侧边栏时，内容标题偏离 40 像素（被粘性顶部导航覆盖）

基本上，在固定导航下内容没有正确显示。

任何想法在这里如何解决它将不胜感激！

现场示例在这里

http://www.melindayang.com/portfolio-carmax.html

下面冷：

粘性顶部导航

词缀侧边栏

内容

JS

我试图弄清楚为什么affix当我更改 Angular 视图时我的 -ed 面板没有保持原样。

我已将 affix 属性直接添加到第一页（详细信息）的面板中，并将其仅留在第二页（航班）的 data-spy 中。

在一个完整的网络版本中，如果我刷新航班页面，词缀会突然启动，并在我滚动时保持不变，但如果我只是使用 Angular 导航到该页面，则不会。

当我在视图之间导航时，Bootstrap 似乎没有将词缀添加到类中。

HTML：

CSS：

这是一个Plunker..

http://plnkr.co/edit/S0Bc50?p=preview

我在这里发现了一个类似的问题：

Twitter Bootstrap：词缀未在单页应用程序中触发

但我无法弄清楚如何将其应用于我的问题......

任何帮助都会很棒！

当我的导航栏使用引导程序“固定”时，我也想应用自定义 CSS，但我不确定如何检测该事件。Bootstrap 的词缀没有这个参数。

我的haml代码目前是

感谢您的帮助=]

我有一个最初不固定在顶部的导航栏，我在这里尝试做的是，当我滚动偏移量为 150 像素时，导航栏以固定位置固定在顶部，它使用页面内锚链接到页面的不同部分，顶部固定的词缀导航栏将突出显示页面锚区域中的正确（scrollspy？）

我的问题是，在导航栏固定到顶部后，固定导航栏会阻止锚点指向页面上的正确位置，因为某些内容隐藏在导航栏后面。

我已经对这个问题进行了相当长的研究，并看到了很多关于向 body 添加 padding-top 的建议，但同样，top-nav 直到通过滚动触发后才会修复。向正文添加填充后，导航仍然无法正确突出显示

我已经尝试了以下部分的解决方案 如何在 Bootstrap 中设置 ScrollSpy 的偏移量？

我不擅长解释，所以我将在这里发布一些屏幕截图。

这是滚动和附加之前的屏幕截图

这是导航栏固定到顶部后的屏幕截图，我滚动到页面内容

我希望它如何工作

下面是我的代码。

这是内容区

其余的 html 只是包含在 section2、section3 和 section4 中的内容

我的 CSS

JS