この記事の例では、jQuery が Baidu Tieba ヘッドの固定ナビゲーション効果を模倣する方法を説明します。皆さんの参考に共有してください。詳細は以下の通りです。
ここでは Jquery を使用して、Web ページのヘッドを固定する効果を実現しますが、スクロール バーでスクロールすることはありません。Web ページの特殊効果は Baidu Tieba でコンパイルされました。最初は、固定バーをスクロールバーでWebページの先頭に到達しましたが、Webページの先頭に到達した後、再度スクロールバーをドラッグすると、先頭はスクロールしませんが、他のコンテンツはスクロールできるようです。インターネット上にたくさんあります。
実行中のエフェクトのスクリーンショットは次のとおりです:

具体的なコードは次のとおりです:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <!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>导航固定</title>
<script src= "jquery-1.6.2.min.js" language= "javascript" type= "text/javascript" ></script>
<script>
$( function (){
$(window).scroll( function () {
if ($(window).scrollTop()>=250){
$( ".nav" ).addClass( "fixedNav" );
} else {
$( ".nav" ).removeClass( "fixedNav" );
}
});
});
</script>
<style>
*{
margin:0px;
padding:0px;
}
div.nav{
background:#000000;
height:57px;
line-height:57px;
color:#ffffff;
text-align:center;
font-family: "微软雅黑" , "黑体" ;
font-size:30px;
}
div.fixedNav{
position:fixed;
top:0px;
left:0px;
width:100%;
z-index:100000;
_position:absolute;
_top:expression( eval (document.documentElement.scrollTop));
}
</style>
</head>
<body>
<div class = "header" style= "background:#CCCC00;height:250px;" ></div>
<div class = "nav" >
<p>导航固定</p>
</div>
<div class = "content" style= "background:#0099FF; height:2000px;" ></div>
</body>
</html>
|
ログイン後にコピー
この記事が皆さんの jquery プログラミング設計に役立つことを願っています。