`

想把某些内容固定在某些地方总是显示当前页面上

阅读更多
作用:当在一个内容很长的页面中,想把某些内容固定在某些地方总是显示当前页面上,在滚动的时候相对位置还是不变

以div存放内容的地方为例子,实现代码如下:

css代码:
<style type="text/css" >
body{margin:0 auto; text-align:center;padding:0;}
#mydiv{position:absolute;top:0px;left:300px; margin-left:0;margin-right:0;border:0px blue solid; text-align:left;background-color: #f3f9ff; width:100%; text-align:center;}

</style>

html代码:
<div id="mydiv" name="mydiv">
XXXXXXXXXXXX
....
</div>

javascript代码:
function addEventHandler (oTarget, sEventType, fnHandler) {
    if (oTarget.addEventListener) {
        oTarget.addEventListener(sEventType, fnHandler, false);
    } else if (oTarget.attachEvent) {
        oTarget.attachEvent("on" + sEventType, fnHandler);
    } else {
        oTarget["on" + sEventType] = fnHandler;
    }
}

function fixMyDiv(){
addEventHandler(window, 'scroll', function(){
var mydiv = document.getElementById('mydiv');
mydiv.style.position = 'absolute';//绝对定位
mydiv.style.top = document.body.scrollTop;//相对body的顶端
mydiv.style.left = 300; //徧左300px
});
}


window.setTimeout(fixMyDiv,20);
分享到:
评论

相关推荐

    每页显示固定行数

    标题“每页显示固定行数”涉及到的是在数据展示或报表设计时的一种常见需求,即限制页面上数据的显示量,通常是为了提高可读性和用户体验。这种技术在各种应用程序,尤其是数据分析工具、数据库管理系统和电子表格...

    js固定表格行列

    这种技术通过JavaScript实现,旨在让表格的表头在滚动时始终保持可见,同时也可以选择性地固定某些列,提供更好的用户体验。 1. **固定表头**:在网页滚动时,表头(thead)是用户识别列名的重要部分。通过...

    固定表头的使用

    对于主报表区域,可以设置隐藏表头,因为在页面加载时,固定表头会覆盖这部分内容。这样做是为了确保无论用户滚动到何处,表头始终可见。 2. 编写JQUERY代码实现固定效果: 使用JQUERY库来监听页面的滚动事件,当...

    asp.net freamset 用a标签显示页面不混乱

    在探讨“asp.net freamset 用a标签显示页面不混乱”的主题时,我们首先要理解ASP.NET框架中的Frameset和如何有效地使用A标签来导航而不破坏页面布局的完整性。Frameset,即框架集,是一种在单个HTML文档中定义多个...

    jQuery页面滚动顶部右侧固定层代码.zip

    这个"jQuery页面滚动顶部右侧固定层代码.zip"压缩包包含了一个利用jQuery实现的特定功能,即当用户在页面上滚动时,一个元素(如导航菜单或侧边栏)会始终保持在屏幕的顶部右侧。这种效果常被称为“固定定位”或者...

    html2canvas将HTML内容写入Canvas生成图片 uniapp

    - 截全屏意味着要捕捉到页面的所有可视内容,这在有滚动条的页面上尤为复杂。需要利用uniAPP的API来获取视口高度和页面总高度,再配合html2canvas进行多次截图和拼接。 - 截取特定页面内容则更简单,只需指定要...

    javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.rar

    本压缩包文件"javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数.rar"包含了相关知识点的详细讲解,主要集中在JavaScript的DOM操作和窗口对象(Window)的属性与方法上。 1. **当前页面可视区域尺寸**...

    JS固定窗口位置滚动效果.rar

    【标题】"JS固定窗口位置滚动效果.rar"所涉及的知识点主要集中在JavaScript(JS)的网页特效开发上,特别是如何实现一个元素在页面滚动时始终保持在屏幕的固定位置,这种效果通常被称为“固定定位”或者“吸附效果”...

    Android-FixedTabScrollView是一个scrollViewViewPager并实现自动顶吸固定顶部控件

    通过动态计算,`FixedTabScrollView`可以根据当前显示的页面高度调整自身高度,只显示当前所需的页面内容,从而优化了布局和滚动性能。 在实际使用`Android-FixedTabScrollView`时,开发者需要集成其代码库,并在...

    浏览器滚动时悬浮,悬浮判断到达底部时固定在某个位置

    这种效果常用于网站的侧边栏、导航栏或者聊天窗口,以便用户在滚动页面时始终保持某些元素可见,提升用户体验。下面我们将深入探讨这个话题。 首先,悬浮效果(通常称为Fixed Positioning)是CSS定位模式之一。通过...

    divcss网页的内容显示不完整的诊断PPT课件.pptx

    这些技术使设计师能够轻松实现复杂的布局设计,并保证内容在不同屏幕尺寸下都能得到良好的展示。 总而言之,解决divcss网页内容显示不完整的问题,需要对CSS有深入的理解和实践经验。在日常的设计和开发工作中,对...

    bootstrap表格固定表头并且tbody部分添加滚动条

    Bootstrap表格在设计网页时是一种非常常用的组件,尤其在处理大量数据时,为了提供更好的用户体验,我们经常需要在tbody部分添加竖向滚动条,同时保持表头固定不动。这样,当用户滚动内容时,表头始终保持可见,便于...

    datagride 固定列,自带分页

    固定列是在数据表格中保持某些列始终可见,即使用户滚动横向查看其他列,这些列也会固定在屏幕的一侧。这种特性对于显示关键信息或者参考列非常有用,例如日期、ID或其他标识符。固定列设计可以提高用户体验,因为...

    可以在任务栏上显示农历

    标题“可以在任务栏上显示农历”指的是在Windows操作系统中,用户可以通过特定的工具或设置让农历日期在任务栏上得以显示。这是一项便利的功能,尤其是对于那些需要关注中国传统节日或者根据农历进行日常活动的人来...

    在文章后面加入指定内容插件 for WordPress.rar

    这里可能包括选择哪些文章类型、设置显示条件(如仅在某些页面或分类下显示)、自定义HTML内容、设置显示顺序以及调整样式等选项。根据具体插件的功能,你可能还可以选择是否在移动设备上显示这些内容,以适应不同...

    iframe自适应内容页面的高度

    然而,当嵌入的页面高度不固定时,可能会导致`iframe`显示不完整,用户需要滚动`iframe`内部才能查看全部内容。为了解决这个问题,我们需要让`iframe`自适应其内容页面的高度,确保内容能够完全展示,提高用户体验。...

    第4章-实验4-模拟先进先出(FIFO)页面置换算法1

    在计算机系统中,页面置换算法是虚拟存储管理的重要组成部分,用于处理由于物理内存不足而需要替换内存中某些页面的情况。FIFO(First In First Out)页面置换算法是最简单的策略之一,其核心原则是按照页面进入内存...

    微信小程序页面路由demo

    6. **tabBar配置**:在微信小程序中,底部的固定导航栏(tabBar)也是路由的一部分,可以在app.json中配置tabBar,定义其显示的页面和样式。 在"wx-demo"这个压缩包中,你可以找到一个实际的小程序页面路由示例。...

    JavaScript页面事件.pdf

    例如,加载事件可以用于优化用户体验,确保所有内容在用户看到页面之前已经准备好;卸载事件则可以用于提供反馈,让用户知道他们正在离开当前页面;而页面大小事件则帮助开发者实现适应不同屏幕尺寸的设计,提高跨...

    先进先出(FIFO)页面置换算法

    在操作系统的内存管理中,当物理内存不足时,需要将某些页面移到磁盘上的交换区,以便为新的页面腾出空间。FIFO算法执行这一过程时,遵循的是最早分配的页面优先被替换的规则。也就是说,内存中最长时间未被访问的...

Global site tag (gtag.js) - Google Analytics