我开发了一个页面,一旦页面滚动,它就有一个固定的菜单,而且选项卡在相应的节id上也会变为活动的。
我几乎已经完成了功能,但我面临一些问题:
- 滚动是不合适的,它没有停在容器的确切位置。示例:如果我滚动到section3,一旦section3容器命中,选项卡就会被选中,但我需要滚动一点才能选中选项卡
- 一旦我点击选项卡,页面就会被冻结,无法在页面上进行任何滚动,也无法选择任何其他选项卡
我看过很多demo,也尝试过,但没能实现。据我所知,我做了这个演示。请帮我修改当前我做错的代码。
这就是我尝试过的。
演示链接
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,你的导航列表选择锚应该在窗口滚动的外侧。
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;
});