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 相关文章推荐
有一段有意思的代码-javascript现实多行信息
Aug 26 Javascript
jQuery timers计时器简单应用说明
Oct 28 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
jQuery简易图片放大特效示例代码
Jun 09 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
触屏中的JavaScript事件分析
Feb 06 Javascript
bootstrap模态框示例代码分享
May 17 Javascript
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
微信小程序实现星级评价
Nov 20 Javascript
JS实现移动端双指缩放和旋转方法
Dec 13 Javascript
JavaScript JSON使用原理及注意事项
Jul 30 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
PHP解析RSS的方法
2015/03/05 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
64位windows系统下安装Memcache缓存
2015/12/06 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
URL地址中的#符号使用说明
2011/02/12 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
2013/06/08 Javascript
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
vue实现拖拽效果
2019/12/23 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
详细讲解Python中的文件I/O操作
2015/05/24 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
python代数式括号有效性检验示例代码
2020/10/04 Python
HTML5 Web 存储详解
2016/09/16 HTML / CSS
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
2013/01/30 HTML / CSS
美国羊皮公司:Overland
2018/01/15 全球购物
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
药学专业学生的自我评价分享
2014/02/06 职场文书
讲座主持词
2014/03/20 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
大学考试作弊检讨书
2015/05/06 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python
nginx容器方式反向代理实战
2022/04/18 Servers