ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery経由でページ内のナビゲーションバーを修正する方法
jQuery経由でページ内のナビゲーションバーを修正する方法
- 清浅オリジナル
- 2018-11-23 17:55:273445ブラウズ
今日は、ページ内のナビゲーション バーを修正する方法について紹介します。これは一定の参考価値があり、皆さんの学習に役立つことを願っています。
ナビゲーション バーを作成するときは、レイアウトに使い慣れた HTML と CSS を使用するだけでなく、jQuery のscrollTop とscrollLeft の知識も使用する必要があります。これらは主に垂直スクロールの位置を設定または取得するために使用されます。ページによると、カールの高さはナビゲーションバーの位置を固定するために使用されます。詳しくは記事で共有します。
scrollTop
一致する要素のスクロール バーの垂直位置を返すか、設定します。
$(selector).scrollTop(offset)
offset: スクロール バーの上部を基準としたオフセットをピクセル単位で指定します。書くか書かないかを指定できます。
$(window).scrollTop();例: カールしているページの高さを取得します。
$(selector).scrollLeft(position)
scrollLeft
一致する要素のスクロール バーの水平位置を返すか設定します。 水平位置は、左側からスクロールされるピクセル数を指します。スクロール バーが左端にある場合、位置は 0 です。$(window).scrollLeft();position: 新しい位置をピクセル単位で指定します。書くか書かないかが可能です。 スクロール バーの水平位置は、左側からスクロールされるピクセル数を指します。スクロールバーが左端にあるときの位置は0です。 例: カールしているページの幅を取得する
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
.all{
width:100%;
height:2000px;
}
.box{
width:100%;
height:75px;
background-color: #fff;
border: 1px solid #ccc;
position: relative;
}
.sousu-left img{
position: absolute;
top:20.5%;
left:28.45%;
}
.box1{width:536px;
height: 41px;
border:1px solid #ccc;
margin:16px auto;
}
.sousu-right span{
width:140px;
height:41px;
border:1px solid #ccc;
color:#fff;
background-color:rgb(51,136,255);
text-align: center;
line-height: 41px;
font-size:14px;
position: absolute;
right:28.64%;
top:19.69%;
}
.fixed{
position: fixed;
left:0;
top:0;
}
</style>
</head>
<body>
<div>
<div>
<!-- 定义左边和右边两个盒子 -->
<div>
<img src="images/logo_top_86d58ae1.png">
<div></div>
</div>
<div>
<span>百度一下</span>
</div>
</div>
</div>
<script src="jquery/jquery-1.12.4.js"></script>
<script>
$(function(){
$(window).scroll(function(){
if($(window).scrollTop()>=$(".box").height())判断当卷曲的高度大于box高度时给box添加一个fixed属性，使它固定在顶部
{
$(".box").addClass("fixed");
}
else{
$(".box").removeClass("fixed");如果小于则移除class属性
}
})
})
</script>
</body>
</html>
ケース共有: Baidu 検索バーを修正#rrreee
# 概要: 上記がこの記事の全内容です。この事例を通して、scrollTop とscrollLeft
以上がjQuery経由でページ内のナビゲーションバーを修正する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。