html5菜单固定,网页菜单栏怎么固定

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

HTML5 移动端上动态固定菜单栏的问题

!doctype html

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

h2列表 1/h2

/li

h2列表 2/h2

/li

h2列表 3/h2

/li

h2列表 4/h2

/li

h2列表 5/h2

/li

h2列表 6/h2

/li

h2列表 7/h2

/li

h2列表 8/h2

/li

/ul

div class="header"h1我是一个标题/h1/div

h2列表 1/h2

/li

h2列表 2/h2

/li

h2列表 3/h2

/li

h2列表 4/h2

/li

h2列表 5/h2

/li

h2列表 6/h2

/li

h2列表 7/h2

/li

h2列表 8/h2

/li

h2列表 9/h2

/li

h2列表 10/h2

/li

h2列表 11/h2

/li

h2列表 12/h2

/li

h2列表 13/h2

/li

h2列表 14/h2

/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