我们在日常浏览网站中,由于网站包含信息量大,例如购物网站中会有许多商品。那么对于这样的情况,往往会有导航栏来帮助我们迅速的找到自己想要的信息。例如图中所示,左侧是商品列表,右侧是商品分类导航栏。
目前创新互联已为上千的企业提供了网站建设、域名、虚拟主机、网站运营、企业网站设计、灌南网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
我们现在需要做到的效果是:
1、点击某个商品分类,自动跳转至具体的商品列表。
2、在鼠标滚动浏览商品的同时,根据左侧的商品信息的变化情况,右侧的分类名称会自动标红。表示现在浏览的商品正是该分类下的商品。
实现的基本思路:
1、设置锚点。在导航栏的标签中,设置"href"属性为各个展示商品信息的 2、自动删除/添加样式。当鼠标浏览到某一分类时,自动给右侧导航栏中该分类名称添加一个“当前样式”;当鼠标继续浏览,离开该分类时,自动删除该分类的“当前样式”,并同理给下一个分类添加“当前样式”。 根据思路实现过程: 1、首先创建一些示例的代码: 以上就完成了该网站的雏形(在此不展示css的制作过程),并且点击 2、设置“当前样式”: 为了简单起见,我们设置一个表示当前商品分类的样式,如下所示: 然后给导航栏中的“1F手机”设置一个“当前样式”,默认我们是从头开始浏览网站。接下来需要做的是利用jquery根据商品信息,自动给导航栏中的分类添加“当前样式”。 这就已经完成了导航栏中分类名跟随商品变化而变化的效果了,在这里需要解释一下,这个效果实现的关键点在于,怎么样根据左侧的div区域的高度和右侧的滚动条的高度去判定在哪一个分类。 在代码中我们看到“var scrolltop = $(document).scrollTop();”指的是滚动条的高度,如图: 另外,var divTop = $(this).offset().top;指的是该div距离浏览器顶部的高度,如图: 所以我们可以根据两者的高度,来判断某个div区域是属于哪个商品分类,从而对其分类名称进行样式的改变。 最后还有一个小小的问题,就是锚点定位偏移的情况。 可能会出现的是,点击某一分类,自动跳转的并不是对应div的区域,或是偏移了。参考了网上各位前辈的做法,目前我所知道的是,用两个属性——padding-top和maring-top来解决偏移问题,具体方法如下: padding-top用于解决锚点区域与顶部的偏移量 margin-top用于解决锚点区域与锚点区域之间因设置的padding-top而产生的不必要偏移量 padding-top用正值,maring-top用负值,二者数值一样 若发现最底部的锚点区域有高度不够问题,则可以给底部锚点区域设置一个min-height解决 min-height:属性设置元素的最小高度。 如果以后我还了解到有其他的方法,也会在这写出来,欢迎各位提出建议或问题一起交流。 代码学习参考:《慕课网》,网页导航栏的制作。感谢。 ...
...标签中的各个
.current{
background:red;
}
当前题目:(JQuery学习笔记)利用jquery制作网页导航定位
网页链接:http://www.cdkjz.cn/article/phddph.html