點擊這裡體驗效果
請滾動頁面。
以下是html文件代碼，保存到html文件打開就可以：
<!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>
<title>jquery滾動頁面到指定位置彈出div-</title>
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<style type="text/css">
body{ margin:0px;}
.onkeleyicom{left:0px;}
.offkeleyicom{left:-140px;}
.showkeleyicom{visibility:visible;}
.hidekeleyicom{visibility:hidden;}
#xf_keleyi_com{width:166px;height:300px; background-color:transparent;position:fixed;top:300px;}
#jt_keleyi_com{float:right;width:25px;height:25px;margin-top:80px;}
#nr_keleyi_com{float:left;height:100%;width:136px;background-color:Silver;}
ul
{
list-style: none;
padding: 0px;
}
</style>
</head>
<body>
<div style="background-color: #959822; width: 100%; height: 150px;">
可以滾動鼠標使頁面向下</div>
<div style="background-color: Green; width: 100%; height: 150px;">
</div>
<div style="background-color: Red; width: 100%; height: 150px;">
請把光標移到箭頭上</div>
<div style="background-color: Yellow; width: 100%; height: 150px;">
hi</div>
<div style="background-color: Silver; width: 100%; height: 150px;">
</div>
<div style="background-color: Aqua; width: 100%; height: 150px;">
</div>
<div style="background-color: Fuchsia; width: 100%; height: 150px;">
keleyi</div>
<div style="background-color: Green; width: 100%; height: 150px;">
</div>
<div style="background-color: Blue; width: 100%; height: 150px;">
</div>
<div style="background-color: Olive; width: 100%; height: 150px;">
jquery實現的可隱藏重現的靠邊懸浮層</div>
<div style="background-color: Green; width: 100%; height: 150px;">
A</div>
<div style="background-color: Purple; width: 100%; height: 150px;">
jquery</div>
<div style="background-color: Green; width: 100%; height: 150px;">
<a href="http:///a/bjac/wqe0h8ei.htm" target="_blank">原文</a></div>
<div style="background-color: Lime; width: 100%; height: 150px;">
</div>
<div style="background-color: Orange; width: 100%; height: 150px;">
<a href="http:///menu/jquery/" target="_blank">jQuery</a>完整代碼</div>
<div class="offkeleyicom" id="xf_keleyi_com">
<div id="nr_keleyi_com">
這裡是內容<br />
<ul>
<li><a href="http:///a/bjac/x7h2nmjo.htm" title="" target="_blank">jQuery CSS樣式</a></li><li>
<a href="http:///a/bjac/xkqqoac2.htm" title="" target="_blank">jQuery選美</a></li><li><a href="http:///a/bjac/i4nb1p5i.htm"
title="" target="_blank">jquery的$(this)</a></li><li><a href="http:///a/bjac/8ah0br9p.htm"
title="" target="_blank">jQ:not 選擇器</a></li><li><a href="http:///a/bjac/q5rgk1mq.htm" title=""
target="_blank">jQuery :visible</a></li><li><a href="http:///a/bjac/jmhqxrr4.htm" title=""
target="_blank">jQuery的13個優點</a></li><li><a href="http:///a/bjac/e9qcsill.htm" title=""
target="_blank">jQ的Click事件</a></li><li><a href="http:///a/bjac/01wjh0a0.htm" title="" target="_blank">
jquery根據name</a></li><li><a href="http:///a/bjac/eilhbrcm.htm" title="" target="_blank">jQuery的可折疊</a></li><li>
<a href="http:///a/bjac/fds76xqw.htm" title="" target="_blank">jQuery刪除元素</a></li><li><a
href="http:///a/bjac/e8t7hoj4.htm" title="" target="_blank">jQuery下雪</a></li><li><a href="http:///a/bjac/6g9bsqmm.htm"
title="jQ讓部分內容在滾動的某階段一直顯示" target="_blank">jQ讓部分內容</a></li><li><a href="http:///a/bjac/8p778pqo.htm"
title="" target="_blank">jQ實現</a></li>
</ul>
<br />
</div>
<div id="jt_keleyi_com">
<img src="http:///keleyi/pmedia/rightarrow.jpg" alt="顯示" /></div>
</div>
<script type="text/javascript">
$(document).ready(
function () {
$('#jt_keleyi_com').bind('click', function () {
showdiv();
})
$('#nr_keleyi_com').bind('mouseleave', function () {
hidediv();
})
var m_st, m_po = 600; //滾動到600像素時顯示
$(window).scroll(function () {
m_st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);
if (m_st > m_po) {
showdiv();
}
else
hidediv();
})
})
function showdiv() {
$('#xf_keleyi_com').removeClass("offkeleyicom");
$('#xf_keleyi_com').addClass("onkeleyicom");
$('#jt_keleyi_com').addClass("hidekeleyicom");
$('#jt_keleyi_com').removeClass("showkeleyicom");
}
function hidediv() {
$('#xf_keleyi_com').removeClass("onkeleyicom");
$('#xf_keleyi_com').addClass("offkeleyicom");
$('#jt_keleyi_com').removeClass("hidekeleyicom");
$('#jt_keleyi_com').addClass("showkeleyicom");
}
</script>
</body>
</html>