jQuery实现浮动层随浏览器滚动条滚动的方法_jquery

本文实例讲述了jQuery实现浮动层随浏览器滚动条滚动的方法。分享给大家供大家参考。具体如下:

这是jQuery实现的一个浮动层效果,随浏览器滚动条而滚动,并一直保持在顶部位置,请使用火狐测试,IE下表现不尽理想。

运行效果截图如下:

在线演示地址如下:

http://demo.jb51.net/js/2015/jquery-float-follow-nav-style-codes/

具体代码如下:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery浮动层随浏览器滚动条滚动</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
if ($.browser.version != "6.0") {
 $(window).scroll(function(){
  if($(this).scrollTop()>118 &&(($(document).height()-$(this).scrollTop())>($(window).height()+$(".aysw-footer").innerHeight()))){
   $("#c_left").css({position: 'fixed', top: '2px'});
  }else{
   if(($(document).height()-$(this).scrollTop())<=($(window).height()+$(".aysw-footer").innerHeight())){
    $("#c_left").css({position: 'absolute', top:($(".aysw-footer").offset().top-$("#c_left").innerHeight()-$(".page-home").offset().top-20) +'px'});
   }else{
    $("#c_left").css({position: 'absolute', top: '2px'});
   }
  }
 });
}
</script>
</head>
<body style="height:auto; margin:0; padding:0">
<div style="height:118px;background:#6CF;">sadfsadfasfsafd</div>
<div class="page-home" style="min-height:1500px;width:100%; background-color:#FFC; position:relative">
 <div id="c_left" style="border:1px solid red; width:200px ;height:800px; color:white;background-color:#333; position:absolute; top:2px">
 羞涩的浮动层...
 </div>
</div>
<div class="aysw-footer" style="height:200px; width:100%; background-color:#0C3; position:relative"></div>
</body>
</html>

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, 浏览器
, 滚动
浮动层
jquery 浏览器滚动条、浮动div跟随滚动条、随滚动条浮动定位菜单、滚动条浮动、右侧随滚动条浮动导航,以便于您获取更多的相关知识。

时间: 2016-09-22

jQuery实现浮动层随浏览器滚动条滚动的方法_jquery的相关文章

jQuery实现DIV层淡入淡出拖动特效的方法_jquery

本文实例讲述了jQuery实现DIV层淡入淡出拖动特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>jQuery实现DIV层淡入淡出的拖动效果)</title> <style type="text/css"> #div2 {     position:absolute;     width:400px;     height:300px;     border

使用jQuery判断浏览器滚动条位置的方法_jquery

项目背景 webtouch(webapp)页面,防苹果手机safari浏览器,网上滑动,底部导航消失,滑动到底部又出现.向下滑动,底部导航出现. 遇到问题 1.我一开始用swipeup和swipedown来做,发现因为有滚动条,不会触发.因此只能判断滚动条是上滚下滚等.关于手机手势,后面的文章会介绍,欢迎关注! 2.通过上滚下滚来让底部导航显示或者因此,安卓上面的浏览器都可以,但是苹果safari会一闪一闪,原因是苹果safari自动有个弹跳效果,导致事件重复执行,解决办法是给上滚下滚一个距离,

jquery.uploadify插件在chrome浏览器频繁崩溃解决方法_jquery

jquery.uploadify插件在chrome浏览器频繁崩溃问题,一直困扰了好久,网上很多人说是由于chrome缓存的原因,插件初始化时,需要引用js,而chrome的缓存导致没有没有请求到jquery.uploadify-3.1_min.js,所以引起崩溃,可以在引用js时,加入随机数:<script type="text/javascript" src="/js/jquery.uploadify-3.1_min.js?ver=<?php echo rand

jquery 智能浮动层定位解决方法

当页面滚动,智能浮动层开始要淡出浏览器窗口的时候,其浮动于浏览器窗口的最上沿显示.这种效果在国内各大网站屡见不鲜,比如新浪微博.淘宝网等. 实现原理: 默认状态就是默认状态,什么事情也不用做,定位是absolute也好,static也好,都ok.关键是当浏览器滚动的时候,对象(要浮动的层)要移除浏览器界面视区的时候,修改其position属性,让其浮动在窗口的上沿显示就可以了.最好的position属性就是fixed了,可以在IE6+和其他浏览器下浮动层平滑固定定位,由于IE6前辈不支持fixe

javascript-js如何判断浏览器滚动条滚动到了底部?

问题描述 js如何判断浏览器滚动条滚动到了底部? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, user-scalable=no"> </head> <b

jquery.uploadify插件在chrome浏览器频繁崩溃解决方法

 这篇文章主要介绍了jquery.uploadify插件在chrome浏览器频繁崩溃解决方法,十分的实用,遇到相同问题,需要解决的朋友可以参考下     jquery.uploadify插件在chrome浏览器频繁崩溃问题,一直困扰了好久,网上很多人说是由于chrome缓存的原因,插件初始化时,需要引用js,而chrome的缓存导致没有没有请求到jquery.uploadify-3.1_min.js,所以引起崩溃,可以在引用js时,加入随机数:<script type="text/java

jQuery实现DIV层淡入淡出拖动特效的方法

这篇文章主要介绍了jQuery实现DIV层淡入淡出拖动特效的方法,涉及jQuery针对鼠标操作的常用技巧,非常具有实用价值,需要的朋友可以参考下     本文实例讲述了jQuery实现DIV层淡入淡出拖动特效的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <html> <head> <title>jQuery实现DIV层淡入淡出的拖动效果)</title> <style type="text/css"> #d

jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法_jquery

本文实例讲述了jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法.分享给大家供大家参考.具体如下: 本效果可实现左上角Logo的置顶但不滚动,而文字也就是网页主体区滚动,当用户拖动滚动条的时候可看到此效果,例子挺简单. 先看一下运行效果截图: 具体代码如下: <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&qu

jQuery实现渐变弹出层和弹出菜单的方法_jquery

本文实例讲述了jQuery实现渐变弹出层和弹出菜单的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/xh