个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
24
4
我一直在 Firefox 中开发，在创建新站点几天后才注意到 Bootstrap 词缀在 Chrome/IE/Edge 中不起作用？我正在使用最新版本的 Bootstrap 以及最新版本的 Firefox 和 Chrome。不确定我运行的是哪个版本的 IE。
尝试了一些解决方法，但似乎无济于事。
CSS:
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 0px;
}
.affix-bottom {
position: absolute;
}
HTML:
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div id="scroll"> ....
</div>
<!-- Navbar -->
<div id="nav">
<div class="navbar navbar-inverse navbar-static-top" style="background: #26292E none repeat scroll 0% 0%;border-color: #DE5E60;">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a href="#" class="navbar-brand">Brand</a>
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-bar"></span>
<span class="glyphicon glyphicon-bar"></span>
<span class="glyphicon glyphicon-bar"></span>
</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
</ul>
<ul class="nav pull-right navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
<i class="glyphicon glyphicon-user"></i>
Sign In
</a>
<div class="dropdown-menu form-login stop-propagation" role="menu">
<div class="form-group">
<label for="exampleInputEmail1">
<i class="glyphicon glyphicon-envelope"></i>
Email address
</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">
<i class="glyphicon glyphicon-lock"></i>
Password
</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" />
</div>
<!--<button type="submit" class="btn btn-success btn-block"><i class="glyphicon glyphicon-ok"></i> Submit</button>-->
<a id="contact-submit" class="submit" href="#">Submit</a>
</div>
</li>
</ul>
<ul class="nav pull-right navbar-nav">
<li>
<form class="navbar-form">
<input class="form-control" placeholder="Search" type="text" />
<button type="submit" class="btn btn-default">
<i class="glyphicon glyphicon-search"></i>
</button>
</form>
</li>
<li>
<a href="#">
<span class="badge">2</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- /.navbar -->
</div>
<!-- End Navbar -->
JS:
$('#nav').affix({
offset: {
top: $('#scroll').height()
}
});
最佳答案
如果您打开 Chrome 中的开发者工具，您会注意到菜单实际上贴在屏幕顶部，只是看不见。
如果您修改词缀选择器以指定它的 z-index，它应该可以工作。
.affix {
top: 0;
width: 100%;
z-index: 100; //100 was the minimum I managed to find to make it work.
}
关于javascript - Bootstrap Affix 不适用于 IE、Chrome 或 MS Edge，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33905531/
24
4
0
我正在使用 twitter bootstrap 2.3.2 并包含了 Affix js。 div完美监听top:500px;但在底部有困难，到达底部时，它会在每个像素的 affix 和 affix-b
玩了几天 boostrap，对它提供的功能感到惊讶。 一直在尝试拥有某种“标题”，当用户向下滚动时，它会附在顶部。 您可以在这里找到我目前的工作:http://mp3dj.free.fr/affix/
通过查看 W3schools 的这个例子 How To Create an Affixed Navigation Menu 你会发现这行代码背后的原因 .affix + .container-flui
我的 html 中有这个 div: 我需要将 data-spy="affix"更改为
我整天都在 Bootply 沙箱中工作，在将相同的代码移动到实时服务器时遇到了问题。 沙箱在这里，词缀工作正常: http://www.bootply.com/wu2vXxkt5o# 在实时版本上我得
当我的导航栏使用 Bootstrap “固定”时，我也想应用自定义 CSS，但我不确定如何检测该事件。 Bootstrap 的后缀没有这方面的参数。 我的 haml 代码当前为 windowReady
我在这里创建了一个示例:http://jsfiddle.net/Ninjanoel/9GEGU/ 基本上，我想在右边添加一些东西，在这种情况下，红色框，我希望它看起来只是将自己固定在顶部，一旦发生正确
** 已更新 ** 因此，经过更多调查后，我将其范围缩小到阻止词缀类工作的这段 javascript.. 但同样.. 我不确定为什么这会破坏页面？ var panelExample = $('
我正在尝试使用 Bootstrap affix() 插件。我希望导航栏在我滚动时固定到屏幕顶部。这是我到目前为止所拥有的: http://jsfiddle.net/zncud7md/2/ 问题是当词缀
我正在使用最新版本的 bootstrap 3。我正在使用词缀插件来固定静态导航栏。但是它可以工作，在导航栏更新并固定在顶部之前会有很长的延迟。它在所有浏览器上都是可重复的。 我认为用视频展示问题最简单
我已经为 Bootstrap 和 data-spy 属性添加了库，当我向下滚动页面时，我想在其中修复 div。但它不起作用，我几乎尝试了所有方法，但无法找出问题所在。是不是像 data-spy 属性在
在此example你可以看到，当我们向下滚动时，搜索字段的宽度变大了。如果我删除标签(带有搜索字形图标) - 一切正常。我对其他标签(如 )和其他元素类(如 .panel-group、.panel-h
我正在使用 Bootstrap 在页面的一侧添加一个菜单。我希望菜单在用户滚动过去时保留在页面顶部。我发现了 affix在 bootstrap.js 中。但是，因为我在屏幕上使用了不同的列尺寸，所以我
所以我在一个有固定导航栏的网站上工作: http://abnetworksa.rewind9.com/servicios/infraestructura/ 除了固定的导航栏，还有一个“粘性”侧边栏。此
我不是真正的开发人员，但我可以使用 HTML 和 CSS。我正在尝试使用 Bootstrap 3.3.7 构建一个站点，并且我从 an example 中获取了一些代码我在 Codeply 发现当用户
我想以与 stackoverflow 的提问 页面右侧的“如何格式化”类似的方式使用 bootstrap 词缀。 我可以通过添加 css .affix { top: 70px } 并使用 class=
使用 Bootstrap 已经有一段时间了，但在新项目中没有使用它。 很好奇是否有人知道 Bootstrap 的“词缀”的替代、易于使用的插件。 我真的只是在寻找一个元素去 position:fixe
我有一个使用 Twitter Bootstrap Affix 的元素插入。如果窗口垂直调整到小于项目高度的位置，我想从元素中删除词缀功能，因为您将无法在窗口中看到所有内容。 到目前为止，我已经在控制台
我有一些 html 用于我的研究小组制作的软件库网站的页面布局。这是通过 bootstrap 3 完成的。我想要实现的是出现在 jumbotron 正下方的导航栏一旦向上滚动到页面顶部就会固定到页面顶
我想为我的附加元素设置“停止”。 示例是对 http://9gag.com/ 进行投票, 它滚动到它的父容器。 我为此使用了词缀，我发现了“data-offset-bottom”属性(没有太多记录)
我是一名优秀的程序员,十分优秀！