HTML5 移動端上 動態固定菜單欄的問題

!doctype?html

創新互聯公司擁有十余年成都網站建設工作經驗,為各大企業提供網站設計、網站建設服務，對于網頁設計、PC網站建設（電腦版網站建設）、重慶App定制開發、wap網站建設（手機版網站建設）、程序開發、網站優化（SEO優化）、微網站、申請域名等，憑借多年來在互聯網的打拼，我們在互聯網網站建設行業積累了很多網站制作、網站設計、網絡營銷經驗，集策劃、開發、設計、營銷、管理等網站化運作于一體，具備承接各種規模類型的網站建設項目的能力。

html?lang="en"

head

meta?charset="UTF-8"

meta?name="viewport"

content="width=device-width,?user-scalable=no,?initial-scale=1.0,?maximum-scale=1.0,?minimum-scale=1.0"

meta?http-equiv="X-UA-Compatible"?content="ie=edge"

titleTEST/title

style

h1{

margin:?0;

}

body{

margin:?0;

height:?100%;

background-color:?#f3f3f3;

}

.header?{

padding:?15px?0;

background-color:?#fff;

border-bottom:?1px?solid?#ccc;

text-align:?center;

width:?100%;

}

.fiexd?.header{

position:?fixed;

top:?0;

}

.fiexd?ul{

margin-top:?84px;

}

/style

/head

body

ul

li

h2列表?1/h2

/li

li

h2列表?2/h2

/li

li

h2列表?3/h2

/li

li

h2列表?4/h2

/li

li

h2列表?5/h2

/li

li

h2列表?6/h2

/li

li

h2列表?7/h2

/li

li

h2列表?8/h2

/li

/ul

div?class="header"h1我是一個標題/h1/div

ul

li

h2列表?1/h2

/li

li

h2列表?2/h2

/li

li

h2列表?3/h2

/li

li

h2列表?4/h2

/li

li

h2列表?5/h2

/li

li

h2列表?6/h2

/li

li

h2列表?7/h2

/li

li

h2列表?8/h2

/li

li

h2列表?9/h2

/li

li

h2列表?10/h2

/li

li

h2列表?11/h2

/li

li

h2列表?12/h2

/li

li

h2列表?13/h2

/li

li

h2列表?14/h2

/li

li

h2列表?15/h2

/li

/ul

script

var?header?=?document.getElementsByClassName('header')[0];

var?body?=?document.body;

window.onscroll?=?function?()?{

var?scrollTop?=?document.documentElement.scrollTop?||?document.body.scrollTop;

console.log(scrollTop);

if(scrollTop??100)?{

body.className?=?'fiexd';

}?else?{

body.className?=?'';

}

}

/script

/body

/html

HTML5怎么把導航固定在底部？是只滑動內容，導航固定不動的。

HTML5怎么把導航固定在底部的步驟如下：

css的定位樣式屬性來實現；會用到css中的position：fixed;屬性，結合來實現。

style.foot-menu{width:100%;height:60px;background:#000;position:fixed;bottom:0;/**距離底部為0*/left:0;z-index:1;}/stylediv?class="foot-menu"

!---導航具體內容--

/div

拓展資料

css3網頁底部固定導航是一款純css3實現的網頁底部固定導航菜單。特性介紹：

1、邊框特性

CSS3對網頁中的邊框進行了一些改進，主要包括支持圓角邊框、多層邊框、邊框色彩與圖片等。在CSS3中最常用的一個改進就是圓角邊框，通過CSS3的屬性可以快速實現圓角定義，同時還可以根據實際情況針對特定角進行圓角定義 。

2、多背景圖

CSS3允許使用多個屬性(比如background-image、background-repeat、background-size、background-position、background-origin和background-clip等)在一個元素上添加多層背景圖片。

HTML5如何才能讓導航欄固定頂部不動，且！且！且！不遮擋住下面的DIV？？？

1、新建一個文件夾，用來存放網頁文件和圖片，快捷鍵ctrl+shift+n。

2、進入新建文件夾里面，右鍵新建文本文檔。

3、進入新建的文本文檔，復制下方代碼，點擊快捷鍵ctrl+s保存后退出。

!DOCTYPE html

html

head

meta charset="UTF-8"

title/title

style type="text/css"

body{margin: 0 auto;color:#F6F6F6;}

/*注：t1的寬度是100%跟其他div的寬度不同，如果分辨率高于1100寬度的時候，t1會突出來，這是你原先代碼的。*/

/*position:fixed;這個fixed屬性為塊狀，他跟absolute一樣，不會獨占一行。z-index: 2;屬性就是讓他顯示在其他div的上層*/

.t1{position:fixed; width:100%; height:50px; background: #000000;z-index: 2;}

.t2{width:1100px;height:100px;background:#2266FF;}

.t3{width:1100px;height:100px;background:#5577FF;}

.t4{width:1100px;height:100px;background:#3344FF;}

.t5{width:1100px;height:100px;background:#5577FF;}

.t6{width:1100px;height:100px;background:#3344FF;}

/*t01的position: relative;這個是獨占一行的屬性，在這里相當于占位符的作用。height: 50px;這里的50像素高度要等于t1的高度。background:none;背景設置成空白或者透明，這里設不設置都沒關系，因為他沒有加z-index這個屬性，他默認的屬性為0，即顯示在t1圖層的下面*/

.t01{position: relative;height: 50px;background:none;}

/style

/head

body

div class="t1"T1這是希望固定不動的DIV/div

div class="t01"/div

div class="t2"T2/div

div class="t3"T3/div

div class="t4"T4/div

div class="t5"T5/div

div class="t6"T6/div

/body

/html

4、重命名新建文本文檔為index.html，原先的.txt的后綴同時去掉后保存，提示確實要更改后按“是”即可。

5、點擊index.html，右鍵瀏覽器打開預覽效果，打開后即可得到如下效果。