search

Home >Web Front-end >JS Tutorial >How to implement the fixed positioning effect of jQuery navigation bar

How to implement the fixed positioning effect of jQuery navigation bar

小云云
小云云Original
2018-01-10 13:13:261766browse

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>

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!

JavaScript jquery css html
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jQuery plug-in ImgAreaSelect implements avatar upload preview and cropping functionsNext article：jQuery plug-in ImgAreaSelect implements avatar upload preview and cropping functions

Related articles

See more