js代码：
//当滚动到浏览器顶部时 浮动固定 不随网页滚动
var title_fix=function(){
//元素距离网页头部的距离
this.e_top=0;
this.posi=function()
{
//被卷入的的网页高度
var sTop=document.documentElement.scrollTop+document.body.scrollTop;
//计算出元素距离浏览器顶端的距离
if((this.e_top-sTop)<=0)
{
document.getElementById("title_id").setAttribute("class","css_title_fixed");
}else{
document.getElementById("title_id").setAttribute("class","css_title");
}
};
}
html代码：
<!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" xml:lang="zh-CN" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>测试</title>
<script type="text/javascript" src="scrolltotop.js"></script>
<style>
.css_title{
height:50px;width:100%;background-color: #ED0BE2;line-height: 50px;
}
.css_title_fixed{
height: 50px;width: 100%;background-color: #ED0BE2;line-height: 50px;position: fixed;left: 0px;top: 0px;
}
</style>
</head>
<body id="top">
<div style="height:300px;width:100%;background-color: #eee;"></div>
<div style="height:300px;width:100%;background-color:#dddddd;"></div>
<div style="height:300px;width:100%;background-color:#ffffff;"></div>
<div style="height:300px;width:100%;background-color:#00ff00;"></div>
<div class="css_title" id="title_id">
菜单
</div>
<div style="height:300px;width:100%;background-color:#ffddee;"></div>
<div style="height:300px;width:100%;background-color:#eeff00;"></div>
<div style="height:300px;width:100%;background-color:#ddeeff;"></div>
<a id="totop_btn" href="javascript:;" onclick="scrolltotop.scrolltop()" target="_self" class="totop"
style="position:fixed;right:10px; bottom:10px;width:100px;height50px;line-height:50px;text-align:center;background-color: #ff0000;display:none;">
返回顶部
</a>
</body>
<script>
var a = new title_fix();
a.e_top=document.getElementById("title_id").offsetTop;
window.onscroll = function(){
scrolltotop.scrollevent();
a.posi();
}
</script>
</html>
分享到：
相关推荐
在网页设计中，"固定div，滚动到顶部固定"是一种常见的布局技巧，它可以使特定的div元素在页面滚动时始终保持在视口的可见位置，通常用于实现导航栏、侧边栏等元素的固定效果。这种效果可以提升用户体验，因为用户...
如图所示，当页面滚动到导航条到达搜索栏下方时固定，向上滚动到导航条位置时又恢复原样。 以下是代码展示： 1.wxml <view class={{top>130 ? 'topnav' : ''}}> <--这里写大于130，表示距离顶部130rpx时...
首先，我们需要了解jQuery中的`$(window).scroll()`事件，它会在浏览器滚动条滚动时触发。我们可以在这个事件内部编写代码来检测滚动条的位置。滚动条距离顶部的距离可以通过`$(window).scrollTop()`函数获取，它...
// 当滚动回到表格顶部时，恢复原状 $header.css({ position: '', top: '', left: '' }); } }); }); ``` 以上代码实现了基本的表头固定功能，但可能还需要根据实际需求进行调整，例如处理表格宽度变化、兼容...
在微信小程序开发中，有时我们需要实现一个功能，即当用户滚动到特定区域时，该区域固定在屏幕顶部，直到用户滚动回原来的位置时再恢复原状。这种效果通常用于导航栏或工具栏，以保持其始终可见。本文将详细介绍如何...
2. 适当时恢复原状：当用户向上滚动到页面顶部时，导航栏可以恢复到原来的大小，提供更完整的导航体验。 3. 考虑触屏设备：在触摸设备上，应确保导航栏在固定状态下的点击区域足够大，方便用户操作。 通过以上技术...
在网页设计中，固定顶部导航（Fixed Top Navigation）是一种常见的用户体验优化技巧，它可以使导航栏在用户滚动页面时始终保持在屏幕顶部，方便用户随时访问页面的主要链接。本篇将详细介绍如何使用JavaScript实现这...
Sticky-header.js插件的工作原理是监听用户的滚动事件，当页面滚动到一定程度时，将header元素固定在页面顶部，确保用户始终可以快速访问导航链接。通过使用jQuery，这个插件可以轻松地与现有的DOM元素和事件处理...
当用户向上滚动回到顶部100像素以内时，导航条会恢复原样。 在提供的文件`nav.html`中，可能包含了实现这一功能的HTML结构、CSS样式和JavaScript代码。分析这个文件可以帮助你更好地理解实际的实现方式，包括HTML...
此外，为了在用户滚动到页面顶部时恢复原状，可以添加一个JavaScript（`js`）文件，通过监听滚动事件来动态改变导航栏的样式。例如，我们可以使用`window.onscroll`函数来检测滚动位置，并在达到一定阈值时添加或...
当用户向下滚动页面，一旦切换栏达到预设的屏幕位置，它就会自动固定在顶部或底部，保持在用户的视线范围内。这增强了用户导航的便利性，因为他们无需滚动回页面顶部来访问导航菜单。同时，如果切换栏包含了锚链接，...
`sticky-header.js`是这个插件的核心文件，它使用jQuery框架来监听页面滚动事件，当用户向下滚动页面时，使页面头部（header）元素保持在屏幕顶部，从而提供一致的用户体验。这个插件允许开发者通过参数定制header...
"随着滚动条，小广告也滚动的做法"这个主题涉及到的是如何通过CSS和DOM操作来实现广告元素随页面滚动的效果，这种效果也被称为"固定定位"或者"粘性定位"。下面将详细解释这一技术。 首先，我们需要理解CSS中的`...
用户在滚动页面时，某个特定的页面元素（如导航栏、搜索栏等）能够随页面滚动而移动，当达到页面顶部时，该元素会固定在顶部显示，直到页面继续滚动，它又会重新回到原本的位置。以下是详细的知识点梳理： 1. 监听...
// 滚动回到顶部时，恢复原状 } }); }); ``` 这段代码中，`$(document).ready`函数确保在DOM加载完成后执行我们的脚本。`$(window).on('scroll', ...)`监听滚动事件，然后计算当前滚动的距离和侧边栏的初始位置...
3. **粘性滚动（Sticky Elements）**：与固定定位类似，但粘性元素只在特定滚动范围保持固定，超出范围后恢复原状。可以结合offset()和position()方法实现。 4. **滚动监听（Scroll Spy）**：根据滚动位置高亮当前...
在一些界面设计中，为了增加交互性与趣味性，开发者可能会希望实现一个效果：当ScrollView向上滑动时，顶部布局会缩小，而向下滑动时则恢复原状。这个功能可以通过自定义布局或者对现有布局进行巧妙的调整来实现。接...
这个"IOS 图片浏览器多选"的功能涉及到多个技术点，包括图片加载、用户交互以及数据管理。接下来，我们将详细讨论这些关键知识点。 首先，我们需要一个图片浏览界面。在iOS中，最常用的组件是`UIImageView`，它可以...
"js实现浏览器全屏兼容谷歌火狐等"这个主题就涉及到如何使用JavaScript来实现在不同浏览器上实现全屏功能，并确保与主流浏览器如Google Chrome和Mozilla Firefox等的兼容性。这里我们将详细讲解这一技术实现的原理和...