在局部效果图上没什么要说的:
HTML的结构,左边的导航需要UL中间内容,我直接把图片,为了节约的效果,但也有UL,最后,你需要使用它也可以使用UL或div,但每个地区是一个div,例如,选择一个div,div衣服,所有区域都设置在一个大的DIV,结构类似于UL >里(仅HTML结构和jQuery风格的话根据设计稿):
# xe620;选择
# xe62b;女人的衣服
# xe62e;鞋袋
# xe62a;男性
# xe607;运动
#xe620; ornament
# xe620;选择
# xe620;女人的衣服
# xe620;鞋袋
# xe620;男性
# xe620;运动
# xe620;装饰
Var offon = true;
$(窗口)。滚动(
函数)(滚动
浏览器将
执行)
如果(大){
获取滚动高度
无功_top = $(窗口)ScrollTop();
如果(_top > 150){
$(菜单);
其他{ }
$(菜单)。隐藏();
};
$(主要UL)每个(函数(i){)
获取当前。
_index = $(this)VaR指标();
无功_height =美元(这)。偏移(。+ 500); / /得到的偏移值
如果(_height > _top){ / /优先原则
$('。下拉菜单里),Eq(_index)。AddClass(开),兄弟姐妹()RemoveClass(开);
返回false;
};
});
};
});
Click(函数(){(){)
大=假;
_index = $(this)VaR指标();
$(这)。AddClass(开),兄弟姐妹()RemoveClass(开);
Var _height = $('.main UL li').Eq (_index).Offset (.Top); / / get the offset value
('body美元,HTML),
动画({ scrollTop:_height },500、函数(){())
大=真;
});
});
以上是Xiaobi
介绍给你的jQuery滚动监控实现商场楼梯导航,希望对你有帮助,如果您有任何问题,请给我留言,萧边会及时给您回复。谢谢您
支持网站。