zoukankan      html  css  js  c++  java
  • 指定元素始终显示在页面顶端的js特效

    实现如图效果,页面下滑时,搜索框一直显示在页面顶端。

    引入jquery之后:

    $(function () { 
    	var ie6 = document.all; 
    	var dv = $('#gdsearch'), st; 
    	dv.attr('otop', dv.offset().top); //存储原来的距离顶部的距离 
    	$(window).scroll(function () { 
    		st = Math.max(document.body.scrollTop || document.documentElement.scrollTop); 
    		if (st > parseInt(dv.attr('otop'))) { 
    			if (ie6) {//IE6不支持fixed属性,所以只能靠设置position为absolute和top实现此效果 
    				dv.css({ 'position': 'absolute', 'top': st,'left':6, 'width':1012 });
    				$('#gdtd').css({'width':1012});
    			} else if (dv.css('position') != 'fixed'){
    				dv.css({ 'position': 'fixed', top: 0 });	
    			} 
    		} else if (dv.css('position') != 'static'){
    			dv.css({ 'position': 'static','top':0,'left':6,'width':1012 });
    			$('#gdtd').css({'width':1012});
    		} 
    			 
    	}); 
    }); 
    
  • 相关阅读:
    Linux 学习
    mac 驱动
    用wubi安装ubuntu
    Eclipse安装Svn
    XML学习
    java集合类总结
    CVS学习
    [转载]java集合类总结
    Servlet学习
    JSP介绍
  • 原文地址:https://www.cnblogs.com/sunyt/p/4355659.html
Copyright © 2011-2022 走看看