jQuery實(shí)現(xiàn)的監(jiān)聽導(dǎo)航滾動置頂狀態(tài)功能示例

本文實(shí)例講述了jQuery實(shí)現(xiàn)的監(jiān)聽導(dǎo)航滾動置頂狀態(tài)功能。分享給大家供大家參考，具體如下：

成都創(chuàng)新互聯(lián)公司不只是一家網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司；我們對營銷、技術(shù)、服務(wù)都有自己獨(dú)特見解，公司采取“創(chuàng)意+綜合+營銷”一體化的方式為您提供更專業(yè)的服務(wù)！我們經(jīng)歷的每一步也許不一定是最完美的，但每一步都有值得深思的意義。我們珍視每一份信任，關(guān)注我們的成都網(wǎng)站制作、網(wǎng)站建設(shè)質(zhì)量和服務(wù)品質(zhì)，在得到用戶滿意的同時(shí)，也能得到同行業(yè)的專業(yè)認(rèn)可，能夠?yàn)樾袠I(yè)創(chuàng)新發(fā)展助力。未來將繼續(xù)專注于技術(shù)創(chuàng)新，服務(wù)升級，滿足企業(yè)一站式成都全網(wǎng)營銷推廣需求，讓再小的成都品牌網(wǎng)站建設(shè)也能產(chǎn)生價(jià)值！

1. js代碼

/**
 * Created by EDUASK on 2016/5/20.
 */
$(function(){
  //引入id標(biāo)簽;
  var navtive=$("#native");
  //設(shè)置導(dǎo)航標(biāo)簽為置頂;
  var offsetTop=navtive.offset().top;
  //定義一個(gè)監(jiān)聽高度;
  var scrollHeight=$(document).scrollTop;
  fn(navtive,offsetTop);
  //設(shè)置監(jiān)聽事件;
  $(window).scroll(function(){
    fn(navtive,offsetTop);
  });
  //調(diào)用方法;
  function fn(navtive,offsetTop){
    var scrollHeight=$(document).scrollTop();
    if(offsetTop>scrollHeight){
      navtive.css("top",offsetTop);
    }else{
      navtive.css("top",scrollHeight);
    }
  }
});

2. html代碼

監(jiān)聽導(dǎo)航滾動置頂

ddddd

aaaaaaaaaaaa

歡迎訪問我的導(dǎo)航條

aaaaaaaaaaaa

回到頂部

aaaaaaaaaaaa

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試運(yùn)行效果。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。

網(wǎng)站名稱：jQuery實(shí)現(xiàn)的監(jiān)聽導(dǎo)航滾動置頂狀態(tài)功能示例
鏈接地址：http://weahome.cn/article/pscjsh.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

jQuery實(shí)現(xiàn)的監(jiān)聽導(dǎo)航滾動置頂狀態(tài)功能示例

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管