jQuery實(shí)現(xiàn)浮動層隨瀏覽器滾動條滾動的方法

更新時間：2015年09月22日 15:02:14 作者：企鵝

這篇文章主要介紹了jQuery實(shí)現(xiàn)浮動層隨瀏覽器滾動條滾動的方法,涉及jQuery操作頁面元素滾動的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)浮動層隨瀏覽器滾動條滾動的方法。分享給大家供大家參考。具體如下：

這是jQuery實(shí)現(xiàn)的一個浮動層效果，隨瀏覽器滾動條而滾動，并一直保持在頂部位置，請使用火狐測試，IE下表現(xiàn)不盡理想。

運(yùn)行效果截圖如下：

在線演示地址如下：

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程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery/$ is not defined報錯的幾種解決方法
jQuery最常見的錯誤之一是$ is not defined錯誤,本文主要介紹了jQuery/$ is not defined報錯的幾種解決方法,具有一定的參考價值,感興趣的可以了解一下
2024-02-02
jquery.validate使用時遇到的問題
這篇文章主要介紹了jquery.validate使用時遇到的問題的解決方法的匯總，真是應(yīng)了那句老話，會者不難難者不會，這里記錄一下，有需要的小伙伴可以參考下。
2015-05-05
js實(shí)現(xiàn)仿京東2級菜單效果(帶延時功能)
這篇文章主要介紹了js實(shí)現(xiàn)仿京東2級菜單效果,涉及jquery鼠標(biāo)事件動態(tài)操作頁面元素屬性及延時顯示的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-08-08
JQUBAR1.1 jQuery 柱狀圖插件發(fā)布
在博客園發(fā)布了柱狀圖JQUBar1.0 jQuery 插件。現(xiàn)將該插件升級為1.1版本。
2010-11-11
jquery scroll()區(qū)分橫向縱向滾動條的方法
這篇文章主要介紹了使用jquery scroll()方法區(qū)分瀏覽器橫向和縱向滾動條的方法,需要的朋友可以參考下
2014-04-04
開發(fā)中可能會用到的jQuery小技巧
這篇文章主要介紹了開發(fā)中可能會用到的幾個jQuery小提示和技巧,需要的朋友可以參考下
2014-03-03
jQuery實(shí)現(xiàn)聊天對話框
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)聊天對話框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-02-02
jQuery實(shí)現(xiàn)頁面下拉100像素出現(xiàn)懸浮窗口的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)頁面下拉100像素出現(xiàn)懸浮窗口的方法,涉及jQuery事件監(jiān)聽及針對頁面元素的判定與動態(tài)操作技巧,需要的朋友可以參考下
2016-09-09
jquery使用echarts實(shí)現(xiàn)有向圖可視化功能示例
這篇文章主要介紹了jquery使用echarts實(shí)現(xiàn)有向圖可視化功能,結(jié)合完整實(shí)例形式分析了jquery的echarts.js插件實(shí)現(xiàn)有向圖可視化相關(guān)實(shí)現(xiàn)技巧與操作注意事項,需要的朋友可以參考下
2019-11-11
jQuery實(shí)現(xiàn)網(wǎng)頁抖動的菜單抖動效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)網(wǎng)頁抖動的菜單抖動效果,鼠標(biāo)滑過菜單項可見到菜單項的抖動效果,涉及jquery鼠標(biāo)事件及頁面元素樣式動態(tài)操作的技巧,需要的朋友可以參考下
2015-08-08