<!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>
分享到：
相关推荐
这种布局技术在现代网页设计中非常实用，因为它能提供良好的用户体验，让用户在浏览长内容时仍然能够轻松访问侧边栏中的链接或功能。 首先，我们要理解浮动（Float）的概念。在CSS中，浮动是一种布局机制，允许元素...
在网页设计中，"导航栏滚动到顶部后固定"是一种常见的用户体验优化技术，它被称为Fixed Navigation或Sticky Navbar。这种设计使得用户在浏览长页面时，无论页面如何滚动，导航栏始终保持在屏幕顶部，便于用户随时...
在这个模板中，CSS将被用来实现左侧固定栏的效果，使其在滚动页面时始终保持可见。全屏自适应设计意味着CSS将包含媒体查询（Media Queries），允许页面根据用户的设备和屏幕尺寸自动调整布局。此外，CSS还将处理颜色...
从window10开始，微软把将程序快捷方式图标固定到任务栏的权利交给用户，所以不再提供API来直接设置固定任务栏图标。下面一句代码： ShellExecute(NULL, "taskbarpin", "C:\....\你的程序.lnk", NULL, NULL, 0); 在...
在Windows操作系统中，将程序固定在任务栏或开始菜单可以帮助用户快速访问常用的应用程序，提高工作效率。本篇文章将详细讲解如何使用易语言实现这个功能，以及在不同Windows版本中的操作差异。 首先，我们需要理解...
2. **左侧固定栏**：在网页滚动时，左侧栏保持固定，方便用户随时访问导航链接或功能，提高网站的可用性和导航效率。 3. **摄影商务主题**：模板专门针对摄影和商务领域，意味着它将包含适合这些行业的特定元素，如...
本章节通过使用html中的div布局，完成静态页面的制作，然后结合css3中的fixet固定位置属性来固定导航栏部分，最后利用window.onscroll来获取滑动的距离来确定导航栏固定的位置，这些距离是调用scroll函数中的...
下滑固定导航栏插件Scroll是一种常见的网页交互设计技术，它主要应用于网站的用户界面，以提升用户的浏览体验。当用户滚动页面时，导航栏会在页面的某个特定位置（通常是到达顶部或设定位置）自动变为固定状态，使得...
全屏漂亮左栏固定摄影商务网站模板.zip”表明这是一个用于创建全屏、美观且具有左侧固定栏的摄影或商务类网站的设计模板。这种模板通常包括预设计的页面布局、色彩方案、图像处理以及交互元素，以帮助用户快速构建一...
在具体应用“左固定右边自适应框架”时，开发者通常会使用CSS的position属性来定位左侧固定栏，设置为fixed，然后用width设定固定宽度。右侧栏则使用相对布局（relative）或Flexbox或Grid Layout，让其宽度自动填充...
在`FixedTabScrollView`中，`ViewPager`被用来展示多个内容页，而顶部的固定栏则是在用户滚动时保持可见的关键部分。 这个项目的核心在于自动吸附（或者说是“顶吸”）功能。当用户滚动`ViewPager`内容时，顶部的...
传统套路是使用两个一模一样的固定栏，外层用帧布局（FrameLayout）包裹，然后把外层的固定栏先隐藏，当内层的固定栏滑动到外层固定栏位置的时候，把内层固定栏隐藏，外层的固定栏显示，反之滑回来的时候把外层固定...
本篇将详细介绍如何使用jQuery实现一个固定导航栏的功能。 首先，我们要理解“固定定位”（fixed positioning）的概念。在CSS中，当一个元素的position属性设置为"fixed"时，该元素会脱离常规文档流，相对于浏览器...
在Android应用开发中，创建一个类似微博详情页的滑动固定顶部栏效果是一项常见的需求，它能提升用户体验，使得用户在浏览长内容时仍能快速访问顶部信息。这个压缩包"Android仿微博详情页滑动固定顶部栏效果.zip"包含...
在网页设计中，"状态栏固定信息"通常指的是在浏览器的状态栏上显示一条固定不变的消息或提示，即使用户滚动页面，这条信息也会始终保持可见。这种效果可以用于显示网站的版权信息、提示用户的功能说明或是其他重要的...
通常，我们会有一个包含左右两个子元素的父容器，左侧子元素是固定栏，右侧是可滚动的内容区域。CSS中，我们可以将左侧元素设置为`position: fixed`，使其在页面滚动时始终保持在屏幕的一侧。但是，当页面滚动到特定...
在C# WinForm应用开发中，常常需要创建用户友好的界面，这可能涉及到将功能按钮固定到菜单栏或实现右键菜单。以下是一些关键知识点，涵盖了如何在C# WinForm环境中实现这样的功能： 1. **菜单栏创建**：在WinForm...
- 上槛和下槛有不同形式，用于起点、终点和中间位置，具有卡槽固定栏片。 - 栏片高度为1495mm，间隙120mm，通过上下槛卡槽固定。 - 柱帽用于立柱顶部连接，预留螺栓孔。 2. **现场安装流程**： - 安装流程包括...
在构建现代网页时，设计...它提供了直观的用户界面，左侧固定栏始终保持可见，右侧内容区域随滚动而变化，适合那些希望突出侧边导航功能的网站。通过深入理解和定制这些技术，开发者能够创建出既美观又实用的现代网页。
这样的设计通常由一个位于屏幕底部的固定栏构成，包含若干个图标或文字标签，每个代表一个不同的功能模块。在本教程中，我们将深入探讨如何实现一个`Fragment`底部导航栏，特别适合初学者参考。 首先，我们要理解`...