我开发了一个页面,一旦页面滚动,它就会有一个固定的菜单,并且选项卡将在相应的部分 ID 上变为事件状态。
我几乎已经完成了功能,但我遇到了一些问题:
- 滚动不合适,并且没有停在容器的确切位置。示例:如果我滚动到第 3 节,一旦第 3 节容器命中,该选项卡就应该被选择,但我需要滚动一点才能选择该选项卡。
- 一旦我点击该选项卡,页面就会卡住,无法在页面上进行任何滚动,也无法选择任何其他选项卡。
我看过很多演示并尝试过但未能实现。据我所知,我做了这个演示。 请帮我解决当前代码中我做错的地方。
这是我尝试过的。
HTML:
<div class="top_layer">Top Layer</div>
<div class='menu'>
<ul>
<li><a href="#basic1">basic 1</a></li>
<li><a href="#basic2">basic 2</a></li>
<li><a href="#basic3">basic 3</a></li>
<li><a href="#basic4">basic 4</a></li>
</ul>
</div>
<div id="basic1" class="section">basic 1</div>
<div id="basic2" class="section">basic 2</div>
<div id="basic3" class="section">basic 3</div>
<div id="basic4" class="section">basic 4</div>
JS:
var menuSection = $('.section') , navLists = $('.menu ul li'),
navLists_height = navLists.outerHeight(), headerOffset = $('.top_layer').offset().top;
$(window).on('scroll', function () {
var window_top = $(window).scrollTop() + 12;
if (window_top > headerOffset) {
$('.menu').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
}
var cur_position = $(this).scrollTop();
menuSection.each(function() {
var top = $(this).offset().top - navLists_height,
bottom = top + $(this).outerHeight();
if (cur_position >= top && cur_position <= bottom) {
navLists.find('a').removeClass('active');
menuSection.removeClass('active');
$(this).addClass('active');
navLists.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
}
});
navLists.find('a').on('click', function () {
var $el = $(this)
, id = $el.attr('href');
$('html, body').animate({
scrollTop: $(id).offset().top - navLists_height
}, 500);
return false;
});
});
最佳答案
我已经更新了代码,查看fiddle ,您的导航列表选择 anchor 应该位于窗口滚动之外。
var menuSection = $('.section'),
navLists = $('.menu ul li'),
navLists_height = navLists.outerHeight(),
headerOffset = $('.top_layer').offset().top;
$(window).on('scroll', function() {
var window_top = $(window).scrollTop() + 12;
if (window_top > headerOffset) {
$('.menu').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
}
var cur_position = $(this).scrollTop() + 70;//70 for fixed header height
menuSection.each(function() {
var top = $(this).offset().top - navLists_height,
bottom = top + $(this).outerHeight();
if (cur_position >= top && cur_position <= bottom) {
navLists.find('a').removeClass('active');
menuSection.removeClass('active');
$(this).addClass('active');
navLists.find('a[href="#' + $(this).attr('id') + '"]').addClass('active');
}
});
});
navLists.find('a').on('click', function() {
var $el = $(this),
id = $el.attr('href');
$('html, body').animate({
scrollTop: $(id).offset().top - navLists_height
}, 500);
return false;
});
关于javascript - 粘贴标题并将选项卡设置为事件状态时出现滚动问题 | jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34355319/