recherche

Maison >interface Web >js tutoriel >Comment réparer la barre de navigation dans la page via jQuery

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

清浅
清浅original
2018-11-23 17:55:273443parcourir

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)

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();

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)

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();

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>

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!

jquery css html position
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment définir le style CSS dans js ? Comment modifier le style CSS avec jsArticle suivant：Comment définir le style CSS dans js ? Comment modifier le style CSS avec js

Articles Liés

Voir plus