jQuery实现商品楼层的感觉

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery滚动面板的实现</title><script type="text/javascript" src="js/jquery-1.8.2.js"></script><style type="text/css">*{padding: 0; margin: 0;list-style: none;}#wrap{background: red; width: 500px; height: 3000px; margin: 0 auto;}h2{margin-bottom: 1000px;}#nav{width: 50px;height: 150px; border: 1px solid blue; position: fixed;bottom: 0;right: 0;}#nav li{border-bottom: 1px solid blue; height: 50px; text-align: center; line-height: 50px; font-size: 30px;}#nav li a{text-decoration: none;}/*预定义样式，表示所处的楼层*/.current{background:blue;}.current a{color: white;}</style>
</head>
<script type="text/javascript">$(function(){$("#nav li").hover(function() {$(this).addClass('current');}, function() {$(this).removeClass('current');});//通过判断滚动条的高度和楼层高度来制定样式。
        $(window).scroll(function() {var top = $(document).scrollTop();//第二个标题1022，第三个标题2048;//用于添加样式的函数。function addStyle(index){$("#nav li").removeClass();$("#nav li:eq("+index+")").addClass('current');}if (top<=1022) {addStyle(0);}else if (top>1022 && top<=2048) {addStyle(1);}else if (top>2048) {addStyle(2);};});});
</script>
<body><div id="wrap"><h2 class="num1" id="target1">这是第一个标题</h2><h2 class="num2" id="target2">这是第二个标题</h2><h2 class="num3" id="target3">这是第三个标题</h2></div><ul id="nav"><li class="current"><a href="#target1">1F</a></li><li><a href="#target2">2F</a></li><li><a href="#target3">3F</a></li></ul>
</body>
</html>

转载于:https://www.cnblogs.com/Arther-J/p/5458875.html

jQuery实现商品楼层的感觉相关推荐

html仿京东快速购物导航,jQuery仿京东楼层滑动侧边栏高亮(原创)
插件描述:jQuery模仿京东侧边栏点击滑动到该楼层,同时侧边栏随着页面滚动对应导航高亮. 更新时间:2017/9/30 下午2:48:37 更新说明: 1,添加了查看评论按钮来改变对应区的高度 2, ...
超强1000个jquery极品插件！（感觉好强大，转载一下）
花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++++++++++++++++++++++++ ...
jQuery购物车商品数量加减和小计
整体代码: <!DOCTYPE html> <html><head><meta charset="utf-8"><title& ...
php多属性商品实现,jquery实现商品sku多属性选择（商品详情页）
商品SKU选择DEMO3 ul,li{padding:0px;margin:0px;}#panel{width:500px;margin:30px auto;}.goods_attr{overflow ...
【小程序项目开发-- 京东商城】uni-app之首页商品楼层
【Java Web前端开发】前端框架 bootstrap+jquery+angularjs探索
文章目录 1 Bootstrap 2 jQuery 3 AngularJS 1 Bootstrap 在Bootstrap的官网介绍中,Bootstrap is the most popular HTM ...
浅析jQuery的链式调用之 each函数
如果对于jquery的$()包装器函数还不是很清楚,请先参阅我的上一篇日志:浅析jQuery的链式调用话说回来,虽然jQuery让学习前端技术的越来越多了起来,(本人就是因为学校图书馆偶然间遇到 ...
读书笔记：锋利的JQuery
本文首发于我的个人博客:cherryblog.site/ 最近开启了阅读源码之旅,有兴趣的童靴可以持续关注,这几天再看 Zepto.js 的源码,估计博文过几天就会出来~另外,买的十几本书陆陆续续的在 ...
[翻译]当jQuery遭遇CoffeeScript的时候——妙，不可言
原作:How CoffeeScript makes jQuery more fun than ever-- Stefan Buhrmester 翻译:filod 转载声明:请注明原作者.翻译者以及译文 ...

jQuery实现商品楼层的感觉

jQuery实现商品楼层的感觉相关推荐

最新文章

热门文章