菜鸟学习日记:关于scolltop的问题

原创 2013年12月03日 11:56:23

问题情况:“当滚动条滚动到一定scolltop值的时候去浮动或者取消浮动某些元素”我实现了这种效果,但是我将代码写死了,我指定了固定的滚动条scolltop数值,当网页内容发生

改变,比如网页内容没有那么大的scolltop值的时候,则会出现不理想的情况。所以要实现根据网页内容变化动态改变该scolltop值的效果。


解决方法:
1.获取页面的高度
2.获取浏览器能看到的那部分的高度
3.获取到达底端时的scolltop 只要获取$(document).height()-$(window).height()  
4,减去你想浮动的元素离底端的高度值(因为我想浮动的元素在离底端比较近)

写死了的代码:

	//滚动条事件
	$(window).scroll(function() {		
		if($(window).scrollTop() >= 227){	//指定了scolltop值
			$('.c-main-right-tootbar').addClass('fix'); 
		}
		else{    
			$('.c-main-right-tootbar').removeClass('fix');  
		}
		  
	});




代码:

	//获取浏览器高度
	function getWindowHeight(){	
		return $(window).height();
	}
	//获取document的高度
	function getDocumentHeight(){	
		return $(document).height();
	}
	
	
	$(window).scroll(function() {	
	$('.txt').html("<span style='color:red;'>'"+$(window).scrollTop()+"'</span>");
		if($(window).scrollTop() <= getDocumentHeight()-getWindowHeight()-148){
			$('.c-footer').addClass('fix2');	//使元素浮动
		}
		else{    
			$('.c-footer').removeClass('fix2');    //取消元素浮动
		}
		  
	});






scrollTop:在JavaScript中获取当前页面的滚动位置

要获取当前页面的滚动条纵坐标位置,用:document.documentElement.scrollTop;而不是:document.body.scrollTop;documentElement 对应...
  • qsdnet
  • qsdnet
  • 2007-02-13 13:49:00
  • 11865

花点时间搞清top、postop、scrolltop、scrollHeight、offsetHeight

.STYLE1 { font-size: 14px; color: #000099; font-weight: bold;}function runCode(obj){ var winTemp = w...
  • wayne23
  • wayne23
  • 2007-01-19 15:31:00
  • 24436

scrollTop是什么及用法说明

scrollTop属性是什么?有些情况下,“元素中内容”的高度会超过“元素本身”的高度, scrollTop指的是“元素中的内容”超出“元素上边界”的那部分的高度。通过一个实例演示来讲述scrollT...
  • gang_gang_gang
  • gang_gang_gang
  • 2009-06-01 14:49:00
  • 31363

js返回网页顶部 scrollTop用法

document.body.scrollTop用法 网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeigh...
  • lanse_my
  • lanse_my
  • 2013-10-06 10:07:34
  • 43015

position().top和scrollTop()和.offset()

afasdfasdf       afasdfasdf       afasdfasdf       afasdfasdf       afasdfasdf       afasdfasdf     ...
  • qq_36026721
  • qq_36026721
  • 2016-10-13 22:45:31
  • 1332

学习日记18

今天上午看了看树状数组的题。求在一个区间内,约数对的个数。这个题是  单点更新,区间求和的应用。不过不是简单的那种,而是需要算许多个和,再进行加减运算。并且,在放入树状数组的时候,需要把放入这个数的所...
  • a1046765624
  • a1046765624
  • 2017-08-19 17:51:56
  • 75

学习日记(6)——发现问题!

         最近些日子学习没什么进展——我们遇到难题了,老师始终都没来。问题被搁了下来……        在网上探索了好些天都找不到相应的出来办法,始终都不能解决图像矫正的问题……这个问题解决不...
  • longlongago2000
  • longlongago2000
  • 2007-08-30 17:21:00
  • 683

html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth  scrollHeight: 获取对象的滚动高度。  scrollLeft:设置或获...
  • u013795673
  • u013795673
  • 2016-08-10 14:49:48
  • 6683

JS中offset<em>Top</em>、client<em>Top</em>、scroll<em>Top</em>、offset<em>Top</em>各属性介绍

Js中 关于<em>top</em>、client<em>Top</em>、scroll<em>Top</em>、offset<em>Top</em> 立即下载 上传者: 那猫小帅 时间: 2008-06-08 综合评分: 3 积分/C币:3 Js中_关于<em>top</em>、client<em>Top</em>、scroll...
  • 2018年04月14日 00:00

10月22日Ajax培训日记

今天还是由梁言兵老师讲解Ajax,根据昨天学员的反馈,觉得AjaxTable这个项目太大了,学习起来有点费劲,希望梁老师讲一个较小的综合案例。所以,梁老师先讲解XTree这个客户端JavaScript...
  • zhangxiaoxiang
  • zhangxiaoxiang
  • 2006-10-23 18:21:00
  • 2401
收藏助手
不良信息举报
您举报文章:菜鸟学习日记:关于scolltop的问题
举报原因:
原因补充:

(最多只允许输入30个字)