收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 985|回复: 0

[求助] js固定浮动在最上方的导航菜单

[复制链接]
发表于 2016-12-3 09:38:47 | 显示全部楼层 |阅读模式
本帖最后由 faeng220 于 2016-12-11 00:45 编辑

这个div是我的横屏滑动选项,但是页面下拉它悬浮到顶部的时候,我的div却不能横屏滑动了,就是因为它是fixed的原因吗?就没有解决办法吗?谢谢!
(js在底部)


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, width=device-width">
  4. <meta charset="utf-8">
  5. <head>
  6. <title>js固定浮动在最上方的导航菜单模块,当屏幕下拉到下面的时候,这个模块一直悬停在顶部。</title>
  7. <style type="text/css">
  8. li{list-style:none}
  9. body{margin:0;padding:0}
  10. ::-webkit-scrollbar{height:0px}
  11. .suckerdiv{height:43px;overflow-x:auto;overflow-y:hidden;font-size: 16px;margin:0;padding:0;left:0;background:#f4f4f4;z-index:1000}
  12. .suckerdiv ul{width:2000px;margin:0;left:0;padding:0;}
  13. .suckerdiv li{width:70px;text-align:center;float:left;border-bottom:2px solid #a4a4a4;height:40px;line-height:40px}
  14. .suckerdiv li a{color:#000;}
  15. .suckerdiv li:hover{border-bottom:2px solid #f00;color:#f00}
  16. .suckerdiv li a:hover{color:#f00}
  17. </style>
  18. </head>
  19. <body>
  20. <div style="height: 200px; border: 1px solid #000;">
  21. </div>
  22. <div class="suckerdiv" id="mydiv" style="margin:0">
  23. <ul>
  24. <li><a href="javascript:void(null)" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu1')">样式</a></li>
  25. <li><a href="javascript:void(null)" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu2')">样式</a></li>
  26. <li><a href="javascript:void(null)" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu3')">样式</a></li>
  27. <li><a href="javascript:void(null)" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu4')">样式</a></li>
  28. <li><a href="javascript:void(null)" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu5')">样式</a></li>
  29. <li><a href="javascript:void(null)" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu6')">样式</a></li>
  30. <li><a href="javascript:void(null)" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu7')">样式</a></li>
  31. <li><a href="javascript:void(null)" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu6')">样式</a></li>
  32. <li><a href="javascript:void(null)" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu7')">样式</a></li>
  33. </ul>
  34. </div>

  35. <b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br><b>内容</b><br>
  36. </body>
  37. </html>
  38.     <script type="text/javascript">
  39.         var mt = 0;
  40.         window.onload = function () {
  41.             var mydiv = document.getElementById("mydiv");
  42.             var mt = mydiv.offsetTop;
  43.             window.onscroll = function () {
  44.                 var t = document.documentElement.scrollTop || document.body.scrollTop;
  45.                 if (t > mt) {
  46.                     mydiv.style.position = "fixed";
  47.                     mydiv.style.margin = "0";
  48.                     mydiv.style.top = "0";
  49.                 }
  50.                 else {
  51.                     mydiv.style.margin = "20px 0";
  52.                     mydiv.style.position = "static";
  53.                 }}}
  54.     </script>
复制代码
您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-9-19 11:41 , Processed in 0.109099 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表