html中如何實(shí)現(xiàn)固定在網(wǎng)頁右側(cè)的浮動層-創(chuàng)新互聯(lián)

這篇文章主要介紹了html中如何實(shí)現(xiàn)固定在網(wǎng)頁右側(cè)的浮動層，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比槐蔭網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式槐蔭網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋槐蔭地區(qū)。費(fèi)用合理售后完善，10余年實(shí)體公司更值得信賴。


代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/tupian/20230522/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style type="text/css">
body
{
margin:0px;
padding:0px;
margin-top:60px;
margin-bottom:60px;
}
#div_nav_zone_right
{
position:absolute;
float:right;
z-index:3;
width:120px;
height:100px;
right:0px;
top: 332px;
background-color:#999;
}
#div_nav_zone_right_bottom
{
position:absolute;
float:right;
z-index:3;
width:120px;
height:100px;
right:0px;
top: 532px;
background-color:#CCC;
}
#div_ul
{
position:fixed;
height:50px;
}
ul,li
{
margin:0px;
}
li
{
list-style:none;
}
</style>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript">
$(function()
{
moveDiv(); //頁面初始化執(zhí)行
$(window).scroll(function(){
moveDiv();
moveRightBottomDiv();
});
});
//右側(cè)居中
function moveDiv()
{
var scrollTop = $(document).scrollTop(); //滾動條上端隱藏的高度
var clientHeight = $(window).height(); //網(wǎng)頁內(nèi)容區(qū)高度
//設(shè)置位置為
var hei = $("#div_nav_zone_right").css("height");
hei = hei.replace("px","");
var newPosY = scrollTop + (clientHeight-hei)/2;
$("#div_nav_zone_right").css("top",newPosY+"px");
}
//右側(cè)居下100像素
function moveRightBottomDiv()
{
var scrollTop = $(document).scrollTop(); //滾動條上端隱藏的高度
var clientHeight = $(window).height(); //網(wǎng)頁內(nèi)容區(qū)高度
//設(shè)置位置為
var hei = $("#div_nav_zone_right_bottom").css("height");
hei = hei.replace("px","");
var newPosY = clientHeight + scrollTop - hei - 100;
$("#div_nav_zone_right_bottom").css("top",newPosY+"px");
}
</script>
</head>
<body>
1 <br/>2 <br/>3 <br/>4 <br/>5 <br/>6 <br/>7 <br/>8 <br/>9 <br/>10 <br/>
<p>sd</p>
<p>f</p>
<p> </p>
<p>ads</p>
<p>f</p>
<p>ads</p>
<p>
<input type="button" name="button" id="button" value="提交" onclick="clk()" />
</p>
<p>ad</p>
<p>sf AS
D
as
d
SA
D
</p>
<p> </p>
<p>ads</p>
<p>f</p>
<p>ads</p>
sad
SA
D
a
d
A
D
a

<div id="div_nav_zone_right" >
<ul>
<li>邊欄菜單1 </li>
<li>邊欄菜單2 </li>
<li>邊欄菜單3 </li>
<li>邊欄菜單4 </li>
</ul>
</div>

<div id="div_nav_zone_right_bottom" >
<ul>
<li>邊欄菜單1 </li>
<li>邊欄菜單2 </li>
<li>邊欄菜單3 </li>
<li>邊欄菜單4 </li>
</ul>
</div>
</body>
</html>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“html中如何實(shí)現(xiàn)固定在網(wǎng)頁右側(cè)的浮動層”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

分享題目：html中如何實(shí)現(xiàn)固定在網(wǎng)頁右側(cè)的浮動層-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://www.muchs.cn/article42/pechc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、App設(shè)計(jì)、網(wǎng)站制作、網(wǎng)站策劃、用戶體驗(yàn)、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站托管運(yùn)營