<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>固定栏</title>
<script src="js/jquery_1.9.js"></script>
<style>
* {
text-decoration: none;
}
.fiexd-bar {
position: fixed;
top: 400px;
right: 20px;
width: 40px;
height:164px;
background-color: #f9f9f9;
}
.fiexd-bar ul{
margin-top: 0;
}
.fiexd-bar img {
float: right;
width: 20px;
height: 20px;
margin: 10px 10px 0 0;
border: none;
}
.fiexd-bar ul li {
display: block;
float: right;
width: 39px;
height: 40px;
border: 1px solid #008F24;
border-bottom: none;
/*text-decoration: none;*/
}
.spacing {
margin-top: 10px;
background-color: #f9f9f9;
}
/*优田快讯*/
.notice {
position: absolute;
right: 41px;
top: 0;
border: 1px solid #008F24;
color: black;
height:163px;
width: 240px;
border-right: none;
background-color:#008f24;
display: none;
}
.QQ{
position: absolute;
right: 41px;
background-color:#fff;
width: 60px;
top:0;
border: 1px solid #008F24;
background-color:#008f24;
font-size: 12px;
color:#fff;
border-right: none;
line-height: 40px;
text-align: center;
height:40px;
display: none;
}
.mall {
position: absolute;
right: 41px;
background-color:#fff;
background-color:#008f24;
width: 60px;
top:41px;
color:#fff;
border: 1px solid #008F24;
border-right: none;
font-size: 12px;
line-height: 40px;
text-align: center;
height:40px;
display: none;
}
.cart {
position: absolute;
right: 41px;
background-color:#fff;
width: 60px;
border: 1px solid #008F24;
background-color:#008f24;
border-right: none;
top:82px;
font-size: 12px;
color:#fff;
line-height: 40px;
text-align: center;
height:40px;
display: none;
}
.notice ul li {
font: 12px 'Microsoft YaHei', '微软雅黑';
float: right;
display: block;
width: 230px;
height:30px;
line-height: 40px;
text-align: left;
border: none;
}
.notice img {
float: left;
}
/*.fiexd-bar .notice ul li a {*/
/*color: #fff;*/
/*}*/
.notice #sl_menu li a:hover{background: #fbdf09 ; color:black;}
</style>
</head>
<body>
<div class="fiexd-bar">
<ul>
<li class="QQService">
<a href="http://shang.qq.com/open_webaio.html?" target="_blank"><img src="img/qq.png" title="QQ客服"/></a>
<div class="QQ">
<span>QQ客服</span>
</div>
</li>
<li class="shoppingMall">
<a href="http://www.youtian.cn/main.php" target="_blank"><img src="img/mall.png" title="我的商城"/></a>
<div class="mall">
<span>我的商城</span>
</div>
</li>
<li class="shoppingCart">
<a href="http://www.youtian.cn/main.php" target="_blank"><img src="img/shopping-cart.png" title="购物车"/></a>
<div class="cart">
<span>购物车</span>
</div>
</li>
<li style="border-bottom: 1px solid #008F24" class="According">
<a href="javascript:">
<img src="img/alerts.png" title="优田快讯"/>
</a>
<div class="notice">
<ul id="sl_menu">
<li><a href="http://www.youtian.cn/announcement-detail-29.html" target="_blank"
title="优田网各地区服务中心活动集锦" ><img src="img/list.png"/>优田网各地区服务中心活动集锦</a></li>
<li><a href="http://www.youtian.cn/announcement-detail-27.html" target="_blank"
title="黑龙江省出台2015年农机购置补贴实施方案" ><img src="img/list.png"/>黑龙江省出台2015年农机购置补贴</a></li>
<li><a href="http://www.youtian.cn/announcement-detail-26.html" target="_blank"
title="优田网感恩回馈新老客户—邀请农民朋友不花一分钱体验农资网购！！！优田网免费送化肥啦！！！"><img src="img/list.png"/>优田网感恩回馈新老客户—邀请农</a></li>
<li><a href="http://www.youtian.cn/announcement-detail-25.html" target="_blank" title="复合肥的优势" ><img src="img/list.png"/>复合肥的优势</a>
</li>
<li><a href="http://www.youtian.cn/announcement-detail-24.html" target="_blank"
title="国粮种业宾玉5玉米种子厂家价格调整"><img src="img/list.png"/>国粮种业宾玉5玉米种子厂家价格</a></li>
</ul>
</div>
</li>
<li style="border-bottom: 1px solid #008F24" class="spacing">
<a href="javascript:scroll(0,0)">
<img src="img/top.png" title="返回顶部"/>
</a>
</li>
</ul>
</div>
<script>
//固定栏的悬浮效果
//优田快讯
$(".According").mouseover(function () {
$(".notice").show(500);
}).mouseleave(function () {
$(".notice").hide(500);
});
$(".notice").mouseleave(function () {
$(".notice").hide(500);
});
// 我的商城
$(".shoppingMall").mouseover(function () {
$(".mall").show(500);
}).mouseleave(function (){
$(".mall").hide(500);
});
$(".mall").mouseleave(function () {
$(".mall").hide(500);
});
// qq
$(".shoppingCart").mouseover(function () {
$(".cart").show(500);
}).mouseleave(function () {
$(".cart").hide(500);
});
$(".cart").mouseleave(function () {
$(".cart").hide(500);
});
//
$(".QQService").mouseover(function () {
$(".QQ").show(500);
}).mouseleave(function () {
$(".QQ").hide(500);
});
$(".QQ").mouseleave(function () {
$(".QQ").hide(500);
});
$(" ul li").click(function(){
$(this).addClass("color");
});
$(".notice #sl_menu li a").hover(
function(){$(this).css("color","#fff");},
function(){$(this).css({"color":"#fff"});}
);
//动态返回顶部框
$(function(){
$(window).scroll(function(){ //只要窗口滚动,就触发下面代码
var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度
if( scrollt >400 ){ //判断滚动后高度超过200px,就显示
$(".spacing").fadeIn(300); //淡出
}else{
$(".spacing").stop().fadeOut(300); //如果返回或者没有超过,就淡入.必须加上stop()停止之前动画,否则会出现闪动
}
});
$("#回到顶部").click(function(){ //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部
$("html,body").animate({scrollTop:"0px"},500);
});
});
</script>
</body>
</html>
分享到：
相关推荐
HTML侧边浮动栏，已经有了基本的样式，直接放入代码即可
从window10开始，微软把将程序快捷方式图标固定到任务栏的权利交给用户，所以不再提供API来直接设置固定任务栏图标。下面一句代码： ShellExecute(NULL, "taskbarpin", "C:\....\你的程序.lnk", NULL, NULL, 0); 在...
本章节通过使用html中的div布局，完成静态页面的制作，然后结合css3中的fixet固定位置属性来固定导航栏部分，最后利用window.onscroll来获取滑动的距离来确定导航栏固定的位置，这些距离是调用scroll函数中的...
导航栏滚动到页面顶部后，固定，并处于所有的页面元素上方，浮动显示。
下滑固定导航栏插件Scroll是一款下滑固定导航栏Scroll down fixed，它可以让你任意选择初始固定导航的位置，而不是始终都固定在页面的顶部位置。
状态栏固定信息.rar状态栏固定信息.rar状态栏固定信息.rar状态栏固定信息.rar状态栏固定信息.rar状态栏固定信息.rar
前端 ， jQuery——固定导航栏 ， 若窗口被卷上去的高度大于等于顶部top的高度时 让导航栏变成固定定位，定位到距离顶部为0的位置
C# winform 实现按钮固定到菜单栏以及右键菜单
Android仿微博详情页滑动固定顶部栏效果
win7/8可以固定和接触固定，win10未测试，据说只能解除固定，固定的话需要其他操作。 全家桶最喜欢的操作之一~但是顺序还是不能指定，只能添加在最后一个。 @发Q。
手机移动端固定在顶部的导航栏代码，支持iOS，Android（暂不支持WP）等系统以webkit为内核的浏览器，建议在PC端使用以webkit为内核的浏览器（如：Google Chrome）中缩小浏览器窗口宽度查看效果,PC端查看效果需要用...
jquery天猫商城商品分类顶部浮动固定层菜单栏 jquery天猫商城商品分类顶部浮动固定层菜单栏 jquery天猫商城商品分类顶部浮动固定层菜单栏 jquery天猫商城商品分类顶部浮动固定层菜单栏
左侧固定单栏html5模板是一款适合施工单位网站模板下载。
前言 最近项目中遇到一个需求，类似微博详情页的效果，通过查找相关的资料终于找了对应的解决方案，分享出来供大家参考学习，下面...写两个一模一样的固定栏，外层用帧布局（FrameLayout）包裹，然后把外层的固定栏先隐
主要介绍了JS实现自动固定顶部的悬浮菜单栏效果,涉及JavaScript针对[removed]事件的响应及页面样式动态变换的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
一个好看的固定搜索栏效果.rar,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
状态栏固定信息.rar状态栏固定信息.rar状态栏固定信息.rar状态栏固定信息.rar状态栏固定信息.rar状态栏固定信息.rar
插件描述：下拉网页时可使导航栏固定在网页顶端. 参考示例：http://www.jq22.com/jquery-info5130
Win10 系统如何把任意文件夹固定到任务栏 Win10 系统中，固定文件夹到任务栏是一项非常实用的功能，可以让用户快速访问常用的文件夹。但是，很多用户不知道如何固定任意文件夹到任务栏，今天我们就来解决这个问题。...
Windows 10 系统如何固定文件夹到任务栏 Windows 10 操作系统中，固定文件夹到任务栏可以提高工作效率和用户体验。下面是实现该功能的详细步骤和相关知识点： 一、固定文件夹到任务栏的步骤 1. 创建文件夹：首先...