首页 web前端 js教程 javascript改变position值实现菜单滚动至顶部后固定_javascript技巧

javascript改变position值实现菜单滚动至顶部后固定_javascript技巧

May 16, 2016 pm 05:43 PM
固定 滚动 顶部

现在很多网站都有这样的一个效果,当页面滚动到一定高度时,菜单栏会固定在页面顶部。其实就是改变 position 的值。
html 代码

复制代码 代码如下:
















menuFixed.js 代码
复制代码 代码如下:

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 obj.style.position = 'relative';
}else{
obj.style.position = 'fixed';
}
}

最后需要说明的是,该效果在 ie6 下不支持,因为 ie6 不支持 position:fixed;
PS:这是本人闲着无聊,通过自己所学的 javascript 知识,随意写的一些效果。
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

将VirtualBox固定磁盘转换为动态磁盘,反之亦然 将VirtualBox固定磁盘转换为动态磁盘,反之亦然 Mar 25, 2024 am 09:36 AM

在创建虚拟机时,系统会要求您选择磁盘类型,您可以选择固定磁盘或动态磁盘。如果您选择了固定磁盘,后来意识到需要动态磁盘,或者相反,该怎么办?好!你可以把一种转换成另一种。在这篇文章中,我们将看到如何将VirtualBox固定磁盘转换为动态磁盘,反之亦然。动态磁盘是一种虚拟硬盘,它最初具有较小的大小,随着您在虚拟机中存储数据,其大小会相应增长。动态磁盘在节省存储空间方面非常高效,因为它们只占用所需的主机存储空间。然而,随着磁盘容量的扩展,可能会稍微影响计算机的性能。固定磁盘和动态磁盘是虚拟机中常用的

如何设置固定不更换的电脑锁屏壁纸 如何设置固定不更换的电脑锁屏壁纸 Jan 17, 2024 pm 03:24 PM

一般来说,计算机的桌面背景图案是可以由使用者自行调节的。然而,对于部分Windows10用户而言,他们希望能够固定电脑桌面背景图片,但却不知该如何设定。实际上,操作起来十分简便易行。电脑锁屏壁纸怎样固定不换动1、把你要设置的图片右键选择设置成背景图片2、win+R打开运行,然后输入“gpedit.msc”3、依次展开到:用户配置-管理模板-控制面板-个性化4、点击个性化,再选择“阻止更改桌面背景”5、选择已启用6、之后再打开设置进入到背景,看到这些小字就说明已经设置好了。

如何在 Windows 11 中始终保持小部件面板可见 如何在 Windows 11 中始终保持小部件面板可见 Aug 13, 2023 pm 07:13 PM

如何始终显示小部件板在Windows11中打开?好吧,您可以从下载并安装最新的Windows更新开始。在预览体验计划的最新更新补丁中,Microsoft透露,开发和金丝雀频道中的用户将能够将小部件板固定为打开状态,因此小部件板始终只需一目了然。如何始终显示小部件板在Windows11中打开根据Microsoft,要将板子固定打开,只需单击板右上角的图钉图标即可。一旦您的板被固定打开,小部件板将不再轻视关闭。固定板时,您仍可以通过以下方法将其关闭:通过任务栏上的“小部件”按钮打开小部件板。当小部件

JavaScript 如何实现滚动到指定元素位置的功能? JavaScript 如何实现滚动到指定元素位置的功能? Oct 22, 2023 am 08:12 AM

JavaScript如何实现滚动到指定元素位置的功能?在网页中,当我们需要将用户的视线聚焦到某个特定的元素位置时,我们可以使用JavaScript来实现滚动到指定元素位置的功能。本文将介绍如何通过JavaScript实现这一功能,并提供相应的代码示例。首先,我们需要获取目标元素的位置信息。可以使用Element.getBoundingClient

监测iframe的滚动行为 监测iframe的滚动行为 Feb 18, 2024 pm 08:40 PM

如何监听一个iframe的滚动,需要具体代码示例当我们在网页中使用iframe标签嵌入其他网页时,有时候需要对iframe中的内容进行一些特定的操作。其中一个常见的需求是监听iframe的滚动事件,以便在滚动发生时执行相应的代码。以下将介绍如何使用JavaScript来监听一个iframe的滚动,并提供具体的代码示例供参考。获取iframe元素首先,我们需要

HTML、CSS和jQuery:制作一个自动滚动的公告栏 HTML、CSS和jQuery:制作一个自动滚动的公告栏 Oct 27, 2023 pm 06:31 PM

HTML、CSS和jQuery:制作一个自动滚动的公告栏在现代网页设计中,公告栏常常被用来重要的信息传达和引起用户注意。一个自动滚动的公告栏在网页上受到了广泛的应用,它能够让公告内容以动画形式在页面中滚动显示,提高信息的展示效果和用户体验。本文将介绍如何使用HTML、CSS和jQuery来制作一个自动滚动的公告栏,并提供具体的代码示例。首先,我们需要一个HT

电脑便签怎么固定在桌面 电脑便签怎么固定在桌面 Feb 15, 2024 pm 04:00 PM

Windows10操作系统预先植入了便捷的便笺功能,以便尊贵的用户能随心所欲地撰写临时记事或信息。假设阁下期望以此为工具,快速且轻松找到并使用便签,抑或是希望将这个实用的小程序固定在宽大的屏幕中央以方便查阅,只需简单几步即可实现以上愿望:电脑便签怎么固定在桌面1、点击开始再点击这里的便签2、打开以后便签就可以直接在这里输入对应的内容了,而且也可以点击上面的加号来添加一个全新的内容3、如果你想要用第三方的便签软件的话那么可以进入到对应的软件的设置里面来操作。

如何在Vue中实现全屏滚动效果 如何在Vue中实现全屏滚动效果 Nov 08, 2023 am 08:42 AM

如何在Vue中实现全屏滚动效果在网页设计中,全屏滚动效果可以给用户带来非常独特和流畅的浏览体验。本文将介绍如何在Vue.js中实现全屏滚动效果,以及具体的代码示例。为了实现全屏滚动效果,我们首先需要使用Vue.js框架搭建项目。在Vue.js中,我们可以使用vue-cli来快速搭建一个项目骨架。接着我们需要引入一些第三方库来实现滚动效果,比如fullpage

See all articles