滚动至顶部后固定

电脑及手机端多数使用滚动到顶部固定

操作方法

  • 01

    <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>滚动至顶部后固定</title> <style type="text/css"> .wrapper{width:1000px;height:3000px;margin-left:auto;margin-right:auto;} .header{height:350px;} #nav_menu{padding:20px;position:relative;top:0;background:#125430;width:1000px;} a{display:inline-block;margin:0 10px;*display:inline;zoom:1;color:white;} </style> </head> <body> <div class="wrapper"> <div class="header"></div> <div id="nav_menu"> <a href="#" target="_blank">a</a> <a href="#" target="_blank">b</a> <a href="#" target="_blank">c</a> <a href="#" target="_blank">d</a> <a href="#" target="_blank">e</a> <a href="#" target="_blank">f</a> <a href="#" target="_blank">g</a> <a href="#" target="_blank">h</a></div> </div> <script type="text/javascript" > function menuFixed(id){ var obj = document.getElementById(id); var _getHeight = obj.offsetTop; window.onscroll = function(){ changePos(id,_getHeight); } } function changePos(id,height){ var obj = document.getElementById(id); var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if(scrollTop < height){ obj.style.position = 'relative'; }else{ obj.style.position = 'fixed'; } } </script> <script type="text/javascript"> window.onload = function(){ menuFixed('nav_menu'); } </script> </body> </html>

赞 (0)

相关推荐

  • win7系统电脑桌面下方的任务栏移到右边左边顶部后怎么恢复原状

    win7系统电脑桌面下方的任务栏移到右边左边顶部后怎么恢复原状

    win7是我们最常用的计算机系统之一,它凭借超高性能和美观界面深得用户的喜爱,可是不少朋友不知道电脑桌面下方的任务栏移到右边左边顶部后怎么恢复原状,小编今天就来为您解答这个问题.具体如下:1. 首先, ...

  • 手机设置的壁纸怎么设置固定不要滚动

    手机设置的壁纸怎么设置固定不要滚动

    我们在给手机设置了壁纸之后,滑动手机桌面的时候,壁纸也会跟着滚动,如果不希望壁纸滚动,该怎么固定呢?今天就跟大家介绍一下手机设置的壁纸怎么设置固定不要滚动的具体操作步骤.1. 首先解锁手机,进入桌面, ...

  • EXCEL滚动浏览固定表头、冻结窗口的说明

    日常办公中,涉及到一些单张的长.大的表格,显示屏不足以显示全部,在滚动浏览表格时,需要时时查看的表头,未能保留,导致不能方便察看表格.本文就这个问题,简要介绍如何固定表头的办法. 操作方法 01 首先 ...

  • excel表格怎么在滚动拖动时行列固定不动?

    毫无疑问,excel现在已经成为了一个极其重要的办公工具,尤其是在数据处理方面,它可以进行各种数据的处理.统计分析和辅助决策操作.但是在日常工作中我们经常对一些功能无从下手,例如在浏览一份表格时拖动或 ...

  • 网页顶部导航栏设计总结

    网页中的header,一般我们称之为顶部导航栏,这里为了行文方便,以下都简称顶部栏.顶部栏对于一个网站的用户体验来说是至关重要的,因为根据用户的浏览习惯(从左到右,从上到下),当他们进入一个新的网站, ...

  • excel如何关闭或取消表头固定

    在职场办公中,经常遇到excel内容过多,导致下翻查看内容无法看到表头的情况,那么该如何固定表头便于查看操作呢? 固定表头 01 我们以该excel表为例,介绍说明.默认打开,可以看到表头内容. 02 ...

  • 新浪微博微彩票什么是固定奖金?

    过关投注的奖金为固定奖金。销售开始前，每个有效的过关投注组合均设置1个固定奖金; 在销售过程中，该固定奖金会根据销售等情况进行实时的调整;彩民的中奖金额以完成投注时刻对应的固定奖金金额为准，不受投注完 ...

  • 三星Note10.1如何开启智能滚动功能

    智能滚动功能是指:当您在浏览网页时,手机会利用前置摄像头侦测眼睛,然后它会根据您头部或设备的倾斜来自动滚动页面,不需要用手指翻页.若要开启此功能,请按照以下步骤进行操作 1.在待机页面下,点击[应用程 ...

  • picpick软件实现滚动截屏的教程

    方法/步骤 1.启动picpick 注:在截图之前,请确保你安装了picpick软件,如未安装可自己百度搜索下载安装 2.打开你需要截图的网页 3.打开picpick,选择滚动截屏 4.选择滚动截屏后 ...