侧边栏导航(移动端商品--评论--详情)随楼层滑动高亮显示

demo下载地址

接触前端一年时间，开始还能感觉到自己的进步，随着时间的推移，开始不知道方向。因为各种前端的框架和插件在网上都能够找到现成的，直接下载下来用就好了。

从来不考虑其中的实现原理什么的，即便是去看了其中的源代码，也是知其然而不知其所以然。举一个简单的例子：去年圣诞公司要求页面上要有雪花飘落的效果，当时的第一想法，就是canvas绘图制作这个动画（必定培训的时候学的飞机大战有类似的效果），后来发现很难实现，于是就在网上找了一个jquery.snow.js的插件，发现原理很简单，

(一个div中加入html的雪花----设置初始的css----执行从上到下的飘落动画同时雪花在过程中透明----动画完成移除该div),克隆多个div执行前边的过程，看着是不是很简单。

我当时也这么认为，于是我就自己仿着做了一个（当时自己认为），其实就是照个抄了一遍，加了一点自己需要的功能（例如：随机雪花的颜色），然后我就认为这是自己的，在jquery的插件网站去发布，结果被拒绝了，我当时很失望但是没有找自己的原因（因为那是抄的），后来也写了一些轮播，导航点击页面滑动等（自己认为的插件），后来发现可复用性的很差，没有起到插件的作用。通过看别人的，学习了一段时间，才决定再次写一个，检验一下。

# 1.extend扩展方法

- iquery的extend方法，这是jquery插件常用的扩展方法方法，将插件的默认参数和用户自定义参数合并为一个新参数的对象。

var defaults = {floorClass : '.scroll-floor',navClass : '.scroll-nav',activeClass : 'active',activeTop : 100,scrollTop : 100,delayTime : 200
};
var newOptions = $.extend({}, defaults, options);

# 2.建立'获取每个楼层的jquery对象，以及该楼层滑动到窗口某位置导航高亮的TOP值，点击导航页面对应楼层滑动到窗口的某位置的TOP值'的函数

function getItem(_list,newOptions){_list.each(function() {var item = {};item.$obj = $body.find(this);item.$activeTop = $body.find(this).offset().top - newOptions.activeTop;item.$scrollTop = $body.find(this).offset().top + newOptions.scrollTop;data.push(item);});
}

# 3.建立'滚动监听函数，同时激活侧边栏导航高亮显示'的函数

function scrollActive(_list,newOptions){var nowScrollTop = $(window).scrollTop();$.each(data,function(i,item){if(nowScrollTop > item.$activeTop){_list.removeClass(newOptions.activeClass).eq(i).addClass(newOptions.activeClass);}});
}

# 4.建立'点击激活侧边栏导航高亮显示'的函数

function clickActive(_index,newOptions){$('html,body').animate({'scrollTop' : data[_index].$scrollTop},newOptions.delayTime);
}

# 5.插件接口的制作

var scroll_floor = window.scrollFloor = function(options){var newOptions = $.extend({}, defaults, options);var floorList = $body.find(newOptions.floorClass),navList = $body.find(newOptions.navClass);getItem(floorList,newOptions);scrollActive(navList,newOptions);$(window).bind('scroll',function(){scrollActive(navList,newOptions);});navList.bind('click',function(){var _index = $body.find(this).index();clickActive(_index,newOptions);});
}

# 6.完整插件的代码

(function(window){var defaults = {floorClass : '.scroll-floor',navClass : '.scroll-nav',activeClass : 'active',activeTop : 100,scrollTop : 100,delayTime : 200};var $body = $('body'),data = [];function getItem(_list,newOptions){_list.each(function() {var item = {};item.$obj = $body.find(this);item.$activeTop = $body.find(this).offset().top - newOptions.activeTop;item.$scrollTop = $body.find(this).offset().top + newOptions.scrollTop;data.push(item);});}function scrollActive(_list,newOptions){var nowScrollTop = $(window).scrollTop();$.each(data,function(i,item){if(nowScrollTop > item.$activeTop){_list.removeClass(newOptions.activeClass).eq(i).addClass(newOptions.activeClass);}});}function clickActive(_index,newOptions){$('html,body').animate({'scrollTop' : data[_index].$scrollTop},newOptions.delayTime);}var scroll_floor = window.scrollFloor = function(options){var newOptions = $.extend({}, defaults, options);var floorList = $body.find(newOptions.floorClass),navList = $body.find(newOptions.navClass);getItem(floorList,newOptions);scrollActive(navList,newOptions);$(window).bind('scroll',function(){scrollActive(navList,newOptions);});navList.bind('click',function(){var _index = $body.find(this).index();clickActive(_index,newOptions);});}
})(window);

# 7.总结
该插件参考了会找人web端首页动画的js，就是先将所有楼层查找出来，然后将其需要的各个参数放入一个对象，滚动的监听的时候对该数组循环比对的思路。
思路对一个插件的制作很重要，就像我开始第一次制作这个插件的时候，就是将所有楼层的参数放到一个数组，然后对各个区间判断，这样就会使问题复杂话，同时还不好控制。
程序员的思路很重要，最开始可以很死板的按照步骤来，但是当我们慢慢的进化，就需要不断的对代码优化，每次优化都是一次学习，慢慢的不知不觉就会发现原来你会的雪莱越多。
例如：

