ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery経由でページ内のナビゲーションバーを修正する方法

jQuery経由でページ内のナビゲーションバーを修正する方法

清浅
リリース: 2018-11-23 17:55:27
オリジナル
3423 人が閲覧しました

今日は、ページ内のナビゲーション バーを修正する方法について紹介します。これは一定の参考価値があり、皆さんの学習に役立つことを願っています。

ナビゲーション バーを作成するときは、レイアウトに使い慣れた 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 とscrollLeftImage 18.jpg

のアプリケーションをより明確に理解していただければ幸いです。

以上がjQuery経由でページ内のナビゲーションバーを修正する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート