jQuery實現(xiàn)浮動層隨瀏覽器滾動條滾動的方法
更新時間：2015年09月22日 15:02:14 作者：企鵝
這篇文章主要介紹了jQuery實現(xiàn)浮動層隨瀏覽器滾動條滾動的方法,涉及jQuery操作頁面元素滾動的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jQuery實現(xiàn)浮動層隨瀏覽器滾動條滾動的方法。分享給大家供大家參考。具體如下：
這是jQuery實現(xiàn)的一個浮動層效果，隨瀏覽器滾動條而滾動，并一直保持在頂部位置，請使用火狐測試，IE下表現(xià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使用時遇到的問題的解決方法的匯總，真是應(yīng)了那句老話，會者不難難者不會，這里記錄一下，有需要的小伙伴可以參考下。2015-05-05
這篇文章主要介紹了js實現(xiàn)仿京東2級菜單效果,涉及jquery鼠標事件動態(tài)操作頁面元素屬性及延時顯示的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
在博客園發(fā)布了柱狀圖JQUBar1.0 jQuery 插件?，F(xiàn)將該插件升級為1.1版本。2010-11-11
jquery scroll()區(qū)分橫向縱向滾動條的方法
這篇文章主要介紹了使用jquery scroll()方法區(qū)分瀏覽器橫向和縱向滾動條的方法,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了開發(fā)中可能會用到的幾個jQuery小提示和技巧,需要的朋友可以參考下2014-03-03
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)聊天對話框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
jQuery實現(xiàn)頁面下拉100像素出現(xiàn)懸浮窗口的方法
這篇文章主要介紹了jQuery實現(xiàn)頁面下拉100像素出現(xiàn)懸浮窗口的方法,涉及jQuery事件監(jiān)聽及針對頁面元素的判定與動態(tài)操作技巧,需要的朋友可以參考下2016-09-09
jquery使用echarts實現(xiàn)有向圖可視化功能示例
這篇文章主要介紹了jquery使用echarts實現(xiàn)有向圖可視化功能,結(jié)合完整實例形式分析了jquery的echarts.js插件實現(xiàn)有向圖可視化相關(guān)實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下2019-11-11
jQuery實現(xiàn)網(wǎng)頁抖動的菜單抖動效果
這篇文章主要介紹了jQuery實現(xiàn)網(wǎng)頁抖動的菜單抖動效果,鼠標滑過菜單項可見到菜單項的抖動效果,涉及jquery鼠標事件及頁面元素樣式動態(tài)操作的技巧,需要的朋友可以參考下2015-08-08