JS菜单条智能定位效果

JS仿淘宝详情页菜单条智能定位效果

2014-01-15 15:40 by 龙恩0707, 1366 阅读, 9 评论, 收藏, 编辑

类似于淘宝详情页菜单条智能定位 对于每个人来说并不陌生！如下截图所示：红色框的那部分！

View Code
/**
* JS仿淘宝详情页菜单条智能定位效果
* constructor SmartFloat
* @author tugenhua
* @time 2014-1-15
*/

function SmartFloat(options) {

this.config = {
targetElem : '#nav' // 要定位的dom节点
};

this.cache = {};

this.init(options);
}

SmartFloat.prototype = {

constructor: SmartFloat,

init: function(options){
this.config = $.extend(this.config, options || {});
var self = this,
_config = self.config,
_cache = self.cache;

var top = $(_config.targetElem).offset().top,
pos = $(_config.targetElem).css('position'),
isIE6 = navigator.userAgent.match(/MSIE 6.0/)!= null;

$(window).scroll(function(){
var winTop = $(this).scrollTop();
if(winTop >= top) {

if(!isIE6) {
$(_config.targetElem).css({
position: 'fixed',
top: 0
});
}else {
$(_config.targetElem).css({
position: 'absolute',
top: winTop
});
}
}else {
$(_config.targetElem).css({
position: pos,
top: top
});
}
});
}
};

// 页面初始化

$(function(){
new SmartFloat({

});
});

demo下载