脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery浮动层随浏览器滚动条滚动

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

 更新时间：2015年09月22日 15:02:14   作者：企鹅  
这篇文章主要介绍了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/$ is not defined报错的几种解决方法

    jQuery/$ is not defined报错的几种解决方法

    jQuery最常见的错误之一是$ is not defined错误,本文主要介绍了jQuery/$ is not defined报错的几种解决方法,具有一定的参考价值,感兴趣的可以了解一下
    2024-02-02
  • jquery.validate使用时遇到的问题

    jquery.validate使用时遇到的问题

    这篇文章主要介绍了jquery.validate使用时遇到的问题的解决方法的汇总，真是应了那句老话，会者不难难者不会，这里记录一下，有需要的小伙伴可以参考下。
    2015-05-05
  • js实现仿京东2级菜单效果(带延时功能)

    js实现仿京东2级菜单效果(带延时功能)

    这篇文章主要介绍了js实现仿京东2级菜单效果,涉及jquery鼠标事件动态操作页面元素属性及延时显示的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • JQUBAR1.1 jQuery 柱状图插件发布

    JQUBAR1.1 jQuery 柱状图插件发布

    在博客园发布了柱状图JQUBar1.0 jQuery 插件。现将该插件升级为1.1版本。
    2010-11-11
  • jquery scroll()区分横向纵向滚动条的方法

    jquery scroll()区分横向纵向滚动条的方法

    这篇文章主要介绍了使用jquery scroll()方法区分浏览器横向和纵向滚动条的方法,需要的朋友可以参考下
    2014-04-04
  • 开发中可能会用到的jQuery小技巧

    开发中可能会用到的jQuery小技巧

    这篇文章主要介绍了开发中可能会用到的几个jQuery小提示和技巧,需要的朋友可以参考下
    2014-03-03
  • jQuery实现聊天对话框

    jQuery实现聊天对话框

    这篇文章主要为大家详细介绍了jQuery实现聊天对话框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-02-02
  • jQuery实现页面下拉100像素出现悬浮窗口的方法

    jQuery实现页面下拉100像素出现悬浮窗口的方法

    这篇文章主要介绍了jQuery实现页面下拉100像素出现悬浮窗口的方法,涉及jQuery事件监听及针对页面元素的判定与动态操作技巧,需要的朋友可以参考下
    2016-09-09
  • jquery使用echarts实现有向图可视化功能示例

    jquery使用echarts实现有向图可视化功能示例

    这篇文章主要介绍了jquery使用echarts实现有向图可视化功能,结合完整实例形式分析了jquery的echarts.js插件实现有向图可视化相关实现技巧与操作注意事项,需要的朋友可以参考下
    2019-11-11
  • jQuery实现网页抖动的菜单抖动效果

    jQuery实现网页抖动的菜单抖动效果

    这篇文章主要介绍了jQuery实现网页抖动的菜单抖动效果,鼠标滑过菜单项可见到菜单项的抖动效果,涉及jquery鼠标事件及页面元素样式动态操作的技巧,需要的朋友可以参考下
    2015-08-08

最新评论