个人中心
gpt4 book ai didi

jQuery 浮动导航菜单适合购物商品类型的网站

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章jQuery 浮动导航菜单适合购物商品类型的网站由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

单页面网页内容较多，页面长度较大，需要方便快速的在页面的不同位置进行定位，所以浮动菜单逐渐流行了起来，如下图 男装、女装、美妆等.

jQuery 浮动导航菜单适合购物商品类型的网站

这种菜单功能分为两部分:

1、点击菜单项，网页滚动到对应位置，可简单通过锚点实现； 。

2、滚动页面的时候，菜单项的选中状态要跟着改变，这就需要监听网页的滚动事件并通过一点计算来实现了； 。

jQuery 浮动导航菜单适合购物商品类型的网站

计算 scrollTop 和 各个 div 的 offsetTop 的大小关系，判断现在网页显示的位置在什么地方，再根据计算的结果给对应的菜单项添加样式。比如第二个 div 的 offset().top = 300， 第三个 div 的offset().top = 600，此时的 scrollTop = 400，说明现在显示的大部分是第二个 div 的位置，700 则是第三个 div。下面是一个简单的例子:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
< div id = "menu" >
< ul >
< li >< a href = "#item1" class = "current" >1F 男装</ a ></ li >
< li >< a href = "#item2" >2F 女装</ a ></ li >
< li >< a href = "#item3" >3F 美妆</ a ></ li >
< li >< a href = "#item4" >4F 数码</ a ></ li >
< li >< a href = "#item5" >5F 母婴</ a ></ li >
</ ul >
</ div >
< div id = "content" >
< h1 >网购</ h1 >
 
< div id = "item1" class = "item" >
< h2 >1F 男装</ h2 >
< ul >
< li >< a href = "#" >< img src = "" alt = "" /></ a ></ li >
<!-- 若干个li -->
</ ul >
</ div >
<!-- 若干个item-->
</ div >
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
* { margin : 0 ; padding : 0 ;}
body { font-size : 12px ; line-height : 1.7 ;}
li { list-style : none ;}
#content { width : 800px ; margin : 0 auto ; padding : 20px ;}
#content h 1 { color : #0088bb ;}
#content .item { padding : 20px ; margin-bottom : 20px ; border : 1px dotted #0088bb ;}
#content .item h 2 { font-size : 16px ; font-weight : bold ; border-bottom : 2px solid #0088bb ; margin-bottom : 10px ;}
#content .item li { display : inline ; margin-right : 10px ;}
#content .item li a img { width : 230px ; height : 230px ; border : none ;}
#menu{ position : fixed ; left : 50% ; margin-left : 400px ; top : 100px ;}
#menu ul li a {
display : block ;
margin : 5px 0 ;
font-size : 14px ;
font-weight : bold ;
color : #333 ;
width : 80px ;
height : 50px ;
line-height : 50px ;
text-decoration : none ;
text-align : center ;
}
#menu ul li a:hover,#menu ul li a.current { color : #fff ; background : #0088bb ;}
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$( function (){
$(window).scroll( function (){
var scrollTop = $(document).scrollTop();
var contentItems = $( "#content" ).find( ".item" );
var currentItem = "" ;
contentItems.each( function (){
var contentItem = $( this );
var offsetTop = contentItem.offset().top;
if (scrollTop > offsetTop-200){ //此处的200视具体情况自行设定，因为如果不减去一个数值，在刚好滚动到一个div的边缘时，菜单的选中状态会出错，比如，页面刚好滚动到第一个div的底部的时候，页面已经显示出第二个div，而菜单中还是第一个选项处于选中状态
currentItem = "#" + contentItem.attr( "id" );
}
});
if (currentItem&&currentItem!=$( "#menu" ).find( ".current" ).attr( "href" )){
$( "#menu" ).find( ".current" ).removeClass( "current" );
$( "#menu" ).find( "[href=" + currentItem + "]" ).addClass( "current" );
}
});
});

  。

最后此篇关于jQuery 浮动导航菜单适合购物商品类型的网站的文章就讲到这里了,如果你想了解更多关于jQuery 浮动导航菜单适合购物商品类型的网站的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

25 4 0
文章推荐： qq个性签名古风霸气大全2020 男生女生古风签名高傲范
文章推荐： 微信十周年红包封面发布 微信十周年红包封面序列号领取教程
文章推荐： 很高傲很霸气的qq个性签名2020 高冷有个性的男生女生签名
文章推荐： 友情链接对于网站优化的利弊分析
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com