- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
大家好,我让我的导航栏在一页导航上工作。但是我想要它,以便当用户向下滚动页面手册时,导航类更改为应该激活的导航类,因此当他们经过该部分时,导航栏将突出显示事件部分。
当他们点击它时我可以让它工作,但不能手动滚动
HTML:
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="10">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#a">a</a></li>
<li><a href="#b">b</a></li>
<li><a href="#c">c</a></li>
<li><a href="#d">d</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
CSS:
affix {
top: 0;
width: 100%
}
.affix + .section {
margin-top: 68px;
}
.navbar {
margin-bottom: 0px;
left: 0;
top: 0;
width: 100%;
list-style: none;
height: 70px;
z-index: 1
}
.navbar-nav {
float: none;
margin: 0;
text-align: center
}
.navbar-nav>li {
float: none;
display: inline-block
}
.navbar-nav>li>a {
line-height: 38px
}
.navbar-nav>li>a.active {
background-color: #E7E7E7
}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
color: #333333;
background-color: #E7E7E7
}
.navbar-toggle {
background-color: #000000;
background-image: none;
border-radius: 4px;
float: right;
margin-bottom: 8px;
margin-right: 15px;
margin-top: 18px;
padding: 9px 10px;
position: relative
}
.navbar-inverse .navbar-toggle .icon-bar {
background-color: #2DCC70
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #000000
}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
border-color: transparent
}
#a{
height: 700px;
background-color: Red;
}
#b{
height: 700px;
background-color: blue;
}
#c{
height: 700px;
background-color: yellow;
}
#d{
height: 700px;
background-color: black;
}
JS:
$(function() {
$('ul.nav a').bind('click',function(event){
event.preventDefault();
var $anchor = $(this);
//Update active link
$('ul.nav a').removeClass('active');
$anchor.addClass('active');
//Animate scroll position
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
});
});
最佳答案
你可以用 scrollspy 做到这一点.名为 Waypoints 的 Javascript 库是另一种可能性。
这是一个如何使用 Waypoint 的示例:
function makeNavActive($elem) {
if (typeof $elem !== "jQuery") {
$elem = $($elem);
}
$('ul.nav a').removeClass('active');
$elem.addClass('active');
}
function waypointHandler() {
var elementID = this.element.id;
makeNavActive("[href='#" + elementID + "']");
}
var waypointA = new Waypoint({
element: document.getElementById('a'),
handler: waypointHandler,
offset: 38
});
var waypointB = new Waypoint({
element: document.getElementById('b'),
handler: waypointHandler,
offset: 38
});
var waypointC = new Waypoint({
element: document.getElementById('c'),
handler: waypointHandler,
offset: 38
});
var waypointAD = new Waypoint({
element: document.getElementById('d'),
handler: waypointHandler,
offset: 38
});
我相信您可以创建一种更好的方式来设置航路点,但这将作为示例。
为了好玩,我还创建了一种在 vanilla JS 中实现它的方法。所以这是一个很好的轻量级 Vanilla 实现,尽管不如使用航路点灵活:
function makeNavActive($elem) {
if (typeof $elem !== "jQuery") {
$elem = $($elem);
}
$('ul.nav a').removeClass('active');
$elem.addClass('active');
}
function handleScroll(){
var scrollLevel = Math.floor(window.pageYOffset / 700);
console.log(scrollLevel);
if(scrollLevel === 0) {makeNavActive("[href='#a']")}
else if(scrollLevel === 1) {makeNavActive("[href='#b']")}
else if(scrollLevel === 2) {makeNavActive("[href='#c']")}
else if(scrollLevel === 3) {makeNavActive("[href='#d']")}
}
window.onscroll=handleScroll
希望对您有所帮助!祝你的元素好运。
关于javascript - 导航有一个活跃的类工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46531132/
尝试根据 :server-name 在请求中返回的内容加载特定模板: (ns rosay.views.common (:use noir.core) (:require [noir.reque
我想检查谁是活跃用户(过去 7 天都登录过)以及谁是非活跃用户(过去 7 天没有登录过)。我有 2 个表用户和机构。用户表结构如下: id | first_name | email | agency
我的 CSS 有问题。我试图将事件类设置为在垂直菜单上以粉红色突出显示,但事实并非如此。我如何在没有用户悬停在它上面的情况下保持它点亮。这是我的 HTML 和 CSS。 HTML 代码:
我有一个 Tile,当它处于 Activity 状态时,会运行一个计时器,在这五分钟内执行一项任务,然后在一定时间后返回到非 Activity 状态。 但是,我遇到的问题是服务被终止了。当所述计时器启
我已经知道如何在点击类(class)时激活它,但是当我将鼠标悬停在特定区域时如何激活类(class)? 这里是点击时获取事件类的代码: >Contact 是不是这样的: $('').hover(
我在使用 screen 时遇到问题。我知道 screen session 在主进程工作时工作,但我怎样才能让这个 session 保持事件状态?我需要这个,因为 session 关闭时有一些子进程被杀
我有一个 session 超时为 15 分钟的站点。在某些页面上,用户有时会花费超过 15 分钟的时间来填写回复。在这种情况下,使 session 保持事件状态的最佳解决方案是什么? 我已经在这些页面
我正在网页(在弹出窗口中)检查用户状态 - 他是活跃的还是空闲的。如果他空闲超过 30 分钟,窗口将自动关闭并重置数据库中的一些标志。 我设置了包含时间的 cookie(他打开弹出窗口的时间),并在每
由于某种原因,Jenkins 一直停止工作,我必须重新启动 jenkins 服务才能使其再次工作。每次发生这种情况时,服务都是“事件(退出)”,但日志中没有任何内容。我使用 Ubuntu 16.04。
我有一个幻灯片,需要单击它才能转到下一个图像/视频。但是,我想自动执行此操作,因此不需要任何用户事件。 页面如下所示: Slide 1 Slide 2 Slide
我正在使用 C# 应用程序来验证和检查位于 Window 2008 64 位服务器上的 Active Directory 用户。 使用以下代码提供用户名和密码时,我能够成功验证用户:我的域名值为 ro
这个问题在这里已经有了答案: Is there a CSS parent selector? (33 个答案) 关闭 9 年前。 有没有办法根据类中子元素的类来选择父元素?与我相关的示例是关于 ht
我正在尝试连接到 API,对用户进行身份验证,然后查看用户详细信息。这是通过首先访问登录端点来完成的 http://api.example.com/login// 登录然后查看用户详细信息: http
我正在尝试连接到 API,对用户进行身份验证,然后查看用户详细信息。这是通过首先访问登录端点来完成的 http://api.example.com/login// 登录然后查看用户详细信息: http
我是一名优秀的程序员,十分优秀!