实现如图效果,页面下滑时,搜索框一直显示在页面顶端。
引入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}); } }); });