jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)


Posted in Javascript onOctober 28, 2015

本文实例讲述了jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)。分享给大家供大家参考,具体如下:

这里介绍的jQuery拉动页面固定顶部显示,及自动消失效果,可能ie浏览器下有问题,不过火狐什么的都可以运行看效果,一个简单的网页特效,也是很常用的“回到顶部”效果,有兴趣的看一下。

运行效果截图如下:

jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)

在线演示地址如下:

具体代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>回到顶部:哭泣的小丑</title>
<script src="jquery-1.6.2.min.js"></script>
<!-- CSS模板清除 -->
<style>
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend, input,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;float:left;}select, input, button,button img, label {vertical-align: middle;}body {font:normal 12px/1.5 "Microsoft Yahei","微软雅黑",Tahoma,Arial,Helvetica,STHeiti; webkit-font-smoothing:antialiased;-moz-font-smoothing: subpixel-antialiased; color:#666;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}em {font-style: normal}select, input, button, button img, label {vertical-align:middle;}input {font-family:"Microsoft Yahei","微软雅黑";webkit-font-smoothing:antialiased;-moz-font-smoothing: subpixel-antialiased}input, input:focus, button, button:focus, select,textarea, textarea:focus {outline:none; -moz-outline:none; -webkit-outline:none; }input:focus { outline:none; -moz-outline:none; -webkit-outline:none; }textarea {resize:none;}a {color:#666; text-decoration:none;} a:hover {text-decoration:underline;}a:focus {outline:none; -moz-outline:none;-webkit-outline:none;}body {min-width: 960px;}
</style>
<!-- CSS模板清除 E-->
<!-- main CSS -->
<style>
body{background:#e7e7e7;}
.clearfix:before, .clearfix:after, .container_24:before, .container_24:after {
 content: '.'; display: block; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0;}
.clearfix:after, .container_24:after { clear: both; }
.Xc_main{width:750px;margin:0 auto;position:relative;}
.Xc_left{float:left;}
.Xc_left h1{font-size:24px;padding-top:25px;}
.Xc_right{float:right;width:600px;}
.Xc_right .Xc_list{margin:10px 0 10px 0;}
.Xc_list_top,.Xc_list_main{background:#fff;padding:10px;border:1px solid #ccc;}
.Xc_list_top{margin-bottom:10px;}
.Xc_gg{width:90px;height:90px;border:1px solid #ccc;background:#fff;text-align:center;}
.Xc_bottom{height:650px;background:#fff;padding:10px;border:1px solid #ccc;position:relative;}
</style>
<!-- main CSS E-->
</head>
<script>
$(function () {
 $(".Xc_list_top").css("width",$(".Xc_list_main").width());
 var resetRightPanelPostion = function () {
 var msie6 = $.browser.msie && $.browser.version == '6.0' && $.browser.version < 7;
 if ($.browser.safari) {
  bodyelem = $("body");
 } else {
  bodyelem = $("html,body");
 }
 var bodyTop = bodyelem.scrollTop();
 var top = $(".Xc_left").offset().top;
 //var t = $("#public_footer").offset().top;
 var t = $("#footerDestinationBox").offset().top;
 //var bottom = $("#footerDestinationBox").offset().top;
  for(var i = 0 ; i < $(".Xc_list .Xc_list_top").length ; i++){
   if (bodyTop >= top && ((bodyTop + $(".Xc_left").outerHeight()) < t)) {
    if (!msie6) {
     if (bodyTop + $(".Xc_gg").outerHeight() >= t) {
      $(".Xc_gg").removeClass('fixed').css({
       "position": "absolute",
       "top": t - $(".Xc_gg").outerHeight() + "px"
      });
     } else {
      $(".Xc_gg").css({
       "position": "fixed",
       "top": 0
      });
     }
    }
   } else {
    if (!msie6) {
     $(".Xc_gg").css({
      "position": "static"
     });
    }
   }
   if(bodyTop>$(".Xc_list").eq(i).offset().top){
    $(".Xc_list_top").eq(i).css({position:"absolute",top:top-168});
   }
   if(bodyTop>$(".Xc_list").eq(i).offset().top){
    $(".Xc_list_top").eq(i).css({position:"fixed",top:0});
   }
   if(bodyTop<=$(".Xc_list").eq(i).offset().top){
    $(".Xc_list_top").eq(i).css({position:"static",top:0});
   }
  }
 };
 window.onload = function () {
 if ($(".Xc_gg").length) {
  resetRightPanelPostion();
  $(window).scroll(function () {
  resetRightPanelPostion();
  });
 }
 }
})
</script>
<body>
<div class="Xc_main clearfix">
 <div class="clearfix" style="margin-top:90px;float:left;">
 <div class="Xc_left">
  <div class="Xc_gg">
  <h1>小丑</h1>
  <div style="margin-top:40px;">Q群:<em style="color:#0069D6;">150508281</em></div>
  </div>
 </div>
 </div>
 <div class="Xc_right clearfix">
  <div class="Xc_list">
  <div class="Xc_list_top" id="Xc_list_top">top 1</div>
  <div class="Xc_list_main" style="height:300px;background:#fff;">
  </div>
 </div>
 <div class="Xc_list">
  <div class="Xc_list_top">top 2</div>
  <div class="Xc_list_main" style="height:300px;background:#fff;">
  </div>
 </div>
 <div class="Xc_list">
  <div class="Xc_list_top">top 3</div>
  <div class="Xc_list_main" style="height:300px;background:#fff;">
  </div>
 </div>
 <div class="Xc_list">
  <div class="Xc_list_top">top 4</div>
  <div class="Xc_list_main" style="height:300px;background:#fff;">
  </div>
 </div>
 <div class="Xc_list">
  <div class="Xc_list_top">top 5</div>
  <div class="Xc_list_main" style="height:300px;background:#fff;">
  </div>
 </div>
 <div class="Xc_list">
  <div class="Xc_list_top">top 6</div>
  <div class="Xc_list_main" style="height:300px;background:#fff;">
  </div>
 </div>
 </div>
</div>
<div class="Xc_bottom clearfix" id="footerDestinationBox">
 <div style="position:absolute;top:40px;right:50px;"> by 蓝色理想 @哭泣的小丑</div>
</div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery :nth-child前有无空格的区别分析
Jul 11 Javascript
22点关于jquery性能优化的建议
May 28 Javascript
node.js实现逐行读取文件内容的代码
Jun 27 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 Javascript
ES6概念 Symbol toString()方法
Dec 25 Javascript
jQuery实现一个简单的验证码功能
Jun 26 jQuery
Bootstrap实现翻页效果
Nov 27 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
JS实现普通轮播图特效
Jan 01 Javascript
全面解析Vue中的$nextTick
Dec 24 Vue.js
javascript拖曳互换div的位置实现示例
Jun 28 Javascript
jquery实现的动态回到顶部特效代码
Oct 28 #Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 #Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 #Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 #Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
Oct 27 #Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 #Javascript
jquery实现的V字形显示效果代码
Oct 27 #Javascript
You might like
PHPShop存在多个安全漏洞
2006/10/09 PHP
php miniBB中文乱码问题解决方法
2008/11/25 PHP
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
jquery 图片缩放拖动的简单实例
2014/01/08 Javascript
为指定的元素添加遮罩层的示例代码
2014/01/15 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
Javascript 计算字符串在localStorage中所占字节数
2015/10/21 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
js运动事件函数详解
2016/10/21 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
在小程序中使用canvas的方法示例
2018/09/17 Javascript
NodeJs 模仿SIP话机注册的方法
2019/06/21 NodeJs
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
python使用标准库根据进程名如何获取进程的pid详解
2017/10/31 Python
Python编程实现使用线性回归预测数据
2017/12/07 Python
Sublime开发python程序的示例代码
2018/01/24 Python
python调用摄像头显示图像的实例
2018/08/03 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
美国购车网站:TrueCar
2016/10/19 全球购物
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
介绍一下结构化程序设计方法和面向对象程序设计方法的区别
2012/06/27 面试题
控制工程专业个人求职信
2013/09/25 职场文书
工商企业管理实习自我鉴定
2013/12/04 职场文书
治庸问责心得体会
2014/09/12 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
编写python程序的90条建议
2021/04/14 Python
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android