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

!doctype html

坚守“ 做人真诚 · 做事靠谱 · 口碑至上 · 高效敬业 ”的价值观，专业网站建设服务10余年为成都水泥搅拌车小微创业公司专业提供成都企业网站建设营销网站建设商城网站建设手机网站建设小程序网站建设网站改版，从内容策划、视觉设计、底层架构、网页布局、功能开发迭代于一体的高端网站建设服务。

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

[img]

怎么制作html5手机页面？

1、打开百度，在百度上搜索：易企秀，然后点击搜索，在搜索的结果中点击进入易企秀的官方网站。

2、进入后，先登录自己的账号，可以直接用QQ微信登录即可，登录后就可以开始制作自己的手机网页微场景了。

3、首先点击【我的场景】接着点击【制作场景】，接着会进入场景模板选择界面，里面有很多免费的模板。

4、可以在模板中心选择一个自己需要的点击，直接套用模板，也可以选择自己创建一个空白页面。

5、进入后就可以根据自己的需要，将模板里面的文字图片和音乐替换成自己需要的即可，如图所示。

6、还可以给自己的手机网页添加背景音乐，动画效果，跳转链接，特效组件等等。

html5做手机app开发时有没有好的侧滑菜单插件

1.思路：

其时有2个WebView，一个main是用来装主页面，一个menu是用来装菜单（为提高性能，菜单项是采用了预加载方式的，预加载时为了避免和主页面争夺资源，采用延时加载，例如：

//plusReady事件后，自动创建menu窗口；

mui.plusReady(function() {

main = plus.webview.currentWebview();

//setTimeout的目的是等待窗体动画结束后，再执行create webview操作，避免资源竞争，导致窗口动画不流畅；

setTimeout(function () {

//侧滑菜单默认隐藏，这样可以节省内存；

menu = mui.preload({

id: 'offcanvas-drag-right-plus-menu',

url: 'offcanvas-drag-right-plus-menu.html',

styles: {

left: 0,

width: '70%'

}

});

},300);

});

2. 所谓侧滑，就是控制菜单WebView的显示，使用它的left来定位左边位置；

3. 要打开新的webView，要注意webview的show方法使用：

void plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras );

参数含义：（1）是webview对象 （2）动画效果，从没显示过，一般用"none"，（3）动画过渡时间 （4）当指定Webview窗口显示动画执行完毕时触发回调函数，窗口无动画效果（如"none"动画效果）时也会触发此回调。（5）传递的参数；

4.显示的方法：

（1）按钮点击后，让menu直接show出来，并对main设置样式，比如

menu.show("none",0,function(){

main.setStyle({

left:"70%",

transition:{

duration:150

}

});

});

（2）关闭侧滑菜单，实际就是设置main的样式了，比如：

main.setStyle({

left: '0',

transition: {

duration: 150

}

});

另外注意窗体切换完成后要关掉menu

//等窗体动画结束后，隐藏菜单webview，节省资源；

setTimeout(function() {

menu.hide();

}, 200);

5.被打开的WebView的界面如何控制关闭侧滑菜单：

（1）先要找到主页面，main = plus.webview.currentWebview().opener();

（2）激发主页面的某个事件，例如：mui.fire(main,"menu:swipeleft");

html5移动端隐藏菜单怎么做

你可以给对应的标签设置display（显示方式）属性为none（不显示），或者也可以使用opacity（透明度）属性value值为0 。 打了这么多字，希望您能够采纳。祝您生活愉快！

html5 + css3 做的下拉菜单在部分手机浏览器中无法显示，请教高手！

亲，你好，很乐意为你解答问题，目前并不是所有手机浏览器都支持HTML5+CSS3的功能

所以并不是你使用了CSS3的制作方法，所有手机就会识别你的制作方法。

首先你要确认你的网站为了哪一部分的手机用户提供服务，

如果有问题，可以继续追问我。

html5开发的手机APP怎么做首页的菜单页面切换?

如果不想用传统的页面跳转，可以考虑使用一下前端的MVC框架，比如backbone.js比如Angular.js都可以实现你说的那种，上下不动只有中间的内容在变，其实加载的是不同的模板，然后用路由控制的，整个浏览器始终处在一个界面中，只是在不停的重新渲染内容，页面并没有跳转，这个应该就是你想要的了吧

网页标题：html5手机菜单,手机网页菜单
本文网址：http://lswzjz.com/article/dsopsse.html