商城侧边导航定位jquery菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是商城侧边导航定位jquery菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>

</head>
<body>

<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 id="item2" class="item">
        <h2>2F 女装</h2>
        <ul>
            <li><a href="#"><img src="" alt=""/></a></li>
            <!-- 若干个li -->
        </ul>
    </div>
    <div id="item3" class="item">
        <h2>3F 美妆</h2>
        <ul>
            <li><a href="#"><img src="" alt=""/></a></li>
            <!-- 若干个li -->
        </ul>
    </div>
    <div id="item4" class="item">
        <h2>4F 数码</h2>
        <ul>
            <li><a href="#"><img src="" alt=""/></a></li>
            <!-- 若干个li -->
        </ul>
    </div>
    <div id="item5" class="item">
        <h2>5F 母婴</h2>
        <ul>
            <li><a href="#"><img src="" alt=""/></a></li>
            <!-- 若干个li -->
        </ul>
    </div>
</div>
</body>
</html>

JS代码(app.js):

/** * Created by liusongjin on 15-4-4. */
$(function (){
	$(window).scroll(function (){
	var scrollTop = $(document).scrollTop();
	var documentHeight = $(document).height();
	var windowHeight = $(window).height();
	var contentItems = $("#content").find(".item");
	var currentItem = "";
	if (scrollTop+windowHeight==documentHeight){
	currentItem= "#" + contentItems.last().attr("id");
}
else{
	contentItems.each(function (){
	var contentItem = $(this);
	var offsetTop = contentItem.offset().top;
	if (scrollTop > offsetTop - 100){
	//此处的200视具体情况自行设定，因为如果不减去一个数值，在刚好滚动到一个div的边缘时，菜单的选中状态会出错，比如，页面刚好滚动到第一个div的底部的时候，页面已经显示出第二个div，而菜单中还是第一个选项处于选中状态 currentItem = "#" + contentItem.attr("id");
}
}
);
}
if (currentItem != $("#menu").find(".current").attr("href")){
	$("#menu").find(".current").removeClass("current");
	$("#menu").find("[href=" + currentItem + "]").addClass("current");
}
}
);
}
);

CSS代码(style.css):

@charset "utf-8";*{margin:0;padding:0;}
body{font-size:12px;line-height:1.7;}
li{list-style:none;}
/* content */
#content{width:800px;margin:0 auto;padding:20px;}
#content h1{color:#0088bb;}
#content .item{padding:20px;margin-bottom:20px;border:1px dotted #0088bb;height:300px;}
#content .item h2{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 */
#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;}

附件:下载该文件资源,减少时间成本(增值服务)