`

如何制作随滚动条滚动的DIV

JavaScriptXHTMLHTML 
阅读更多

需要做页面的快捷菜单，原则上想做成在第一屏初始在一个位置，当滚动条向下拉时，进入第二屏往下该DIV层自动滚动至屏幕相对的初始位置。在网上查找了相关资料，仅勉强可用，摘抄如下。

随滚动条移动的DIV层(正中、左上、左下、右上、右下)

<!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>
<TITLE>随滚动条移动的层 - www.chinaz.com</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html" charset="gb2312">
<META NAME="Author" CONTENT="haiwa">
<META NAME="homepage" CONTENT="www.chinaz.com">
</HEAD>
<style>
<!--
.div{
position: absolute;
border: 2px solid red;
background-color: #EFEFEF;
line-height:90px;
font-size:12px;
z-index:1000;
}
-->
</style>
<BODY>
<div id="Javascript.Div1" class="div" style="width: 240px; height:90px" align="center">正中...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc1(){
document.getElementById("Javascript.Div1").style.top=(document.documentElement.scrollTop+(document.documentElement.clientHeight-document.getElementById("Javascript.Div1").offsetHeight)/2)+"px";
document.getElementById("Javascript.Div1").style.left=(document.documentElement.scrollLeft+(document.documentElement.clientWidth-document.getElementById("Javascript.Div1").offsetWidth)/2)+"px";
}
</SCRIPT>


<div id="Javascript.Div2" class="div" style="width: 240px; height:90px" align="center">左上...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc2(){
document.getElementById("Javascript.Div2").style.top=(document.documentElement.scrollTop)+"px";
document.getElementById("Javascript.Div2").style.left=(document.documentElement.scrollLeft)+"px";
}
</SCRIPT>

<div id="Javascript.Div3" class="div" style="width: 240px; height:90px" align="center">左下...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc3(){
document.getElementById("Javascript.Div3").style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div3").offsetHeight)+"px";
document.getElementById("Javascript.Div3").style.left=(document.documentElement.scrollLeft)+"px";
}
</SCRIPT>

<div id="Javascript.Div4" class="div" style="width: 240px; height:90px" align="center">右上...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc4(){
document.getElementById("Javascript.Div4").style.top=(document.documentElement.scrollTop)+"px";
document.getElementById("Javascript.Div4").style.left=(document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div4").offsetWidth)+"px";
}
</SCRIPT>

<div id="Javascript.Div5" class="div" style="width: 240px; height:90px" align="center">右下...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc5(){
document.getElementById("Javascript.Div5").style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div5").offsetHeight)+"px";
document.getElementById("Javascript.Div5").style.left=(document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div5").offsetWidth)+"px";
}
</SCRIPT>


<SCRIPT LANGUAGE="JavaScript">
<!--
function scall(){
sc1();sc2();sc3();sc4();sc5();
}
window.onscroll=scall;
window.onresize=scall;
window.onload=scall;
//-->
</SCRIPT>
<div style="position: absolute; top: 0px; left: 0px; width: 10000px; height: 4000px;"></div>
</BODY>
</HTML>

分享到：
| 晕头转向的浏览器们
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    div随滚动条上下滚动

    在网页设计中，"div随滚动条上下滚动"是一种常见的动态效果，通常用于实现固定定位或者跟随滚动的视觉效果。这种效果可以通过JavaScript库jQuery和原生JavaScript来实现，以增加用户体验，使某些元素如导航栏、侧...

    不随滚动条滚动而滚动的浮动效果

    不随滚动条滚动而滚动的浮动效果 在网页设计中，实现浮动效果是非常常见的需求之一。浮动效果可以使得网页元素在浏览器窗口中固定不动，或者跟随滚动条的滚动而移动。本篇文章将介绍如何实现不随滚动条滚动而滚动的...

    网页局部div随滚动条置顶滚动

    网页局部div随滚动条置顶滚动是一种常见的网页交互设计，常用于新闻网站、电商页面或者任何需要突出显示特定内容的场景。这种效果使得用户在滚动页面时，某个div元素（通常包含重要信息或导航）始终保持在视口顶部，...

    随滚动条移动的DIV层

    在网页设计与开发过程中，为了提高用户体验以及页面的交互性，常常会遇到需要制作一个随滚动条移动的元素（如提示框、广告栏等）。本文将通过分析一段具体的代码示例，详细介绍如何利用HTML、CSS及JavaScript技术...

    随滚动条滚动的div js代码

    NULL 博文链接：https://spring036765.iteye.com/blog/775351

    div不随滚动条的移动而改变位置

    标题"div不随滚动条的移动而改变位置"所指的问题是关于如何实现一个固定定位（fixed positioning）的 `div` 元素。这种效果使得 `div` 在页面上保持在一个特定位置，即使用户滚动页面，它也不会移动。这通常用于创建...

    浮动div，页面两边滚随滚动条滚动的DIV

    在本案例中，"页面两边滚随滚动条滚动的DIV"是指一种特殊的效果，即一个div元素会随着用户滚动页面而始终保持在屏幕的一侧可见，这样的设计可以用来显示重要的导航栏或者侧边栏信息。 要实现这种效果，通常需要结合...

    js 随鼠标滚动条滚动的div

    "&gt;我是随滚动条滚动的div&lt;/div&gt; ``` 接下来，我们需要监听滚动事件。在JavaScript中，可以使用`addEventListener`方法绑定`scroll`事件。当用户滚动页面时，该事件会被触发。 ```javascript document....

    JQuery 随鼠标滚动条滚动的div

    &lt;div id="fixedDiv"&gt;我是一个随滚动条移动的div&lt;/div&gt; &lt;!-- 填充一些内容以产生滚动 --&gt; 这里是大量的内容…… $(document).ready(function() { var $fixedDiv = $('#fixedDiv'); var initialTop = $...

    纯css控制内容随滚动条滚动，可放任意位置

    标题“纯css控制内容随滚动条滚动，可放任意位置”以及描述中的“纯CSS实现客服悬浮窗，随浏览器滚动而滚动。可任意自定义位置。代码简洁易懂。兼容一切主流浏览器”都指向了这一技术——固定定位（fixed ...

    如何让DIV固定在页面的某个位置而不随着滚动条随意滚动

    "让DIV固定在页面的某个位置而不随着滚动条随意滚动" 在前端开发中，我们常常需要让某个DIV元素固定在页面的某个位置，而不随着滚动条的滚动而移动。这可以通过使用CSS的position属性来实现，特别是使用fixed值。...

    div不随滚动条的滚动而动 可以兼容到IE6

    在网页设计中，"div不随滚动条的滚动而动"是一种常见的布局需求，通常用于创建固定定位元素，如顶部导航栏、侧边栏或浮动提示框等。这些元素需要在用户滚动页面时始终保持在屏幕的某个特定位置，提供持续的可访问性...

    Div滚动条随鼠标滚动Jquery版（转）

    Div滚动条随鼠标滚动Jquery版（转）Div滚动条随鼠标滚动Jquery版（转）

    Div滚动条随鼠标滚动js版（由网友JQuery版改写而成）

    在网页设计中，有时我们需要对特定的`div`元素实现自定义滚动条的效果，以便增强用户体验。本项目提供了一个JavaScript版本的解决方案，该方案最初基于jQuery实现，经过修改后适用于纯JavaScript环境，解决了在IE8...

    jQuery控制div实现随滚动条滚动效果

    jQuery控制div实现随滚动条滚动效果是Web前端开发中常见的一个功能，涉及到了JavaScript事件处理、动画制作等技术点。通过对这些技术的掌握和应用，可以增加页面的互动性和用户的体验感。实现这一效果的方法不止一种...

    简易的jquery层随滚动条移动

    本教程将详细讲解如何使用jQuery实现一个简单的层（div）随滚动条移动的效果。 首先，我们需要理解jQuery的基本概念。jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等...

    div随着滚动条滚动，但是到了顶部，便不随着滚动了

    ### div随着滚动条滚动，但是到了顶部，便不随着滚动了 #### 背景介绍 在网页设计中，有时我们需要让某个元素（如`&lt;div&gt;`）在页面滚动时保持固定的位置，或者达到特定位置后固定不动。这种效果常用于导航栏、侧边栏...

    不随滚动条滚动的模式窗口

    在网页设计和开发中，"不随滚动条滚动的模式窗口"是一种常见的用户体验设计技术，它允许用户在当前页面上打开一个全屏或半屏的弹出窗口，而这个窗口不会随着页面的滚动条移动。这种效果常用于图片预览、表单填写、...

    DIV随滚动条滚动而滚动的实现代码【推荐】

    在网页设计中，有时我们...本文将详细讲解如何利用jQuery实现`DIV`随滚动条滚动的效果。 首先，我们需要引入jQuery库。在HTML文件中，我们可以在`&lt;head&gt;`部分添加如下代码来引用jQuery 1.7.2的最小化版本： ```html ...

    qq客服随滚动条滚动

    【标题】"qq客服随滚动条滚动"是一个关于网页设计和JavaScript实现的专题，主要涉及到的是如何让网页上的QQ客服窗口随着用户滚动页面而始终保持在视野范围内。这通常是为了提供更好的用户体验，确保用户在浏览网站时...

Magicbox
Global site tag (gtag.js) - Google Analytics