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

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

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

运行效果截图如下:

在线演示地址如下:

http://demo.jb51.net/js/2015/jquery-fix-top-cha-show-codes/

具体代码如下:

<!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程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, 固定顶部
滑动页面
jquery滑动到顶部、jquery 滑动顶部固定、jquery 顶部滑动菜单、jquery 返回顶部滑动、jquery 滑动消失,以便于您获取更多的相关知识。

时间: 2024-10-26 18:17:02

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

editplus引入jquery ui custom页面调试总是报错,显示无法找到jquery

问题描述 editplus引入jquery ui custom页面调试总是报错,显示无法找到jquery editplus引入jquery ui custom页面调试总是报错,显示无法找到jquery,是什么问题 解决方案 你引入了jquery.js库嘛,引入的版本是不是太低或是太高了,要检查确认一下 解决方案二: 你引入jQuery的路径有没有写错? src="jquery-1.x.x.js" 解决方案三: 检查一下页面引入的Jquery路径. 解决方案四: 浏览器报的错误还是编辑器

CSS3和jQuery实现花瓣网固定顶部位置悬浮菜单效果

花瓣网以前的菜单效果还不错,首先是展示出全部的菜单,然后当你向下滑动网页的时候,菜单自动吸顶固定悬浮在浏览器的顶部,这个用户也能很好的切换不同的分类,查看更多的内容,而对于网站来说,也提升了不少的用户体验和交互性. 制作方法 本文将来为大家简单的介绍一下如何制作出这样的效果. HTML代码 首先我们编写一些基本的HTML代码,分别给网站的LOGO定义一个#header类,给菜单定义.nav类. <div id="header"><h1>花瓣</h1>

html-HTML中table实现相应式导航,第一列固定,其余列根据页面宽度,出现滚动条来显示。

问题描述 HTML中table实现相应式导航,第一列固定,其余列根据页面宽度,出现滚动条来显示. 效果图如上所示,来自文章http://isux.tencent.com/responsive-web-design.html ,在文章中讲到的第三种方法,实现的方法其实有写, thead {float:left;} tbody {display:block;width:auto;overflow-x:auto;} 但是,在尝试这种方法时,总是会出现问题,thead跟tbody在页面变窄时,会错位,并

代码-我用viewpager实现了一个可无限滑动的广告栏,为什么在跳转别的页面回来后第一张总是显示不出来

问题描述 我用viewpager实现了一个可无限滑动的广告栏,为什么在跳转别的页面回来后第一张总是显示不出来 小弟是新手,在网上学习各位大神们的滚动代码后实现了一个. 但是viewpager所在的A activity 跳到别的B activity,B activity finish 以后返回A activity 第一张图片总是显示不出来... 求指点 解决方案 http://blog.csdn.net/taoolee/article/details/48270143参考一下把

jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单_jquery

本文实例讲述了jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

网页教程:页面返回顶部锚点按钮的设计

对于版面较长的网页,在底部会放上返回顶部的锚点链接,做法也很简单,直接用HTML就能实现,不过这种效果不交呆板,原因就是向上移动很突然,经常会让用户产生莫名的感觉,本文结合JS将实现一种滑动返回顶部的网页效果,这样用户感觉会比较舒服. 'TOP'置顶链接,说的通俗一点就是'返回顶部的链接','go to top '一般都放在页面的底部,它可以快速返回页面顶部,以节省用户浏览页面的时间. 它主要的应用场景是当你有一个很长的网页内容时,您通常要 把 'TOP'锚点链接 添加在页面底部,只要用户一点击

使用jQuery创建人性化的返回顶部链接

之前写过关于创建人性化的返回顶部链接的文章,讨论了返回顶部链接需要具备哪些特点才能称得上人性化.一直以来我都觉得停留在视觉区域内的返回顶部连接更为完美一些,但由于对 javascript不熟悉,所以一直不知道如何在技术上实现,只能使用别人做好的javascript代码.最近一段时间学习了jQuery,发现其实用jQuery来写的话很简单,所以在这片文章里我会介绍一下如何自己动手创建简单而且很酷的返回顶部链接效果,让我们开始. jQuery返回顶部(查看示例) 一.HTML(基本结构)   <bo

jQuery实现智能判断固定导航条或侧边栏的方法_jquery

本文实例讲述了jQuery实现智能判断固定导航条或侧边栏的方法.分享给大家供大家参考,具体如下: 这是一个jQuery智能判断固定DIV层的特效代码,通过这个jQuery智能代码,你可以设置导航栏.侧边栏.任何DIV层的固定显示:现在蓝叶的站就用的这个jQuery智能判断固定的导航条,要看演示的就请下拉页面滚动条,就会看到导航条固定了:使用这个代码需要在页面里引用jQuery库的JS文件,现在的网站一般都引用了jQuery库代码,如果没有那就打开你网站的模板,在页头或者页位加上<script s

Android仿淘宝view滑动至屏幕顶部会一直停留在顶部的位置_Android

在刚刚完成的项目中,在一个页面中,用户体验师提出引用户操作的入住按钮要一直保留在页面当中,不管页面能滚动多长都得停留在页面的可视区域.最终实现效果如下图所示:   如图中的红色框中的view始终会停留在页面中,如果滑动至页面的顶部,会一直保留在顶部. 下面来说下具体的实现思路: 思路:其实整个页面当中一共有两个视觉效果一样的View,通过滑动的位置来进行View的隐藏和显示来达到这种效果.整个页面的在上下滑动的过程中可以总结为两个状态,状态A(如图1所示),view2在可视区域内时,view1不