suchen

Heim >Web-Frontend >js-Tutorial >So reparieren Sie die Navigationsleiste auf der Seite über jQuery

So reparieren Sie die Navigationsleiste auf der Seite über jQuery

清浅
清浅Original
2018-11-23 17:55:273428Durchsuche

Heute werde ich ein Beispiel mit Ihnen teilen: Wie man die Navigationsleiste auf der Seite repariert. Es hat einen gewissen Referenzwert und ich hoffe, dass es für das Lernen aller hilfreich sein wird.

Bei der Erstellung der Navigationsleiste müssen wir zusätzlich zur Verwendung des bekannten HTML- und CSS-Layouts auch die Kenntnisse von scrollTop und scrollLeft in jQuery nutzen. Sie werden hauptsächlich zum Festlegen oder Abrufen der Position verwendet Die vertikale Bildlaufleiste wird je nach Seite verwendet, um die Position der Navigationsleiste festzulegen. Ich werde sie im Artikel ausführlich mitteilen.

scrollTop

Gibt die vertikale Position der Bildlaufleiste des passenden Elements zurück oder legt sie fest. 

$(selector).scrollTop(offset)

Offset: Gibt den Offset relativ zum oberen Rand der Bildlaufleiste in Pixeln an, Sie können ihn schreiben oder nicht schreiben

Beispiel: Ermitteln Sie die Höhe der Seite, die gewellt wird

$(window).scrollTop();

scrollLeft

Gibt die horizontale Position der Bildlaufleiste des passenden Elements zurück oder legt sie fest.

Die horizontale Position bezieht sich auf die Anzahl der Pixel, die von der linken Seite aus gescrollt werden.

Wenn sich die Bildlaufleiste ganz links befindet, ist die Position 0. 

$(selector).scrollLeft(position)

Position: Gibt die neue Position in Pixel an, die geschrieben werden kann oder nicht.

Die horizontale Position der Bildlaufleiste bezieht sich auf die Anzahl der Pixel, die von ihrer linken Seite aus gescrollt werden . Wenn sich die Bildlaufleiste ganz links befindet, ist die Position 0.

Beispiel: Ermitteln Sie die Breite der Seite, die gewellt wird

$(window).scrollLeft();

Case-Sharing: Baidu-Suchleiste korrigiert

<!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>

Image 18.jpg

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass jeder durch diesen Fall ein klareres Verständnis der Anwendung von scrollTop und scrollLeft erhält


Das obige ist der detaillierte Inhalt vonSo reparieren Sie die Navigationsleiste auf der Seite über jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery css html position
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie stelle ich den CSS-Stil in JS ein? So ändern Sie den CSS-Stil mit jsNächster Artikel：Wie stelle ich den CSS-Stil in JS ein? So ändern Sie den CSS-Stil mit js

In Verbindung stehende Artikel

Mehr sehen