js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:js代码_js特效免费下载_JS特效代码网 > 网页特效 > JS常用代码 > 导航菜单

jQuery仿左侧固定导航栏点击滑动对应页面特效代码

发布时间:2017-03-19 14:44:19    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

jQuery仿左侧固定导航栏点击滑动对应页面特效代码

jQuery仿左侧固定导航栏点击滑动对应页面特效代码

<!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" />    
<script src="js/jquery-1.7.1.min.js"></script>    
<style>    
body{ margin:0; padding:0;}    
.main{ width:100%; height:auto;}    
.main div{ width:100%;}    
#float01{ height:930px; background:#004}    
#float02{ height:900px; background:#00f}    
#float03{ height:980px; background:#0ff}    
#float04{ height:930px; background:#0ad}    
#float05{ height:960px; background:#0d0}    
#float06{ height:970px; background:#0f0}    
#float07{ height:900px; background:#dd4}    
div.floatCtro{ width:60px; height:350px; position: fixed; left:25px; top:10%; z-index:100}    
div.floatCtro p{width:60px; text-align:center; height:40px; line-height:40px; font-family:'微软雅黑'; font-size:14px; color:#676767; margin:0; padding:0; cursor:pointer; background:#fff;}    
div.floatCtro a{ display:inline-block; display:none; width:60px; height:60px; margin:10px 0 0 0; background:#fff; color:#000;  vertical-align:middle; cursor:pointer;}    
div.floatCtro a span{ display:block; width:28px; height:44px; line-height:22px;  font-family:'微软雅黑'; font-size:14px; line-height:22px; text-align:center; margin:8px 16px; _margin:-10px 0 0 16px;}    
div.floatCtro a:hover{ background:#000; color:#fff; zoom:1;}    
div.floatCtro p:hover{ background:#c40000; color:#fff;}    
div.floatCtro p.cur{ background:#c40000; color:#fff;}    
</style>    
<script>    
$(function(){    
	var AllHet = $(window).height();    
	var mainHet= $('.floatCtro').height();    
	var fixedTop = (AllHet - mainHet)/2    
	//  $('div.floatCtro').css({top:fixedTop+'px'});    
	$('div.floatCtro p').click(function(){    
			var ind = $('div.floatCtro p').index(this)+1;    
			var topVal = $('#float0'+ind).offset().top;    
			$('body,html').animate({scrollTop:topVal},1000)    
		})    
		$('div.floatCtro a').click(function(){    
			$('body,html').animate({scrollTop:0},1000)    
			})    
	$(window).scroll(scrolls)    
	scrolls()    
	function scrolls(){    
		var f1,f2,f3,f4,f5,f6,f7,bck;    
		var fixRight = $('div.floatCtro p');    
		var blackTop = $('div.floatCtro a')    
		var sTop = $(window).scrollTop();    
		fl = $('#float01').offset().top;    
		f2 = $('#float02').offset().top;    
		f3 = $('#float03').offset().top;    
		f4 = $('#float04').offset().top;    
		f5 = $('#float05').offset().top;    
		f6 = $('#float06').offset().top;    
		f7 = $('#float07').offset().top;    
		if(sTop<=f2-100){    
			blackTop.fadeOut(300).css('display','none')    
			}    
		else{    
			blackTop.fadeIn(300).css('display','block')    
			}    
		if(sTop>=fl){    
			fixRight.eq(0).addClass('cur').siblings().removeClass('cur');    
			}    
		if(sTop>=f2-100){    
			fixRight.eq(1).addClass('cur').siblings().removeClass('cur');    
			}    
		if(sTop>=f3-100){    
			fixRight.eq(2).addClass('cur').siblings().removeClass('cur');    
			}    
		if(sTop>=f4-100){    
			fixRight.eq(3).addClass('cur').siblings().removeClass('cur');    
			}    
		if(sTop>=f5-100){    
			fixRight.eq(4).addClass('cur').siblings().removeClass('cur');    
			}    
		if(sTop>=f6-100){    
			fixRight.eq(5).addClass('cur').siblings().removeClass('cur');    
			}    
		if(sTop>=f7-100){    
			fixRight.eq(6).addClass('cur').siblings().removeClass('cur');    
			}    
	}    
	})    
</script>    
<title>test</title>    
</head>    
<body>    
<div class="main">    
<div id="float01" class="cur"></div>    
<div id="float02"></div>    
<div id="float03"></div>    
<div id="float04"></div>    
<div id="float05"></div>    
<div id="float06"></div>    
<div id="float07"></div>    
<div id="float08"></div>    
<div id="float09"></div>    
<div class="floatCtro">    
<p>导航一</p>    
<p>导航二</p>    
<p>导航三</p>    
<p>导航四</p>    
<p>导航五</p>    
<p>导航六</p>    
<p>导航七</p>    
<a>    
<font style="width:60px; height:1px; display:block"></font>    
<span>返回顶部</span>    
</a>    
</div>    
</div>    
</body>    
</html>



左侧 固定 导航栏 滑动

jQuery左侧分类导航特效_jquery商城左侧分类菜单导航_橙色导航菜单特效代码

jquery顶部导航菜单下拉,左侧分类切换特效

jquery仿通用3C电商网站左侧弹出菜单导航特效

jquery网页左侧点击展开收缩垂直菜单特效

jquery仿天猫左侧导航菜单分类列表

jquery hover网页左侧鼠标悬停列表改变菜单样式特效

jquery仿马可波罗左侧商品列表导航菜单特效

jquery仿京东商城左侧商品分类导航菜单样式特效_模仿京东二级导航栏_商品分类代码

jquery实现左侧导航菜单滚动特效

蓝色网站左侧下拉菜单切换特效代码

jquery仿天猫分类导航通栏底部banner切换代码_jquery仿天猫商城左侧商品分类导航菜单样式特效_模仿天猫二级导航栏

jQuery左侧滚动图片点击大图查看特效代码

jQuery.SuperSlide仿易迅网左侧导航菜单分类特效代码

jquery实现网页左侧居中链接图片动画特效代码

jquery仿淘宝天猫商城左侧商品分类导航菜单样式特效_模仿淘宝天猫二级导航栏

jQuery仿左侧固定导航栏点击滑动对应页面特效代码

jQuery实现固定顶部导航,点触全屏滚动特效代码

jquery实现顶部固定、二级栏目之间相互滑动的导航菜单特效

jquery左右浮动导航及底部固定导航特效

jquery实现页面右侧固定按钮,点击展开带二维码的qq在线客服特效

js固定层不随滚动条滚动图片广告固定层在顶部

jQuery网页右侧固定层显示隐藏在线qq客服特效代码

js、jquery、css实现网页导航栏固定顶部的特效代码_头部导航固定特效代码_怎样固定导航?

友荐云推荐
大家说 此评论不代表本站观点