类似于淘宝详情页菜单条智能定位 对于每个人来说并不陌生！如下截图所示：红色框的那部分！
列表页定位">
基本原理：
是用JS侦听滚动事件，当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"(要滚动的对象)距离页面顶部的高度，也就是说滚动的对象与窗口的上边缘接触时，立即将对象定位属性position值改成fixed（固定）（除IE6以外，因为IE6不支持fixed）。对于IE6用绝对定位position:absolute,top:就是"游览器滚动的top"。在IE6下浏览看到会有小抖动，不过目前也没有办法的，淘宝详情页貌似也是这样处理的！
JSFiddle效果如下：
想要查看效果 请点击我！
代码比较简单！ 不多说！直接贴代码：
HTML如下：
<div class="container"> <div style="height:300px;">我是来占位的，不要烦我啊！</div> <div id = "nav" class="nav"> <ul> <li><a href="#">宝贝详情</a></li> <li class="current"><a href="#">评价详情(200)</a></li> <li><a href="#">成交记录(20000)</a></li> </ul> </div> <div style="height:1800px;"></div> </div>
css代码如下：
.container{width:720px;margin:0 auto;}
* {margin:0;padding:0;}
ol,ul{list-style:none}
.nav {width:720px;height:42px;position:absolute;margin:0 auto;border:1px solid #d3d3d3; background:#f7f7f7;-moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px;}
.nav li{float:left;height:42px;line-height:42px;padding:0 10px;border-right: 1px solid #d3d3d3; font-size:14px; font-weight:bold}
.nav li.current{background:#f1f1f1; border-top:1px solid #f60}
.nav li a{text-decoration:none;}
.nav li.current a{color:#333}
.nav li a:hover{color:#f30}
JS代码如下：
/**
* 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下载
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索淘宝保存数据原理
， 淘宝
， 仿淘宝
， 定位
， position
， 滚动
， top
， config
， 智能定位
， 智能滚动
， 仿淘宝详情页
， ios淘宝详情页
， 淘宝详情页面
仿Vista进程条效果
详情页返回列表页定位、安卓左边菜单右边详情、详情页风格定位、旺铺智能版详情页、智能编辑详情导航模版，以便于您获取更多的相关知识。