Heim > Artikel > Web-Frontend > So implementieren Sie den festen Positionierungseffekt der jQuery-Navigationsleiste

So implementieren Sie den festen Positionierungseffekt der jQuery-Navigationsleiste

小云云Original: 2018-01-10 13:13:261707Durchsuche

In diesem Artikel wird hauptsächlich der Beispielcode für die feste Positionierung der jQuery-Navigationsleiste vorgestellt, der einen gewissen Referenzwert hat. Ich hoffe, er kann jedem helfen.

Implementierungsrendering:

Beim Herunterschieben ist die Navigationsleiste fixiert

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>

Verwandte Empfehlungen:

Freigabe von Grafik- und Textcode für die HTML-Navigationsleistenproduktion

Wie verwende ich DIV und CSS, um eine Navigationsleiste zu erstellen

Wie erzielt JavaScript den Effekt, dass das aktuelle Menü in der Navigationsleiste hervorgehoben wird, nachdem es ausgewählt wurde?

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den festen Positionierungseffekt der jQuery-Navigationsleiste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery css html

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：Das jQuery-Plug-in ImgAreaSelect implementiert die Vorschau- und Zuschneidefunktionen für das Hochladen von AvatarenNächster Artikel：Das jQuery-Plug-in ImgAreaSelect implementiert die Vorschau- und Zuschneidefunktionen für das Hochladen von Avataren

In Verbindung stehende Artikel

Mehr sehen