jQuery滚动监视器实现商业城市的楼梯导航效果

jQuery滚动监视器实现商业城市的楼梯导航效果
在局部效果图上没什么要说的:
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滚动监控实现商场楼梯导航,希望对你有帮助,如果您有任何问题,请给我留言,萧边会及时给您回复。谢谢您支持网站
免责声明:本网信息来自于互联网,目的在于传递更多信息,并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益,请及时联系我们,本站将会在24小时内处理完毕。
相关文章
返回顶部