当滚动条滚到一定距离,div实现实现效果

 1 window.onscroll=function  () {
 2     var sTop=document.body.scrollTop;
 3     var WH=document.body.clientHeight;
 4     var con=document.getElementById(‘con‘);
 5     var dTop=con.offsetTop;
 6
 7     if (sTop>=dTop-(WH-100)) {
 8         //执行动画
 9     };
10 }
时间: 2024-10-26 10:29:42

当滚动条滚到一定距离,div实现实现效果的相关文章

JS实现滚动条滚到页面距离底部300px时执行事件的方法

scrollTop为滚动条在Y轴上的滚动距离. clientHeight为内容可视区域的高度. scrollHeight为内容可视区域的高度加上溢出(滚动)的距离 $(window).scroll(function(){ var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); if(scrollHeight-scrollTo

笔记-[js兼容]-滚动条的滚动距离的兼容性问题解决方法。

在我们操作JS实现些效果的时候,可能会涉及到滚动条滚动距离的问题; 在IE和非IE下是存在兼容性问题的 在IE下支持:document.body.scrollTop(scrollLeft);//在ie下获取滚动条距离的属性 在非IE下支持:document.documentElement.scrollTop(scrollLeft);//在非ie下获取滚动条距离的属性 代码兼容: var scrollTop;//定义一个变量名为scrollTop为滚动条的距离 滚动高度 :  var scroll

随滚动条滚动的居中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"> --> <!DOCTYPE> <<html&g

滚动条超过一定距离, 导航栏悬浮在最上方

window.onload = function(){ var tabTop = $("#tab_demo .tabBar").offset().top; $(".Hui-article").scroll(function(){ var currentTop = $(this).scrollTop()+94; console.log(currentTop+":"+tabTop); if(currentTop >= tabTop){ var

js动画 无缝轮播 进度条 文字页面展示 div弹窗遮罩效果

1.无缝轮播 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="ser

CSS如何实现div的透明效果

CSS如何实现div的透明效果:在通常情况下设置div的透明度可以使用以下代码: filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; 以上代码可以将div设置为半透明,但是遗憾的是,IE6浏览器并不支持opacity属性. 原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12681 更多内容可以参阅:http://www.softwhy.com/divcss/

如何实现两个div等高效果

如何实现两个div等高效果:在网页实际应用中,可能需要动态的实现两个div的等高效果,当然不仅限于div,例如一个网页分为左右两栏,一栏的高度可能需要根据内容自适应,也就是说高度不是固定的,而另一栏需要和它保持高度一致,那么就需要动态的设置高度.代码实例如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charse

jQuery实现的Div窗口震动效果实例

本文实例讲述了jQuery实现的Div窗口震动效果.分享给大家供大家参考.具体如下: 这是一款jQuery窗口震动效果代码,在Div边框内点击一下鼠标,它就开始震动了,适用浏览器:IE8.360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗等. 运行效果截图如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml

判断滚动条滚到页面底部并执行事件

clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容.而只是单纯的DIV的高度. offsetHeight:是指元素内容的高度.依照上面的,那这个高度呢就是DIV内部的高度,包括可见部分及以滚动条下面的不可见部分. scrollTop:这个是什么呢?他可以理解为滚动条可以滚动的长度. 举例,如果一个DIV高度是400px(即clientHeight为400),而里面的内容是一个很长的列表,内容的高度是1