jquery float浮动菜单当页面滚动一点高度时出现浮动菜单



136 541 181



特效描述:浮动菜单 页面滚动,

代码结构

1. 引入CSS

<link href="css/style.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>

3. HTML代码

<div style="width:990px;height:6000px;margin:0 auto;text-align:center;background:#EEE;"><br />
  <p>使用方法:</p>
  <p>1、将index.html中的代码粘贴到要显示的页面</p>
  <p>2、加载CSS、JS文件</p>
  <p>3、修改图片为自己的图片</p>
  <p>4、右侧导航的锚点跳转,请根据自己网页的实际情况修改</p>
</div>
<div class="left_nav" id="left_nav">
	<a href="http://www.17sucai.com/" target="_blank" style="height:117px"></a>
	<a href="http://www.17sucai.com/" target="_blank" style="height:116px"></a>
	<a href="http://www.17sucai.com/" target="_blank" style="height:68px"></a>
	<a href="http://www.17sucai.com/" target="_blank" style="height:68px"></a>
	<a href="http://www.17sucai.com/" target="_blank" style="height:68px"></a>
	<a href="http://www.17sucai.com/" target="_blank" style="height:68px"></a>
</div>
<div class="float" id="float">
	<a href="#1" class="an_1">导航1</a>
	<a href="#2" class="an_2">导航2</a>
	<a href="#3" class="an_3">导航3</a>
	<a href="#4" class="an_4">导航4</a>
	<a href="#5" class="an_5">导航5</a>
	<a href="#6" class="an_6">导航6</a>
	<a href="#7" class="an_7">导航7</a>
	<a href="#8" class="an_8">导航8</a>
	<a href="#9" class="an_9">导航9</a>
	<a href="#10" class="an_10">导航10</a>
	<a href="#11" class="an_11">导航11</a>
	<a href="#top" class="an_12">导航12</a>
</div>
<div class="act_nav">
	<div class="event_content">
		<a href="http://www.17sucai.com/" target="_blank" title="返回主页" style="width:152px;">返回主页</a>
		<a href="http://www.17sucai.com/" target="_blank" title="手机" style="width:105px;">手机</a>
		<a href="http://www.17sucai.com/" target="_blank" title="数码" style="width:103px;">数码</a>
		<a href="http://www.17sucai.com/" target="_blank" title="电脑" style="width:118px;">电脑</a>
		<a href="http://www.17sucai.com/" target="_blank" title="家电" style="width:111px;">大家电</a>
		<a href="http://www.17sucai.com/" target="_blank" title="家电" style="width:107px;">小家电</a>
		<a href="http://www.17sucai.com/" target="_blank" title="百货" style="width:103px;">百货</a>
		<p>
			<a href="http://www.17sucai.com/" target="_blank" title="旅游">旅游专场</a>
			<a href="http://www.17sucai.com/" target="_blank" title="送礼">送礼专场</a>
			<a href="http://www.17sucai.com/" target="_blank" title="会员">游戏专场</a>
			<a href="http://www.17sucai.com/" target="_blank" title="新人">新人专场</a>
			<a href="http://www.17sucai.com/" target="_blank" title="无线">无线专场</a>
			<a href="http://www.17sucai.com/" target="_blank" title="会员">QQ会员</a>
		</p>
	</div>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 浮动 悬浮 悬浮层 悬浮框 浮动层 浮动框 浮动插件 悬浮插件 滑动星星打分 浮动提示框 其他 浮动菜单 浮动导航 二维码 图片广告

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到