菜鸟学习日记:关于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');    //取消元素浮动
		}
		  
	});






linux shel l菜鸟学习日记

  • 2009年07月16日 19:39
  • 192KB
  • 下载

java菜鸟学习日记1 java类加载器体系结构

在了解java的类加载器体系结构之前,首先要知道java的安全模型,在jdk1.0和jdk1.1中java的安全模型被称作”沙箱(sandbox)“通过定义这样一个用户可配置的保护域来实现代码的安全性...

Java菜鸟学习日记1

Java分类详解、Java工具命令详解、Java语言包路径命名规则、常用DOS命令

Java菜鸟学习日记18

SQL关联语句 user 1 张三 1 2 李四 2 3 王五 2 4 赵六 ...

【菜鸟数据库学习日记】从头开始学MySQL(3)

1,数据库规范化

Java菜鸟学习日记19

Flex弹性布局 产生的比较晚,目前在移动网页开发中可以可以使用,而且逐渐成为主流 在桌面网页开发中使用的比较少(主要是桌面浏览器的兼容性问题更加严重) 开启方法: 在容器标签...

初学菜鸟的学习日记——二叉树(JAVA)

package duty; import java.util.TreeMap; /**  * @author Administrator  *  * @param  * @param ...
  • qungede
  • qungede
  • 2014年05月07日 19:18
  • 387

菜鸟学习日记: niceScolltop插件的使用

NiceScolltop插件是用于自定义页面滚动条的插件,我们平常见到的浏览器自带的滚动条,丑得跟他妈似得,能不用就不用。很多时候我们都得搞个漂亮的滚动条 这时候就可以考虑使用这个niceScoll...

【菜鸟数据库学习日记】从头开始学MySQL(2)

1,从表中取得数据    * 返回表中所有行    mysql>SELECT * from your_table;   关键词 WHERE后跟条件,选择返回符合条件的所有行,筛选条件比较运算符后面跟的...

菜鸟shell 脚本学习日记

1、shell 脚本统计当前目录下指定后缀文件行数: 获取当前目录下所有后缀为.txt 文件行数,包含空白行(包括子目录): $find . -name "*.sh" |xargs cat |wc -...
  • cxj415
  • cxj415
  • 2017年11月29日 23:10
  • 16
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:菜鸟学习日记:关于scolltop的问题
举报原因:
原因补充:

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