How to implement the fixed positioning effect of jQuery navigation bar-JS Tutorial-php.cn

How to implement the fixed positioning effect of jQuery navigation bar

小云云

Release： 2018-01-10 13:13:26

Original

1692 people have browsed it

This article mainly introduces the jQuery navigation bar fixed positioning effect example code, which has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Implementation renderings:

When sliding down, the navigation bar is fixed

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>

Copy after login

Related recommendations:

Sharing of graphic and text code for html navigation bar production

How to use DIV and CSS to make a navigation bar

How does JavaScript achieve the effect of highlighting the current menu in the navigation bar after selecting it?

The above is the detailed content of How to implement the fixed positioning effect of jQuery navigation bar. For more information, please follow other related articles on the PHP Chinese website!