if(nowScrollTop > item.$activeTop){_list.removeClass(newOptions.activeClass).eq(i).addClass(newOptions.activeClass);
}

替换为：

nowScrollTop > item.$activeTop&&_list.removeClass(newOptions.activeClass).eq(i).addClass(newOptions.activeClass);

开始都一样，但是它培养了我们写代码的习惯，越写越简单。不对的地方敬请指正！！！

类似京东（商品----详情----评论）页面

wap效果地址：https://rattenking.github.io/demo/06/scrollFloorWap.html

wap效果图：

下载wap的demo：

http://www.jq22.com/jquery-info15387

类似京东首页楼层

web效果地址：https://rattenking.github.io/demo/06/scrollFloorWeb.html

web效果图：

下载web的demo：

http://www.jq22.com/jquery-info15387

其他

[我的博客，欢迎交流！](http://rattenking.gitee.io/stone/index.html)

[我的CSDN博客，欢迎交流！](https://blog.csdn.net/m0_38082783)

[微信小程序专栏](https://blog.csdn.net/column/details/18335.html)

[前端笔记专栏](https://blog.csdn.net/column/details/18321.html)

[微信小程序实现部分高德地图功能的DEMO下载](http://download.csdn.net/download/m0_38082783/10244082)

[微信小程序实现MUI的部分效果的DEMO下载](http://download.csdn.net/download/m0_38082783/10196944)

[微信小程序实现MUI的GIT项目地址](https://github.com/Rattenking/WXTUI-DEMO)

[微信小程序实例列表](http://blog.csdn.net/m0_38082783/article/details/78853722)

[前端笔记列表](http://blog.csdn.net/m0_38082783/article/details/79208205)

[游戏列表](http://blog.csdn.net/m0_38082783/article/details/79035621)

侧边栏导航(移动端商品--评论--详情)随楼层滑动高亮显示相关推荐

淘宝H5端商品数据详情解析接口，sign算法
接口调用请联系作者! { api: "wdetail", v: "6.0", ret: [ "SUCCESS::调用成功" ], data: ...
1688API接口，获取商品详情，按关键词搜索，拍立淘，商品评论商品类目，店铺接口等
接口所示 item_get获得1688商品详情 item_search按关键字搜索商品 item_search_img按图搜索1688商品(拍立淘) item_search_shop获得店铺的所有商 ...
当当网商品详情API接口（当当商品详情接口，当当商品评论接口，当当商品问答接口，当当抢购价接口，关键词搜索当当网商品接口）代码对接教程
当当网商品详情API接口(当当商品详情接口,当当商品评论接口,当当商品问答接口,当当抢购价接口,当当商品列表接口)代码对接教程如下: 1.公共参数名称类型必须描述(接口代码教程wx199701 ...
当当网商品详情API接口（当当商品详情接口，当当商品评论接口，当当商品问答接口，当当抢购价接口，当当商品列表接口）代码对接教程
当当网商品详情API接口(当当商品详情接口,当当商品评论接口,当当商品问答接口,当当抢购价接口,当当商品列表接口,关键词搜索当当网商品接口)代码对接教程如下 1.公共参数名称类型必须描述(接口 ...
淘宝API接口，获取商品详情，按关键词搜索，拍立淘，商品评论销量商品类目，买家卖家订单接口等
接口所示 item_get - 获得淘宝商品详情 item_search - 按关键字搜索淘宝商品 item_search_img - 按图搜索淘宝商品(拍立淘) item_review - 获得淘宝 ...
跨境电商API接口，Lazada商品详情，按关键词搜索，商品评论等数据的采集获取
item_review-获得lazada商品评论列表请求参数请求参数:num_iid=267690734&nation=co.th参数说明:num_iid:lazada商品ID(是对应国家 ...
pythonallowpos_利用Python抓取并分析京东商品评论数据
2.1 内容简介本章主要介绍如何利用Python抓取京东商城商品评论信息,并对这些评论信息进行分析和可视化.下面是要抓取的商品信息,一款女士文胸.这个商品共有红色,黑色和肤色等颜色, 70B到90D ...
高效构建基于Python的商品评论文本挖掘网页APP
CDA数据分析师出品作者:CDALevel Ⅰ持证人岗位:数据分析师行业:大数据背景电子商务行业在近几年发展得极为迅猛,很多在传统行业就业但是薪资不理想的都在网电子商务行业去转.这种趋势造 ...
2022最新淘宝天猫商品评论采集
评论可以客观反映商品质量.卖家服务等情况,虽然有很多刷评论的,但总体来说还是好的:除了销量销售额,评论也可以作为商品销售情况的事后佐证,评论数即商品成交的订单数,订单成交后买家如果没有评论,系统也会给 ...

侧边栏导航(移动端商品--评论--详情)随楼层滑动高亮显示

侧边栏导航(移动端商品--评论--详情)随楼层滑动高亮显示相关推荐

最新文章

热门文章