JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例

来源：动视网责编：小采时间：2020-11-27 21:57:10

JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例

JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例:本文实例讲述了JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单。分享给大家供大家参考，具体如下：获取可视区尺寸和文档尺寸 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> &

推荐度：

点击下载本文 文档为doc格式

导读JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例:本文实例讲述了JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单。分享给大家供大家参考，具体如下：获取可视区尺寸和文档尺寸 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> &

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style type="text/css">
 body{
 margin: 0;
 }
 .banner{
 width: 960px;
 height: 200px;
 background-color: cyan;
 margin: 0 auto;
 }
 .menu{
 width: 960px;
 height: 100px;
 background-color: gold;
 margin: 0 auto;
 text-align: center;
 line-height: 80px;
 }
 p{
 text-align: center;
 color: red;
 }
 </style>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script type="text/javascript">
 $(function () {
 $menu=$('.menu');
 $(window).scroll(function () {
 var iNum=$(document).scrollTop();
 // document.title=iNum;
 if(iNum>200){
 $menu.css({
 position:'fixed',
 left:'50%',
 top:0,
 marginLeft:-480
 })
 }
 else {
 $menu.css({
 position:'static',
 marginLeft:'auto'
 })
 }
 })
 })
 </script>
</head>
<body>
 <div class="banner"></div>
 <div class="menu">菜单</div>
 <p>文档内容</p>
 <br />
 <br />
 <br />
 <br />
<p>文档内容</p>
 <br />
 <br />
 <br />
 <br />
<p>文档内容</p>
 <br />
 <br />
 <br />
 <br />
<p>文档内容</p>
 <br />
 <br />
 <br />
 <br />
<p>文档内容</p>
 <br />
 <br />
 <br />
 <br />
<p>文档内容</p>
 <br />
 <br />
 <br />
 <br />
<p>文档内容</p>
 <br />
 <br />
 <br />
 <br />
<p>文档内容</p>
 <br />
 <br />
 <br />
 <br />
<p>文档内容</p>
 <br />
 <br />
 <br />
 <br />
</body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具 http://tools.jb51.net/code/HtmlJsRun 测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例

推荐度：

点击下载本文 文档为doc格式

标签：文档菜单尺寸

热门焦点

JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例

JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例

JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例

最新推荐

猜你喜欢

热门推荐