菜鸟学习日记:关于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菜鸟学习日记12

从Servlet向JSP/Servlet传数据、绝对路径和相对路径、JNDI(Java Naming and Diectory Interface)、XML、从Servlet向JSP/Servlet传...

Java菜鸟学习日记1

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

Java菜鸟学习日记18

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

Java菜鸟学习日记17

SQL模糊匹配 适用于对字符串惊醒模糊搜索 字段名 like '%关键词%' %:表示该位置可以有任意个字符或无字符 %关键词%:只要包含关键词就可以 %关键词:以关键词结尾...

Java菜鸟学习日记4

流程分支、switch/case/default、方法(method)、设计师要考虑最重要的事:起名字!、提取方法、static(静态的)、程序调试、异常处理与调用栈(try/catch/finall...

对于c,入个门!【菜鸟学习日记】

学习记录第一篇记录!!! “hello,word!"之类的入门太多了,就不写了。 今天就整理一下一些入门级别的小知识,是之前我这种小菜鸟不会的。 1、注释 一个小细节,以前也从不注意的点,但是自己不知...

JAVA菜鸟学习日记——简单代码实现IOC控制反转

原来校招时候的时候刷过一道题——写段代码实现控制反转,现在终于有了些思路~自己留念,同时分享给大家。

Java菜鸟学习日记10

重定向、转发、附加Tomcat源代码、接口、Servlet接口、Session、Cookie机制、Filter

Java菜鸟学习日记8

CSS布局、Tomcat
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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