主要功能
牢固中部导航栏(转动到触发)
转动后可视内容和高亮题目一致(许多网站并未做到这一点)
点击导航题目疾速定位到内容
可自定义当触发题目时的题目款式
基于JQuery完成
(function() {
$.fn.smint = function(fxd) {
var lastScrollTop, menuHeight,
myOffset, mySelector, optionLocs,
scrollSpeed, settings, smint, smintA,
smintH, smintLi;
settings = $.extend({
'scrollSpeed': 500,
'mySelector': 'div'
});
$(this).addClass('smint');
optionLocs = new Array;
lastScrollTop = 0;
menuHeight = $('.smint').height();
smint = $('.smint');
smintLi = $('.smint li');
smintA = $('.smint a');
smintH = smintLi || smintA;
myOffset = smint.height();
if (settings.scrollSpeed) {
scrollSpeed = settings.scrollSpeed;
}
if (settings.mySelector) {
mySelector = settings.mySelector;
}
return smintH.each(function(index) {
var id, stickyMenu, stickyTop;
id = $(this).find('a').attr('href').split('#')[1];
if (!$(this).hasClass('extLink')) {
$(this).attr('id', id);
}
optionLocs.push(Array($(mySelector + '.' + id).position().top - menuHeight, $(mySelector + '.' + id).height() + $(mySelector + '.' + id).position().top, id));
stickyTop = smint.offset().top;
stickyMenu = function(direction) {
var scrollTop;
scrollTop = $(window).scrollTop() + myOffset;
if (scrollTop > stickyTop + myOffset) {
smint.css({
'position': 'fixed',
'top': 0
}).addClass('fxd');
} else {
smint.css('position', 'relative').removeClass('fxd');
}
if (optionLocs[index][0] <= scrollTop && scrollTop <= optionLocs[index][1]) {
if (direction === 'up') {
$('#' + id).addClass('active');
$('#' + optionLocs[index + 1][2]).removeClass('active');
} else if (index > 0) {
$('#' + id).addClass('active');
$('#' + optionLocs[index - 1][2]).removeClass('active');
} else if (direction === void 0) {
$('#' + id).addClass('active');
}
$.each(optionLocs, function(i) {
if (id !== optionLocs[i][2]) {
$('#' + optionLocs[i][2]).removeClass('active');
}
});
}
};
stickyMenu();
$(window).scroll(function() {
var direction, st;
st = $(this).scrollTop() + myOffset;
if ($(window).scrollTop() + $(window).height() === $(document).height()) {
smintH.removeClass('active');
$('.smint li:not(\'.extLink\'):last').addClass('active');
} else {
smintH.last().removeClass('active');
}
if (st > lastScrollTop) {
direction = 'down';
} else if (st < lastScrollTop) {
direction = 'up';
}
lastScrollTop = st;
stickyMenu(direction);
});
$(this).on('click', function(e) {
var myOffset;
var goTo, hash;
myOffset = smint.height();
e.preventDefault();
hash = $(this).find('a').attr('href').split('#')[1];
goTo = $(mySelector + '.' + hash).offset().top - myOffset;
$('html, body').stop().animate({
scrollTop: goTo
}, scrollSpeed);
if ($(this).hasClass('extLink')) {
return false;
}
});
});
};
$.fn.smint.defaults = {
'scrollSpeed': 500,
'mySelector': 'div'
};
})(jQuery);
根据此网站的代码 稍作修正
运用体式格局
js中声明挪用比方 导航的类“navbar-wrapper-middle”
$('.navbar-wrapper-middle').smint('fxd')
//fxd是本身css文件里按本身志愿定义好的类
//即导航栏牢固后的款式