jQuery導航條固定定位效果實例代碼

更新時間：2017年05月26日 11:38:31 作者：被時光移動的城

本篇文章主要介紹了jQuery導航條固定定位效果實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下

實現(xiàn)效果圖：

向下滑動時，導航欄固定

代碼：

<!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('=================='+t)
          if(t>126){
            $("#search").addClass('dhgd');
          }else{
            $("#search").removeClass('dhgd');
          }
        })
      })
    </script>
  </head>
  <body style="background: #F1F1F1;">
    ![](imgs/img01.png)
    ![](imgs/img02.png)
    ![](imgs/img03.png)
  </body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

jquery做的一個簡單的屏幕鎖定提示框
這篇文章主要介紹了使用jquery做的一個簡單的屏幕鎖定提示框,需要的朋友可以參考下
2014-03-03
jQuery調(diào)用Webservice傳遞json數(shù)組的方法
這篇文章主要介紹了jQuery調(diào)用Webservice傳遞json數(shù)組的方法,實例分析了jQuery基于ajax與Webservice傳遞json數(shù)據(jù)的相關實現(xiàn)技巧,需要的朋友可以參考下
2016-08-08
基于Jquery和html5的7款個性化地圖插件
現(xiàn)在我們經(jīng)常會用到一些地圖應用，無論是在網(wǎng)頁上還是手機App中，地圖貌似是一個不可或缺的應用。本文將帶領大家一起來看看jQuery和HTML5的個性化地圖插件，都是比較實用的，感興趣的朋友一起學習吧
2015-11-11
servlet+jquery實現(xiàn)文件上傳進度條示例代碼
現(xiàn)在文件的上傳，特別是大文件上傳，都需要進度條。這篇文章主要介紹了servlet+jquery實現(xiàn)文件上傳進度條示例代碼，有興趣的可以了解一下。
2017-01-01
基于jQuery實現(xiàn)彈幕APP
這篇文章主要為大家詳細介紹了基于jQuery實現(xiàn)彈幕APP的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
jquery實現(xiàn)Slide Out Navigation滑出式菜單效果代碼
這篇文章主要介紹了jquery實現(xiàn)Slide Out Navigation滑出式菜單效果代碼,涉及jquery基于鼠標事件操作頁面元素動態(tài)變換的技巧,需要的朋友可以參考下
2015-09-09
chosen實現(xiàn)省市區(qū)三級聯(lián)動
這篇文章主要為大家詳細介紹了chosen實現(xiàn)省市區(qū)三級聯(lián)動，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-08-08
jquery中的$(document).ready()與window.onload的區(qū)別
瀏覽器執(zhí)行window.onload函數(shù)不僅僅是在構(gòu)建完DOM樹之后, 也是在所有圖像和其他外部資源完整的加載并且在瀏覽器窗口顯示完畢之后.
2009-11-11
jQuery實現(xiàn)側(cè)邊導航欄及滑動電梯效果(仿淘寶)
這篇文章主要介紹了如何利用JQuery+CSS模擬淘寶實現(xiàn)側(cè)邊導航欄以及滑動電梯效果，文中的示例代碼講解詳細，感興趣的小伙伴可以動手試一試
2022-03-03
jQuery插件Easyui設置datagrid的pageNumber導致兩次請求問題的解決方法
這篇文章主要介紹了jQuery插件Easyui設置datagrid的pageNumber導致兩次請求問題的解決方法,較為詳細的描述了出現(xiàn)的問題、問題的原因及相應的解決方法,需要的朋友可以參考下
2016-08-08