往下拖动页面滚动条时，固定住菜单栏(不随其他内容网上滚动，兼容各版本IE、Chrome、Firefox)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script>
// 定义菜单栏离页面顶部的距离，默认为200
var divOffsetTop = 200;
//滚动事件
window.onscroll=function(){
var div = document.getElementById("divId");
// 计算页面滚动了多少（需要区分不同浏览器）
var topVal = 0;
if(window.pageYOffset){//这一条滤去了大部分， 只留了IE678
topVal = window.pageYOffset;
}
else if(document.documentElement.scrollTop ){//IE678 的非quirk模式
topVal = document.documentElement.scrollTop;
}
else if(document.body.scrolltop){//IE678 的quirk模式
topVal = document.body.scrolltop;
}
if(topVal <= divOffsetTop){
div.style.position = "";
}
else {
div.style.position = "fixed";
}
};
// 页面加载完之后，计算菜单栏到页面顶部的实际距离
window.onload=function(){
var div = document.getElementById("divId");
divOffsetTop = div.offsetTop;
};
</script>
</head>
<body>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
<div id="divId" style="width: 500px; height: 40px; line-height: 40px; top: 0px; background: pink">假设这是菜单栏，在页面往下滚动时它会固定住</div>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaa<br>
</body>
</html>
分享到：
相关推荐
用Axure制作页面滚动时菜单固定在顶部的页面 1.在Axure工作区中拖入4个矩形，分别为Head，Tab，content和bottom，其中content长一些 2.复制tab为tab2，坐标x与tab相同，坐标y为0，转化tab2为动态模板，并设置为隐藏 ...
本主题聚焦于利用jQuery实现一个特定的功能——当页面滚动时，展示一个浮动菜单栏，并实现锚点定位效果。这个功能对于提高用户体验，尤其是内容丰富的长页面，是非常有用的，因为它可以帮助用户快速导航到页面的不同...
"CSS页面滚动固定下拉导航菜单特效"是一种常见的交互设计技术，它增强了用户体验，特别是对于内容丰富的网站。这种特效使得用户在页面滚动时，导航菜单仍然可见，从而方便用户随时访问各个页面链接。 首先，我们来...
本文将深入探讨如何使用JavaScript实现自动固定顶部的悬浮菜单栏效果，这是一种常见的网页设计技巧，能够提升用户体验，特别是当网站内容较多，用户需要滚动浏览时。我们将关注于JavaScript对`window.onscroll`事件...
"固定菜单页面滚动效果"就是这样的一个设计技巧，它使得用户在浏览长页面时，菜单栏始终保持在屏幕顶部，便于用户随时访问导航。这一效果主要依赖于JavaScript（js）技术和HTML（超文本标记语言）来实现，同时，CSS...
Bootstrap Auto-Hiding Navbar是一款非常实用的在页面滚动时自动隐藏Bootstrap顶部导航菜单的jQuery插件。它通过扩展原生Bootstrap顶部固定导航菜单，使其在页面向下滚动时隐藏，向上滚动时又显示出来。
在这个特效中，JS主要负责监听用户的滚动事件，当页面滚动时，使菜单栏始终保持在页面顶部，这种效果也被称为“固定顶栏”或“粘性导航”。 实现这一效果的步骤通常包括以下几个关键点： 1. **CSS布局**：首先，...
这种设计使得用户在浏览长页面时，无论页面如何滚动，导航栏始终保持在屏幕顶部，便于用户随时访问各个页面链接。本文将深入探讨这个技术的实现原理、优缺点以及在HTML和CSS中的实现方法。 一、实现原理 固定导航栏...
在网页设计中，"页面滚动到一定位置切换栏被固定，且可以随意查看页面的某些内容" 这一技术通常被称为“固定导航栏”或“粘性导航”。它是一种优化用户体验的设计模式，允许用户在浏览长页面时始终保持关键的导航...
"jQuery网页页面滚动自动隐藏导航菜单代码"是一个实用的功能，它通过JavaScript库jQuery实现了当用户滚动页面时，导航菜单的动态显示与隐藏效果，提升了用户体验。本知识点将详细介绍这一功能的实现原理和步骤。 ...
通过这样的方式，我们能够创建一个始终保持在视口底部的菜单栏，即使在页面滚动时也能方便用户操作。这个功能对于提高用户体验非常有帮助，特别是在内容丰富的长页面中。 当然，实际项目中可能还需要考虑更多的细节...
当页面滚动到特定位置时，导航栏会固定在顶部，直到用户滚动回原始位置。 `css`目录下的CSS文件，可能是对Bootstrap默认样式进行了自定义或扩展，以适应项目需求。例如，可能添加了一些CSS代码来改变导航栏在固定...
在网页设计中，全屏页面滚动导航是一种流行的交互方式，它能提供沉浸式的用户体验，使用户在浏览网站时感到更加舒适和流畅。结合jQuery实现的导航切换效果，可以提升网站的专业性和互动性。下面我们将详细探讨这个...
解决这个问题需要了解两个关键点：一是 Vue 页面的滚动固定位置的实现方法，二是浏览器的滚动位置恢复行为。 一、Vue 页面的滚动固定位置的实现方法 在 Vue 项目中，实现滚动固定位置的方法可以分为两个步骤：记录...
通过以上步骤，你可以使用jQuery实现一个基本的页面滚动时始终保持在顶部的固定导航菜单。但实际应用中可能需要考虑更多细节，比如菜单的动画效果、响应式设计等，这需要结合具体需求进行调整和优化。
在页面滚动时，顶部导航栏始终保持在屏幕的最上方，这种效果被称为固定导航。通过CSS的`position`属性和`top`属性可以实现这一效果。首先，将导航栏的CSS类设置为`position: fixed`，这会使导航栏相对于浏览器窗口...
在页面滚动时，导航栏会自动固定在页面顶端，这种功能通常被称为“固定顶栏”或“粘性头部”。这种设计有助于保持用户在浏览长内容时对导航的访问，提高用户体验。实现这一效果的关键在于CSS和JavaScript的组合使用...
2. 定位：为了使菜单栏固定在页面顶部，我们可以使用绝对定位（`position: absolute;`）或者固定定位（`position: fixed;`）。固定定位可以使元素相对于浏览器窗口进行定位，即使在滚动页面时也保持在相同位置。 3....
然后，当页面滚动到一定位置时，使用jQuery的`$(window).scroll()`函数监听滚动事件。在滚动事件处理函数中，你可以检查浏览器的滚动位置，并根据需要添加一个类（例如，`fixed-nav`）来改变导航的定位属性，使其...
当页面滚动时，这个事件会被触发，然后执行我们设定的回调函数。在这个函数中，我们可以获取当前滚动条的位置，通过计算菜单栏相对于浏览器顶部的距离，判断是否需要将其设置为固定定位（fixed）。 `smohan....