建站
咨詢
售后
建站咨詢
新聞中心
怎么用js固定某個(gè)元素，讓它不隨頁(yè)面的滾動(dòng)而滾動(dòng)，始終固定在窗口的某個(gè)位置？
可以把該元素的定位設(shè)置為fixed,該元素就會(huì)始終在那個(gè)位置，不過(guò)要注意IE6下不支持固定定位，兼容IE6可以通過(guò)JS實(shí)現(xiàn),不過(guò)JS實(shí)現(xiàn)的是滑動(dòng)效果，要想在IE6下也實(shí)現(xiàn)固定定位那樣的效果沒(méi)辦法做到。
中陽(yáng)網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),中陽(yáng)網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為中陽(yáng)1000多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的中陽(yáng)做網(wǎng)站的公司定做！
js怎么讓一個(gè)div塊始終保持在頁(yè)面的固定位置，求列子
建議使用css實(shí)現(xiàn)，效果更佳，使用position: fixed，固定定位，具體位置的調(diào)整是用top、left、right、bottom也可以使用margin調(diào)整
css實(shí)現(xiàn)代碼
div?style="position:?fixed;top:100px;?left:?auto;?right:?auto;??bottom:?auto;?"?/div
一般的網(wǎng)站的浮動(dòng)廣告以及浮動(dòng)菜單等可以使用fixed來(lái)實(shí)現(xiàn)，js的話需要計(jì)算位置以及滾動(dòng)條滾動(dòng)時(shí)觸發(fā)事件從而進(jìn)行計(jì)算使用window.onscroll事件代碼如下
HTML部分代碼
div?style="position:absolute;background-color:red;width:?50px;height:?50px;"?id="box"/div
Javascript部分代碼
window.onscroll=function(){
var?box=?document.getElementById("box");
var?t?=?document.documentElement.scrollTop?||?document.body.scrollTop;
box.style.top=t+"px";
}
如何用JS做固定在網(wǎng)頁(yè)中的導(dǎo)航條
使元素固定在網(wǎng)頁(yè)中，不需要用到JS的，只需要用到CSS樣式就可以了。
使用css 中的 ? position:fixed; ?fixed是相對(duì)于瀏覽器的定位，設(shè)置了這個(gè)樣式的元素將不會(huì)隨頁(yè)面滾動(dòng)而改變位置，固定在屏幕中。
如 ：
.classname {
position:fixed;
left:0;
top:0;
z-index:9999;
}
js固定時(shí)間倒計(jì)時(shí)
function?countdown(when,?callback){
//?判斷當(dāng)前時(shí)間
var?now?=?Date.now();
if(when??now){
throw?'開(kāi)始時(shí)間不能小于當(dāng)前時(shí)間';
}
//?如果大于當(dāng)前時(shí)間，則過(guò)了相差的時(shí)間后再執(zhí)行此函數(shù)
else?if(when??now){
setTimeout(function(){
countdown(when,?callback);
},?when?-?now);
}?else{
//?開(kāi)始倒計(jì)時(shí)，這里的邏輯你沒(méi)有描述
}?
}
注意，js的定時(shí)并不是完全準(zhǔn)確的。所有的setXXX之類的延時(shí)函數(shù)都是等計(jì)算機(jī)空閑下來(lái)才會(huì)執(zhí)行
JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)中固定div問(wèn)題
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
加上這個(gè)Doctype頭，瀏覽器就進(jìn)入了standards模式，而不加的話是進(jìn)入quirks模式，可以參考
在標(biāo)準(zhǔn)模式下使用document.body.scrollTop 獲取值， 得到的值始終為0，而如果要想得到希望的結(jié)果，可以通過(guò)document.documentElement.scrollTop來(lái)獲取
要獲取當(dāng)前頁(yè)面的滾動(dòng)條縱坐標(biāo)位置，用：
document.documentElement.scrollTop;
而不是：
document.body.scrollTop;
documentElement 對(duì)應(yīng)的是 html 標(biāo)簽，而 body 對(duì)應(yīng)的是 body 標(biāo)簽。
在標(biāo)準(zhǔn)w3c下，document.body.scrollTop恒為0，需要用document.documentElement.scrollTop來(lái)代替
如果你想定位鼠標(biāo)相對(duì)于頁(yè)面的絕對(duì)位置時(shí)，你會(huì)發(fā)現(xiàn)google里面1000篇文章里面有999.99篇會(huì)讓你使用event.clientX+document.body.scrollLeft，event.clientY+document.body.scrollTop，如果你發(fā)現(xiàn)你的鼠標(biāo)定位偏離了你的想象，請(qǐng)不要奇怪，這是再正常不過(guò)的事情。
ie5.5之后已經(jīng)不支持document.body.scrollX對(duì)象了。
所以在編程的時(shí)候，請(qǐng)加上這樣的判斷
if (document.body document.body.scrollTop document.body.scrollLeft)
{
top=document.body.scrollTop;
left=document.body.scrollleft;
}
if (document.documentElement document.documentElement.scrollTop document.documentElement.scrollLeft)
{
top=document.documentElement.scrollTop;
left=document.documentElement.scrollLeft;
}
當(dāng)前題目：javascript固定,javascript固定函數(shù)
文章來(lái)源：http://fisionsoft.com.cn/article/dsdsjop.html
