jQuery網頁向下滾動導航固定頂部代碼

阿新 • • 發佈：2017-08-18

頂部 top div lin move c51 att eat oct

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery網頁向下滾動導航固定頂部代碼</title>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css" >
</head>  
<body><script src="/demos/googlegg.js"></script>
<div id="nav-wrap" style="height:1900px;background:#FC0;margin-top:40px;position:relative;">
    <ul id="nav" style="height:60px;background:#0F9;top:300px;position:absolute;width:100%;">
        <li>導航欄項目一</li>
        <li>導航欄項目二</li>
        <li>導航欄項目三</li>
        <li>導航欄項目四</li>
        <li>導航欄項目五</li>
    </ul>
</div>

<script>
// 
方法一：
$(function(){
var a = $(‘#nav‘),
    b =a.offset();
$(document).on(‘scroll‘,function(){
    var    c = $(document).scrollTop();
    if(b.top<=c){
        a.css({‘position‘:‘fixed‘,‘top‘:‘0px‘})
        }else{
            a.css({‘position‘:‘absolute‘,‘top‘:‘300px‘})
            }
    })
})
//方法二：
/* 
$(function(){
var a = $(‘#nav‘),
b =a.offset();
$(document).on(‘scroll‘,function(){
var    c = $(document).scrollTop();
if(b.top<=c){
    a.css({‘position‘:‘fixed‘,‘top‘:‘0px‘,‘background‘:‘#fff‘,‘z-index‘:‘3‘,‘border-bottom‘:‘3px solid #ccc‘,‘box-shadow‘:‘2px 2px 2px 2px #555‘})
    }else if(b.top>c){
        a.removeAttr(‘style‘);
        }
})
}) 
*/

</script>

</body>  
</html>

View Code

————————————————————

jQuery網頁向下滾動導航固定頂部代碼

頂部 top div lin move c51 att eat oct <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>

用jquery實現仿蘑菇街導航固定頂部的效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

外貿建站之jQuery+bootstrap響應式二級下拉導航菜單代碼分享

drop code 簡單外貿 fun for gdi open 參考外貿建站之jQuery+bootstrap響應式二級下拉導航菜單代碼分享 jQuery+bootstrap響應式二級下拉導航菜單代碼是一款非常簡單實用的企業網站導航下拉菜單展開收縮特效，電腦端和移動端

基於Jquery的（可視區域，向上滾動向下滾動兩種）圖片懶載入

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>

表的列名如何固定在表格的最上面，以便於向下滾動表格時，都可以看到列名

問題描述： Suggest to frozen column titles in table view mode, so that user can see titles in any rows. 頁面html的改變：在table對應的元素中，把表頭和內容分開來寫，表頭用<table&g

jQuery帶控制按鈕向上和向下滾動文字列表

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery帶按鈕向上滾

原生JS的（可視區域，向上滾動向下滾動兩種）圖片懶載入

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>

hexo next 主題 : 實現點選跳轉到文章的時候文章的頁面自動實現滾輪效果，向下滾動到閱讀的位置。

背景：博主的部落格希望實現能夠在點選到某個文章的時候，跳轉完了之後，頁面能夠自主的向下滾動到瀏覽的區域，因為博主的工作是搞java的，js方面在大一大二的時候搞過，有些東西忘記了，或者還沒有接觸到，有技術的盲區（可能對於閱讀這篇文章的你來說有些可笑~），不管那麼多，記錄下來，以便以

通過滾動條向下滾動時，DIV廣告自動跟著向下滾動，並且點選置頂

js-scroll判斷頁面是向上滾動還是向下滾動

bsp 滑動手機瀏覽調用方法 span after ron body htm 原理：那當前的scrollTop和之前的scrollTop對比如果變大了，表示向下滾動（scrollTop值變大）；如果變小了，表示向上滾動

頂部固頂導航菜單代碼css+js

round top scrip 代碼 dex margin osi eight position <head> <link href="css/inside.css" rel="stylesheet" type="text/css" /><sc

jquery的父子兄弟節點查找示例代碼

tro 過濾 jquery對象 parent 元素一個 ldr all 但是 jQuery.parent(expr) 找父親節點，可以傳入expr進行過濾，比如$("span").parent()或者$("span").parent(".class") jQuery.pa

如何在Eclipse下查看JDK源代碼

ogr 編輯 com 目錄 software attach 打開菜單字段在Eclipse中查看JDK類庫的源代碼！！！設置： 1.點 “window”-> "Preferences" -> "Java" -> "Installed JRES"

網頁控制聚英繼電器JY-DAM3200代碼

result 部分 $.ajax bsp end bin index dex 連接第一次使用web控制一個實體硬件，需要通過網頁調用串口，摸索了一陣子，終於選定用python+php+jQuery+html實現了。第一部分：web首頁界面 index.html&

windows下用php實現svn代碼更新

and 代碼更新 one lose bin col proc 如何 pan windows下的服務器沒有登錄權限，如何從svn更新代碼用php頁面，實現更新代碼 $cmd = ‘"C:\Program Files\TortoiseSVN\bin\TortoisePro

win10環境下利用pyinstaller把python代碼(.py)打包成可執行文件(.exe)

有一個就是 win pos 3.4 -i html 技術 -a 前言最近寫了一個小小的檢測程序，python寫起來只需要短短一百行，可是打包起來就沒有C那麽容易了。下面記錄一下我艱難的“打包”過程。方法一：py2exe py2exe是一種經典的方法，為什麽說他經典呢？

本站頁腳HTML回頂部代碼

代碼 bsp cor tex size align order index ott <style type="text/css">.top { width: 50px; height: 50px; background-color: #F0F0F0; bord

編譯器可以生成相同的環境下運行的目標代碼

計算 nbsp ++ 轉換編譯器 amp all public tab 編譯器可以生成用來在與編譯器本身所在的計算機和操作系統（平臺）相同的環境下運行的目標代碼，這種編譯器又叫做“本地”編譯器。另外，編譯器也可以生成用來在其它平臺上運行的目標代碼，這種編譯器又叫做交

Sublime Text3在Windows下怎樣運行PHP代碼

cmd ctrl 內容 system php文件 sublime -h reg sele 首次用sublime寫代碼，周圍人都說好使，我就先用它寫PHP代碼吧。之前用的是fastadmin開發框架，用的是phpstudy服務器。使用sublime創建PHP的build sy

SSL握手通信詳解及linux下c/c++ SSL Socket代碼舉例

perf 加密技術 rec 套件 amp lin codes errno 機構 SSL握手通信詳解及linux下c/c++ SSL Socket代碼舉例摘自：http://www.169it.com/article/3215130236.html 分

jQuery網頁向下滾動導航固定頂部代碼

相關推薦