recherche

Maison >interface Web >js tutoriel >Comment implémenter l'effet de positionnement fixe de la barre de navigation jQuery

Comment implémenter l'effet de positionnement fixe de la barre de navigation jQuery

小云云
小云云original
2018-01-10 13:13:261764parcourir

Cet article présente principalement l'exemple de code d'effet de positionnement fixe de la barre de navigation jQuery, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Rendu d'implémentation :


Lorsque vous glissez vers le bas, la barre de navigation est fixe

Code : 


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      *{
        margin: 0;
        padding: 0;  
      }
      img{
        display: block;
        margin: 0 auto;
      }
      img#search.dhgd{
        position: fixed;
        left: 50%;
        margin-left: -596px;
        top: 0px;
      }
    </style>
    <script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      $(function(){
//        给浏览器加滚动条事件
        $(window).scroll(function(){
          //获得当前已滚动上去的距离
          var t = $(document).scrollTop();
          console.log(&#39;==================&#39;+t)
          if(t>126){
            $("#search").addClass(&#39;dhgd&#39;);
          }else{
            $("#search").removeClass(&#39;dhgd&#39;);
          }
        })
      })
    </script>
  </head>
  <body style="background: #F1F1F1;">
    ![](imgs/img01.png)
    ![](imgs/img02.png)
    ![](imgs/img03.png)
  </body>
</html>

Recommandations associées :

Partage du code graphique et texte pour la production de barre de navigation html

Comment utiliser DIV et CSS pour créer une barre de navigation

Comment JavaScript obtient-il l'effet de mettre en surbrillance le menu actuel dans la barre de navigation après l'avoir sélectionné ?

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!

JavaScript jquery css html
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：Le plug-in jQuery ImgAreaSelect implémente les fonctions de prévisualisation et de recadrage du téléchargement d'avatar.Article suivant：Le plug-in jQuery ImgAreaSelect implémente les fonctions de prévisualisation et de recadrage du téléchargement d'avatar.

Articles Liés

Voir plus