菜单高亮显示,javascript(jquery)不包括标题部分顶部填充
我有这段代码,我无法从节的顶部识别我的h1填充,因此高亮显示仅在页面位置位于该h1的顶部时有效,而不是在节开始时有效菜单高亮显示,javascript(jquery)不包括标题部分顶部填充,jquery,html,css,Jquery,Html,Css,我有这段代码,我无法从节的顶部识别我的h1填充,因此高亮显示仅在页面位置位于该h1的顶部时有效,而不是在节开始时有效 $(document).ready(function () { $(document).on("scroll", onScroll); $('a[href^="#"]').on('click', function (e) { e.preventDefault(); $(document).off("scroll");
$(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();
$('nav a').each(function () {
var currentLink = $(this);
var refElement = $(currentLink.attr("href"));
if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.outerHeight( true ) > scrollPosition) {
$('nav ul li a').removeClass("active");
currentLink.addClass("active");
}
else{
currentLink.removeClass("active");
}
});
}
$(文档).ready(函数(){
$(文档).on(“滚动”,onScroll);
$('a[href^=“#“]”)。关于('click',函数(e){
e、 预防默认值();
$(文档)。关闭(“滚动”);
$('a')。每个(函数(){
$(this.removeClass('active');
})
$(this.addClass('active');
var target=this.hash;
$target=$(target);
$('html,body').stop().animate({
'scrollTop':$target.offset().top+2
},500,'swing',函数(){
window.location.hash=目标;
$(文档).on(“滚动”,onScroll);
});
});
});
函数onScroll(事件){
var scrollPosition=$(document.scrollTop();
$('nav a')。每个(函数(){
var currentLink=$(此);
var refElement=$(currentLink.attr(“href”);
if(refElement.position().top滚动位置){
$('nav ul li a')。删除类(“活动”);
currentLink.addClass(“活动”);
}
否则{
currentLink.removeClass(“活动”);
}
});
}
我还有一个菜单动画,其中菜单在滚动时调整大小
但这是我的html
<section class="ui masthead segment" id="A ID" >
<div class="ui page grid">
<div class="column">
<img src="images/logo.png" class="ui medium image">
<div class="ui hidden transition information">
<h1 class="ui blue header">
A h1
</h1>
<p>blablabla</p>
</div>
</div>
</div>
</section>
甲h1
喋喋不休
如果没有到目前为止您所拥有的样本,那么毫无疑问。。。添加您的HTML或JSFIDLE以帮助更好地描述您的问题。哦,对不起,我编辑了。。。