jQuery経由でページ内のナビゲーションバーを修正する方法-jsチュートリアル-php.cn

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

清浅

リリース： 2018-11-23 17:55:27

オリジナル

3411 人が閲覧しました

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

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