如何设置class="活动"到两个独立的基于滚动的链接
How to set the class="active" to two separate links based on scrolling
试图找到一种方法,当网页的某个区域滚动到单页站点时,将链接设置为导航条的活动状态
我有这个工作为我的主菜单,可以看到更大的分辨率显示器,但是我也有一个移动设备的辅助菜单,尽管所有的尝试似乎从来没有工作过。我试过设置两者或只是设置手机本身无济于事。下面是我的导航条代码的副本,以及我使用的java脚本来设置活动
<!-- Start Header Section -->
<div class="hidden-header"></div>
<header class="clearfix">
<!-- Start Top Bar -->
<div class="top-bar">
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- Start Contact Info -->
<ul class="contact-details">
<li><a href="#"><i class="fa fa-phone"></i> +1 (000) 000 0000</a></li>
<li><a href="#"><i class="fa fa-envelope-o"></i> email@domain.com</a></li>
</ul>
<!-- End Contact Info -->
</div>
<!-- .col-md-6 -->
<div class="col-md-6">
<!-- Start Social Links -->
<ul class="social-list">
<li><a class="facebook itl-tooltip" data-placement="bottom" title="Facebook" href="#"><i class="fa fa-facebook"></i></a></li>
<li><a class="twitter itl-tooltip" data-placement="bottom" title="Twitter" href="#"><i class="fa fa-twitter"></i></a></li>
<li><a class="google itl-tooltip" data-placement="bottom" title="Google Plus" href="#"><i class="fa fa-google-plus"></i></a></li>
</ul>
<!-- End Social Links -->
</div>
<!-- .col-md-6 -->
</div>
<!-- .row -->
</div>
<!-- .container -->
</div>
<!-- .top-bar -->
<!-- End Top Bar -->
<!-- Start Logo & Naviagtion -->
<div class="navbar navbar-default navbar-top">
<div class="container">
<div class="navbar-header">
<!-- Stat Toggle Nav Link For Mobiles -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fa fa-bars"></i>
</button>
<!-- End Toggle Nav Link For Mobiles -->
<a class="navbar-brand" href="index.html">
<img alt="AltTxt" src="images/logo.svg">
</a>
</div>
<div id="menu-center" class="navbar-collapse collapse">
<!-- Start Navigation List -->
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<!-- End Navigation List -->
</div>
</div>
<!-- Mobile Menu Start -->
<ul class="wpb-mobile-menu">
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<!-- Mobile Menu End -->
</div>
<!-- End Header Logo & Naviagtion -->
</header>
<!-- End Header Section -->
下面是我用来修改主菜单的javascript:
$(document).ready(function () {
$(document).on("scroll", onScroll);
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPosition = $(document).scrollTop();
$('#menu-center a').each(function () {
var currentLink = $(this);
var refElement = $(currentLink.attr("href"));
if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
$('#menu-center ul li a').removeClass("active");
currentLink.addClass("active");
}
else{
currentLink.removeClass("active");
}
});
}
编辑:这是我正在使用的新代码,它适用于两个菜单,但不是所有部分。
var navItems = jQuery('.menu-item a');
var win = jQuery(window);
var items = jQuery('.item');
navItems.click(function(e){
var item = jQuery(this);
jQuery('.menu-item a.active').removeClass('active');
item.addClass('active');
});
win.scroll(function(e){
jQuery.each(items, function(key, value){
var item = jQuery(value);
console.log(win.scrollTop(), item.offset().top);
if(win.scrollTop() >= item.offset().top){
jQuery('.menu-item a.active').removeClass('active');
var id = item.attr('id');
jQuery.each(navItems, function(key, value){
var navItem = jQuery(value);
if(navItem.attr('href') == '#'+id) navItem.addClass('active');
});
}
});
});
Ok找到了导致新代码不能完全工作的错误。去想用别人的代码,不小心有了重复类。对于其他试图这样做的人,以下方法对我有用:
var navItems = jQuery('.nav-item a');
var win = jQuery(window);
var items = jQuery('.segment');
navItems.click(function(e){
var segment = jQuery(this);
jQuery('.nav-item a.active').removeClass('active');
segment.addClass('active');
});
win.scroll(function(e){
jQuery.each(items, function(key, value){
var segment = jQuery(value);
console.log(win.scrollTop(), segment.offset().top);
if(win.scrollTop() >= segment.offset().top){
jQuery('.nav-item a.active').removeClass('active');
var id = segment.attr('id');
jQuery.each(navItems, function(key, value){
var navItem = jQuery(value);
if(navItem.attr('href') == '#'+id) navItem.addClass('active');
});
}
});
});
确保将任何菜单项的<li>
设置为class="nav-item"
,将任何<section>
设置为class="segment"
相关文章:
- 如何使jQuery插件函数可调用以供独立使用,而不在集合上操作
- 铬:“;未捕获的语法错误:意外的标记:"
- 定义完全独立的样式信息
- 如何更改reactjs中外部/独立组件的状态或属性
- 可以设置“;文件名"发生错误时显示的内联脚本标记的
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- 检测电话窃听,即:<a href="电话:xxx">在UIWebview上
- 使用“+="操作人员
- //而不是在src=“”上使用http://"属性
- "未捕获的语法错误:意外的标记}"
- 可以<脚本类型=“;text/javascript”>window.location=“/"</
- "实例范围”;TypeScript类的getter/setter
- Javascript复选框函数:;缺少:在属性id之后"
- "“;变量未引用正确的对象
- "日期“;AJAX请求返回的类型值未定义
- 得到"TypeError:无法读取属性'filename'未定义的“;调用“npm start
- Soundcloud api"未捕获的类型错误:无法读取属性'uri'“未定义”;
- "工具提示"jQuery插件坏了
- "锻造;React中的表达式
- 使用javascript"随机引用“;脚本,但跨越两个独立的元素