Comment réparer la barre de navigation dans la page via jQuery-js tutoriel-php.cn

Comment réparer la barre de navigation dans la page via jQuery

清浅

Libérer： 2018-11-23 17:55:27

original

3410 Les gens l'ont consulté

Aujourd'hui, je vais partager avec vous un cas : comment réparer la barre de navigation sur la page. Elle a une certaine valeur de référence et j'espère qu'elle sera utile à l'apprentissage de chacun.

Lors de la création de la barre de navigation, en plus d'utiliser le HTML et le CSS familiers pour la mise en page, nous devons également utiliser les connaissances de scrollTop et scrollLeft dans jQuery. Ils sont principalement utilisés pour définir ou obtenir la position du. barre de défilement verticale Selon la page en cours La hauteur de la boucle est utilisée pour fixer la position de la barre de navigation, je la partagerai avec vous en détail dans l'article.

scrollTop

Renvoie ou définit la position verticale de la barre de défilement de l'élément correspondant.

$(selector).scrollTop(offset)

Copier après la connexion

offset : Spécifie le décalage par rapport au haut de la barre de défilement, en pixels, qui peut être écrit ou non.

Exemple : Obtenez la hauteur de la page en cours de recourbement.

$(window).scrollTop();

Copier après la connexion

scrollLeft

Renvoie ou définit la position horizontale de la barre de défilement de l'élément correspondant.

La position horizontale fait référence au nombre de pixels défilés depuis son côté gauche,

Lorsque la barre de défilement est à l'extrême gauche, la position est 0.

$(selector).scrollLeft(position)

Copier après la connexion

position : précise la nouvelle position en pixels, vous pouvez l'écrire ou non.

La position horizontale de la barre de défilement fait référence aux pixels défilés depuis son côté gauche nombre. Lorsque la barre de défilement est à l'extrême gauche, la position est 0.

Exemple : Obtenez la largeur de la page en cours de recourbement

$(window).scrollLeft();

Copier après la connexion

Partage de cas : Correction de la barre de recherche Baidu

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

Copier après la connexion

Image 18.jpg

Résumé : Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'à travers ce cas, tout le monde aura une compréhension plus claire de l'application de scrollTop et scrollLeft

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!