引导3.0:当内容在有固定导航栏下移动时触发
引导3.0:当内容在有固定导航栏下移动时触发
提问于 2015-07-01 14:16:11
我已经修复了站点顶部的引导3.0导航条。对于大型内容，当用户向下滚动站点内容时，该内容会移动到其下方。A样本at：http://www.bootply.com/wgOrXN2R2b
我希望在用户滚动和页面内容在导航栏下面移动时，立即在navbar上设置css，并在用户向上滚动并且内容不再低于navbar时立即删除css。( css将在nav中添加一个方框阴影，并在内容移动到其下方时形成一条细的透明线)
我使用了下面的js：
function scroll() {
if ($(window).scrollTop() >= $('#content').offset().top) {
$(".navbar-fixed-top").addClass('fadeOut');
} else {
$(".navbar-fixed-top").removeClass('fadeOut');
}
}
document.onscroll = scroll;但是，正如您在示例中所看到的，它不能很好地工作，css应用于某些行之后。
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-07-01 14:29:19
我想你只需要考虑一下肚脐的高度
if ($(window).scrollTop() > ($('#content').offset().top - 50)) {Stack Overflow用户
发布于 2015-07-01 14:35:02
有一种更干净的方法来完成我认为您在使用Bootstrap和它们的词缀javascript模块之后的工作。查看他们的文档：http://getbootstrap.com/javascript/#affix
要实现您想要实现的目标，只需将其添加到您想要修改的div中，根据需要更改偏移量值(，但要使其工作，您需要确保您正在调用bootstrap.js文件)：
data-spy="affix" data-offset-top="60" data-offset-bottom="200"在您的例子中，要更改导航条，您将按如下方式应用它：
<div class="navbar navbar-default navbar-fixed-top" data-spy="affix" data-offset-top="60" data-offset-bottom="200">这将发生的是，您将得到3个类应用到您的导航栏。当它接近顶部时，它将是. .affix top，当它接近底部时，您将得到..affix底部，而当两者都没有时，您将得到.affix。
.affix将使用默认的引导css应用一个“固定”类，但您基本上可以使用偏移量值围绕这3件事构建自己的特定类。默认情况下，导航栏可以应用下拉阴影，但是当它有. applied时，将其删除。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31163894
复制相关文章
相似问题
腾讯云开发者
