/***@author大漠雪狼**//********************************可配置选项********************************///被选中的相似关键字
问题描述/***@author大漠雪狼**//********************************可配置选项********************************///被选中的相似关键字背景颜色varselectedBgColorcompany="#CCCCCC";//未被选中的相似关键字背景颜色varunselectedBgColorcompany="#FFFFFF";//相似关键字框的边框varlistBordercompany="1solid#000000";/***************************************************************************//********************************不可配置选项********************************///上一次输入的关键字（用来判断关键字是否有改变，没有则不再去服务端重新获取提示关键字）varoldKeyV//鼠标相对于提示关键字列表框的位置（0：提示框外面，1：提示框里面）varmouseLocationcompany=0;//当前选中的提示关键字索引（从0开始，等于-1表示没有被选中项）varselectedKeyIndexcompany=-1;//上一次选中的提示关键字索引（从0开始，等于-1表示没有上次被选中项）varoldSelectedKeyIndexcompany=-1;//提示关键字总数vartdCountcompany=0;/***************************************************************************//*用途：给String对象添加去除左右空格方法*/String.prototype.trim=function(){varm=this.match(/^s*(S+(s+S+)*)s*$/);return(m==null)?"":m[1];}/*用途:初始化提示关键字列表框的状态*/functioninitKeyListState(){selectedKeyIndexcompany=-1;oldSelectedKeyIndexcompany=-1;tdCountcompany=0;}/*用途:将上一次选中的关键字项变为未选中*/functiondisSelectedOldKey(){//判断说明：oldSelectedKeyIndex!=selectedKeyIndexcompany//当只有一个相似关键字的时候，则不存在上一次选中和这次选中关键字，//只要第一次选中后，按向上或向下箭头都是选中。if(oldSelectedKeyIndexcompany!=-1&&oldSelectedKeyIndexcompany!=selectedKeyIndexcompany){document.getElementById('keyIdcompany'+oldSelectedKeyIndexcompany).bgColor=unselectedBgC}//上一次选中项更新vardiv=document.getElementById("guestlistDiv");oldSelectedKeyIndexcompany=selectedKeyI//////alert(div.scrollTop);//////vardivobj=document.getElementById("guestlistDiv");////divobj.innerHTML=divobj.innerHTML+document.getElementById("showGuestList").value+"&br&"//divobj.scrollTop=divobj.scrollHeight-divobj.offsetH////////varscrolltop=document.documentElement.scrollT//////document.documentElement.scrollTop=scrolltop+1;//}/*用途:当按上下箭头时选中新的提示关键字项，按回车时将选中的提示关键字输入到搜索框。*/functionsetSelectedKey(){//$('keyId0')存在表示有相关提示关键字，不存在则不处理。if(document.getElementById('keyIdcompany0')){if(event.keyCode==38){//------处理向上事件------if(selectedKeyIndexcompany==-1){selectedKeyIndexcompany=tdCountcompany-1;}else{selectedKeyIndexcompany=(selectedKeyIndexcompany+tdCountcompany-1)%tdC}document.getElementById('keyIdcompany'+selectedKeyIndexcompany).bgColor=selectedBgCdisSelectedOldKey();}elseif(event.keyCode==40){//------处理向下事件------if(selectedKeyIndexcompany==-1){selectedKeyIndexcompany=0;}else{selectedKeyIndexcompany=(selectedKeyIndexcompany+1)%tdC}document.getElementById('keyIdcompany'+selectedKeyIndexcompany).bgColor=selectedBgCdisSelectedOldKey();}elseif(event.keyCode==13){//------处理回车事件------document.getElementById('saler').value=document.getElementById('keyIdcompany'+selectedKeyIndexcompany).innerTsetCursorLast(document.getElementById('saler'));//隐藏提示关键字列表框document.getElementById('guestlistDiv').style.display='none';document.getElementById('ExfundcompanynameSearchIframe').style.display='none';}}}/*用途:获取相似关键字*/functiongetConformKey(){varkeyValue=document.getElementById('saler').value.trim();//如果这次的查询关键字和上次的一样，则不去服务器重新获取相似关键字列表。if(keyValue!=oldKeyValuecompany){//关键字为空则不去服务器获取相似关键字列表if(keyValue==''){dwr.util.removeAllRows('showGuestList');setDropListVisible(false);initKeyListState();}else{//采用ajax异步模式获取相似关键字GuestBO.findAllName(keyValue,conformKeyCallback);}}}/*用途:获取关键字回调方法*/functionconformKeyCallback(keyList){dwr.util.removeAllRows('showGuestList');initKeyListState();if(keyList.length&0){//生成相似关键字提示框dwr.util.addRows('showGuestList',keyList,cellFuncs,{cellCreator:function(options){vartd=document.createElement("td");td.id='keyIdcompany'+tdCountcompany++;td.onmouseover=function(){selectedKeyIndexcompany=parseInt(this.id.substring(12,td.id.length));this.bgColor=selectedBgCdisSelectedOldKey();};td.onclick=function(){document.getElementById('saler').value=this.innerTdocument.getElementById('saler').focus();setCursorLast(document.getElementById('saler'));GuestBO.getSearchName(this.innerText,callbaskguest);document.getElementById('guestlistDiv').style.display='none';document.getElementById('ExfundcompanynameSearchIframe').style.display='none';};},escapeHtml:false});setDropListVisible(true);}else{setDropListVisible(false);}}functioncallbackcode(data){varobjSelect=document.myform.if(data!=null){objSelect.length=0;for(vari=0;i&data.i++){varvarItem=newOption(data[i].contractcode,data[i].contractcode);objSelect.options.add(varItem);}}else{varvarItem=newOption('无',0);objSelect.options.add(varItem);}}functionSearchContract(){varobjSelect=document.myform.varisContract=document.myform.isCif(isContract.checked){document.getElementById('contractno').disabled=varsaler=document.getElementById('saler').contractJS.getcontractcode(saler,callbackcode);document.myform.isContract.value=1;}if(!isContract.checked){document.myform.isContract.value=0;document.getElementById('contractno').disabled=document.all("contractno").options.length=0;}}functionclearcompanyname(){varnames=document.myform.saler.GuestBO.findAllName(names,callbackscompany);}functioncallbackscompany(keyList){if(keyList==0){document.myform.saler.value='';}}functioncallbaskguest(data){if(data!=null){document.myform.saler.value=data.document.all("contractno").options.length=0;document.getElementById('contractno').disabled=document.getElementById('isContract').checked=}}/*用途:表格数据显示处理方法*/varcellFuncs=[function(data){}];/*用途:将输入框的光标移到最后*/functionsetCursorLast(inputObj){varinputRange=inputObj.createTextRange();inputRange.collapse(true);inputRange.moveStart('character',inputObj.value.length);inputRange.select();}/*用途:创建相似关键字列表框*/functioncreateShowDiv(){varshowIframeeExfundcompanyname=document.createElement("iframe");showIframeeExfundcompanyname.id="ExfundcompanynameSearchIframe";with(showIframeeExfundcompanyname.style){varoRect=document.getElementById('saler').getBoundingClientRect();left=oRect.top=oRect.top+20;//left=300;//top=300;width=283;border=listBzIndex="1";position="absolute";display='none';backgroundColor=unselectedBgC}showIframeeExfundcompanyname.onmouseover=function(){mouseLocation=1;};showIframeeExfundcompanyname.onmouseout=function(){mouseLocation=0;};document.body.appendChild(showIframeeExfundcompanyname);varshowDiv=document.createElement("div");showDiv.id="guestlistDiv";with(showDiv.style){varoRect=document.getElementById('saler').getBoundingClientRect();left=oRect.top=oRect.top+20;//left=300;//top=300;width=283;border=listBzIndex="1";position="absolute";display='none';backgroundColor=unselectedBgC}showDiv.onmouseover=function(){mouseLocationcompany=1;};showDiv.onmouseout=function(){mouseLocationcompany=0;};showDiv.innerHTML="&divstyle='width:100%;height:150overflow:'&&tableborder='0'style='width:100%;font-size:12;'&&tbodyid='showGuestList'style='color:#000000;margin-left:0;margin-right:0;margin-bottom:0;margin-top:0;'&&/tbody&&/table&&/div&";document.body.appendChild(showDiv);initKeyListState();}/*用途:设置相似关键字列表框是否可见参数：isDisplay，true表示可见，false表示不可见*/functionsetDropListVisible(isDisplay){if(mouseLocationcompany==1){}if((document.getElementById('saler').value.trim()!='')&&(isDisplay==true)){document.getElementById('guestlistDiv').style.display='';document.getElementById('ExfundcompanynameSearchIframe').style.display='';}else{document.getElementById('guestlistDiv').style.display='none';document.getElementById('ExfundcompanynameSearchIframe').style.display='none';}}functiongetPosLeft(obj){varl=obj.offsetLwhile(obj=obj.offsetParent){l+=obj.offsetL}}functiongetPosTop(obj){varl=obj.offsetTwhile(obj=obj.offsetParent){l+=obj.offsetT}}解决方案解决方案二：上面是导入的js页面&inputtype="text"id="saler"name="saler"class="wenziyu2"size="25"autocomplete="off"onKeyDown="oldKeyValuecompany=this.value.trim();setSelectedKey();"onKeyUp="getConformKey();"onFocus="createShowDiv();setDropListVisible(true);"onBlur="setDropListVisible(false);clearcompanyname();"style="width:280;height:20;z-index:10;top:0;left:0;"想要加入选中层的内容按上下键时滚动条随着光标移动，上面的还有很多小bug高手帮忙修改下
【云栖快讯】数据库技术天团集体亮相，分享一线生产实践经验，告诉你踩过的坑、走过的路，都是老司机，靠谱！干货分享，不可错过！&&
弹性可伸缩的计算服务，助您降低 IT 成本，提升运维效率
稳定可靠、可弹性伸缩的在线数据库服务，全球最受欢迎的开源数据库之一
6款热门基础云产品6个月免费体验；2款产品1年体验;1款产品2年体验
开发者常用软件，超百款实用软件一站式提供10265人阅读
javascript（4）
div在顶部不变、滚动条滚动，div还是在顶部！
直接上传源码 了：
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd &&
&html xmlns=&http://www.w3.org/1999/xhtml &&
&title&div浮层，滚动条移动，保持位置不变&/title&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&style type=&text/css&&
body{background-image:url(about:blank);background-attachment:}
#float{width:344height:34border:1px solid #C0DBF8;position:top:0}
&div id=&float& &ddd&/div&
&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&
&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&
&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&
&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&
&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&
&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&
&script type=&text/javascript&&
var IO=document.getElementById('float'),Y=IO,H=0,IE6;
IE6=window.ActiveXObject&&!window.XMLHttpR
while(Y){H+=Y.offsetTY=Y.offsetParent};
IO.style.cssText=&position:top:(this.fix?(document.documentElement.scrollTop-(this.javascript||&+H+&)):0)&;
window.onscroll=function (){
var d=document,s=Math.max(d.documentElement.scrollTop,document.body.scrollTop);
if(s&H&&IO.fix||s&=H&&!IO.fix)
if(!IE6)IO.style.position=IO.fix?&&:&fixed&;
IO.fix=!IO.
try{document.execCommand(&BackgroundImageCache&,false,true)}catch(e){};
&body topmargin=&0& bottommargin=&0& leftmargin=&0& rightmargin=&0& style=&overflow:&&
&!-- div来实现 --&
&div style=&width: 100%; height: 100%; overflow:&&
&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&
&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&
&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&
&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&
&div style=&border: 1 width: 300 height: 300margin:-150px 0 0 -150 position: left: 50%; top: 50%;&&
&body topmargin=&0& bottommargin=&0& leftmargin=&0& rightmargin=&0& style=&overflow:&&
&!-- iframe来实现
&iframe src=&http://www.csdn.net/& width=&100%& height=&100%& frameborder=&0&&&/iframe&
&div style=&border: 1 width: 300 height: 300margin:-150px 0 0 -150 position: left: 50%; top: 50%;&&
方法四：[采用css来居中]
&style type=&text/css&&
html,body {height:100%; margin:0 font-size:12}
background-color: #f9fff6;
border: 1px solid #009900;
text-align:
line-height: 25
font-size: 13
font-weight:
z-index:99;
width: 300
height: 50
left:50%;/*FF IE7*/
top:50%;/*FF IE7*/
margin-left:-150px!/*FF IE7 half of its width */
margin-top:-60px!/*FF IE7 half of its height*/
margin-top:0
position:fixed!/*FF IE7*/
position:/*IE6*/
expression(patMode &&
patMode=='CSS1Compat') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
&script language=&javascript& type=&text/javascript&&
function showDiv(){
document.getElementById('popDiv').style.display='block';
window.onload=function(){
showDiv();
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&title&始终在中间DIV (支持IE FF)&/title&
&div id=&popDiv& class=&mydiv& style=&display:&&始终在中间&br/&
&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&&br/&
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：529453次
积分：4514
积分：4514
排名：第6485名
原创：81篇
评论：77条
(1)(1)(1)(1)(69)(8)(1)(1)如何让DIV固定在页面的某个位置
我的图书馆
如何让DIV固定在页面的某个位置
利用JavaScript脚本，从浏览器中获取各个关于位置的参数，然后将其计算后，定位在窗体的右下角。可以承认，这个方法确实是比较自然的想法，也是很常见的方法，但是这样的方法有以下几个缺点：
1、使用了大量的计算，每次滚动，都少不了一大堆的运算。
2、使用了JavaScript脚本，脚本这东西受到浏览器的限制，即便没有限制，也同样因为网页的下载模式问题，可能因为脚本下载未完成或者下载失败而致使脚本无法正确运行。
3、条条大路通罗马，但是看看那方块，当快速滚动滚动条的时候，会发现那个可爱的方块抖动地厉害。这也难怪，那么多的计算谁能受得了？
那有没有比较“平静”高效的表示方式呢？比如是否有一种用CSS的方式呢？
首先，我们将目光投向了CSS规范，我想很多人和我一样很快就想到了属性，说到定位，我们很容易想到这个属性。这个属性一共有四个选项：static、relative、absolute、fixed（）。很高兴，我们在阅读了相关的注释后，我们大概能看到fixed是比较符合我们的需求的：
位置被设置为&fixed&的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过&”left”、”top”、”right”&以及”bottom”&属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于&IE7（strict&模式）。
于是我们很快就有了以下的代码，不过很遗憾，IE中并不能通过严格的测试，但是FireFox中却可以通过测试！
&html&&head&&!––&&title&Only&fit&FireFox!&&:(&/title&&!–Some&thing&about&the&fixed&style!–&&style&type=”text/css”&.fixed_div{position:left:200bottom:20width:400}&/style&&/head&&body&&div&class=”fixed_div”&style=”border:1px&solid𱂸”&content,&I’m&content&/div&&div&style=”height:888”&&/div&&/body&&/html&
不管上面上面说的IE7的strict模式，很显然，除了IE7，我们的挑战还有包括IE6在内的一大堆未知的因素。很显然，虽然这个方法通过了FireFox，但我们还是宣告失败了。
难道我们只能使用JavaScript让这一切继续“卡”下去么？（我指的是用JavaScript的时候效果很卡）
当然不行，我们的症结究竟在哪？我们该如何去解除它呢？带着这样的郁闷，我们需要开始新的探险。
HTML究竟是啥？
这个问题换在别的地方问，您可能要搬出一大堆的文档来告诉我HTML的定义，但这里我并不需要那么完整的答案。我们知道HTML是由一大堆的&tag&&/tag&组成的，而这一大堆的&tag&&/tag&组合在一起，它们的结构就像一棵树，是的，HTML的代码就是被解释为了一棵树被浏览器所认识。它有一个根，那就是&html&&/html&节（root），在根节点下常见的节点中，我们通常能见到&head&&/head&和&body&&/body&两个节点，它们之下又有……
现在回顾一下我们的问题，我们的问题是我们滚动滚动条的时候我们希望其中的一个指定的div不会跟着滚动条滚动。
那么下面让我们来回答另一个问题，啥是滚动条？
滚动条，顾名思义，就是可以滚动的条（ScrollBar）（废话）。准确地说，滚动条通常是我们在页面的内容超过了浏览器显示框的范围的时候，为了能够让有限的空间展示无限的内容所作出的一个妥协的元素，使用它可以让我们查看当前页面内容之外部分的内容。
说到这里您估计都还很清楚，但既然我说滚动条也是一个元素，那么它是不是也在我们的HTML中呢？又或者它是浏览器的固有的一部分？
如果您觉得它是HTML中的一部分，那么您就对了，因为它是依附容器而存在的，而默认产生滚动条的容器是&body&&/body&或者&html&&/html&节，它并不是浏览器固有的一部分，浏览器只是默认完整展示了一整个html文档，并不知道它中间的内容究竟是否需要滚动条的支持。
那么让我们回顾上面的那几行代码吧，假设fixed对您当前（失败）的浏览器无效的话，那么我们来看看它们的结构，外面是html标签，向内是body标签，再向内则是div标签，div标签很明显是它们的一部分，这样假设我们的div标签所设置的定位属性无论如何（四个可能的属性皆没起到什么作用）改变不了自身显示状况。我们能否更换一个思路呢？
刚才我说了，滚动条是容器所固有的，不管是外面那个滚动条，还是里面那个滚动条。那么我能否让这个需要固定的div和那个body或者html容器脱离关系呢？
看到滚动条的控制可以通过CSS的的几个属性来控制，想必大家都不陌生了。（陌生的朋友点击相关链接即可进入查看）
那么我是否可以自己设置两个完全隔离的div来模拟这种场景呢？（虽说是模拟，但是效果一模一样噢～）
&html&&head&&title&&/title&&style&type=”text/css”&
html,body&{overflow:margin:0width:100%;height:100%;}
.virtual_body&{width:100%;height:100%;overflow-y:overflow-x:}
.fixed_div&{position:z-index:2008;bottom:20left:40width:800height:40border:1px&solid&background:#e5e5e5;}&/style&&/head&
&body&&div&class=”fixed_div”&I&am&still&here!&/div&&div&class=”virtual_body”&&div&style=”height:888”&I&am&content&!&/div&&/div&&/body&&/html&
html,body：将默认可能会随机出现的滚动条，完全地隐藏了，这样不管您放了啥内容，它们都不会出来了。
.virtual_body：顾名思义，就是一个假的body了，它被设置为长宽都为100%的，意思就是它利用了所有可视的浏览器窗体显示所有的内容，并垂直允许出现滚动条。
.fixed_div：这下它可以利用绝对值进行定位了，因为在这个场景下，这个页面100%地被那个假冒的body给独霸了，而滚动条反正也出不来，您就可以自认为是在某个点蹲坑了，绝对安全。
想必您通过这些代码已经了解了新的方法不过是将一个div换作了之前的body。
通过这篇文章，希望您能解决这个问题，更深入一点，希望您能够对HTML的具体内容有更深刻地理解
TA的最新馆藏[转]&[转]&[转]&
喜欢该文的人也喜欢