JS简单实现DIV相对于浏览器固定位置不变的方法
作者：hbiao68 发布时间：2023-08-05 22:30:12
标签：JS,DIV,固定位置
本文实例讲述了JS简单实现DIV相对于浏览器固定位置不变的方法。分享给大家供大家参考，具体如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title>Anchor Properties</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="noindex, nofollow" name="robots">
<script>
function Totop(){
window.scrollTo(0,0);
}
function bottom(){
//scrollHeight属性是获取对象的滚动高度。
window.scrollTo(0,document.body.scrollHeight);
}
function left(){
//alert("left");alert(document.body.scrollLeft)
var left = 0-document.body.scrollWidth;//向左移动的像素
window.scrollBy(left,0 );
}
function right(){
//alert(document.body.scrollWidth);
//整个滚动条的宽度
window.scrollBy(document.body.scrollWidth,0);
}
function init(){
var init_pos=oLayer.style.posTop ;
var init_left=oLayer.style.posLeft;
document.body.onscroll=function(){
//document.body.scrollTop等于滚动滑块上端离滚动的开始点的距离
oLayer.style.posTop=document.body.scrollTop+init_pos;
//scrollLeft设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
oLayer.style.posLeft=document.body.scrollLeft +init_left;
}
}
</script>
</head>
<body onload="init()">
<a onclick="bottom()">置底</a>
<div id="oLayer" style="position:absolute;left:120;top:60;z-index:2;background:green;width:120px;height:120px"> ddddd
</div>
<br>
<a onclick="right()">置 右</a>
<div style="width:1500px;height:30px;float:left">width="2000px"</div>
<a style="float:right" onclick="left()">置 左</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a onclick="Totop()">置 顶</a>
</body>
</html>
希望本文所述对大家JavaScript程序设计有所帮助。
0
投稿猜你喜欢
- 1. @@rowcount: 获取受影响行数 代码如下:update SNS_TopicData set TopicCount=TopicC
前后端分离的开发模式，原本觉得没什么稀奇的玩艺，在最近参与的一个大型项目中，让我有了更深的理解。前后端分离的开发模式：系统分析阶段，系分和前- 题目描述原题链接 :35. 搜索插入位置 - 力扣（LeetCode） (leetcode-cn.com)给定一个排序数组和一个目标值，在数
- 常有人因为页面的面积问题，想在一个窄小的地方，显示一条条的信息，顺序往上滚动，在经典的BBS里，有一个随机上滚动的JS，好些人用不了，现在蛋
- 年前帮manager 招GUI设计实习生 (PS. 这个实习生职位依然open，欢迎有兴趣的同学来投，邮箱jj.ying [at] hp.c
- 概述基于Swoole的websocket服务，再之前的消息系统系列的第4篇，实现了更加复杂的业务场景，是对消息推送的完善和优化,代码本身就是
- 前言在php开发过程中，获取文件扩展名是非常常见的需求。比如我们在上传文件的时候，首先需要判断文件类型是否为我们允许上传的类型。这个时候就需
- 程序代码： '关键字的搜索 str="select * from tableNam
- 爬取结果：爬取代码import osimport jsonimport requestsfrom tqdm import tqdmdef l
- 瞬间设计是什么？良好的用户体验，全在于那些完美的瞬间。在第一个瞬间，假设当一位用户从购物搜索结果页面跳转到某个店铺的时候，他此刻可能是想看看
- 在使用Dreamweaver制作主页的时候往往需要改变表格的高度。然而有时当我们拖动表格的边框，无论怎样拖动，等到放下鼠标，表格却又恢复到原
- 之前有看过一个博文写的是白社会的设计很好但运营却有些遭，因为对每一个WebGame的推出时间把握不准，会有几个应用同时上线造成影响力的冲突，
- HTML 的空白符处理规则HTML 中的“空白符”包括空格 (space)、制表符 (tab)、换行符 (CR/LF) 三种。我们知道，在默
- 在ASP中，FSO的意思是File System Object，即文件系统对象。
- 以查询前20到30条为例,主键名为id 方法一: 先正查,再反查 select top 10 * from (select top 30 *
- 定义流的作用是使用统一的方式处理文件、网络和数据压缩等共用同一套函数和用法的操作。简单而言，流是具有流式行为的资源对象。因此，流可以线性读写
- asp之家注：学习javascript(js),免不了要用到打开新窗口，方法很多，总的来说是使用window.open。不同与HTML中的t
- jQuery居然都没有JSON的decode和encode，精确类型判断也没有，囧……自己动手写吧！不过这些东西在网上都已经有很好的版本了，
- 开门见山，直接以例子介绍： 代码如下:CREATE TABLE [dbo].[course]( [id] [int] NULL,
- 1 逻辑数据库和表的设计数据库的逻辑设计、包括表与表之间的关系是优化关系型数据库性能的核心。一个好的逻辑数据库设计可以为优化数据库和应用程序
