HTML頁面滾動時部分內(nèi)容位置固定不滾動的實現(xiàn)
發(fā)布時間：2021-04-14 16:13:05 作者：肖朋偉 
我要評論
我要評論這篇文章主要介紹了HTML 頁面滾動時部分內(nèi)容位置固定不滾動的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
本文主要介紹了HTML頁面滾動時部分內(nèi)容位置固定不滾動，對布局有一定的幫助作用，廢話不多說，具體如下：
效果截圖：
頁面源代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>無標題頁</title>
</head>
<body style="width: 900px; margin: 0px auto; line-height: 23px; padding: 10px;">
<div>
<div style="float: left; width: 120px;">
<div>
我會滾動<br/>
滾動內(nèi)容區(qū)域<br/>
滾動內(nèi)容區(qū)域<br/>
滾動內(nèi)容區(qū)域<br/>
</div>
<div id="div1" style="border: solid 1px gray; width: 90px; padding: 10px; background-color: #eff;">
我不滾動<br/>
你看我<br/><br/> 我不滾動<br/>
你看我<br/><br/> 我不滾動<br/>
你看我<br/><br/> 我不滾動<br/>
你看我<br/><br/>
</div>
</div>
<div style="float: right; width: 750px; border: solid 1px gray; padding: 10px;">
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssss我是內(nèi)容ssss</span><br>
<span>ssssssssssssssss</span><br>
<span>sssssss我是內(nèi)容sssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>sssssss我是內(nèi)容sssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssss我是內(nèi)容ssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>ssssss我是內(nèi)容ssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>ssssss我是內(nèi)容ssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>ssssss我是內(nèi)容ssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>ssssss我是內(nèi)容ssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>ssssss我是內(nèi)容ssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>ssssss我是內(nèi)容ssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>ssssss我是內(nèi)容ssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>ssssss我是內(nèi)容ssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>ssssss我是內(nèi)容ssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>ssssss我是內(nèi)容ssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>ssssss我是內(nèi)容ssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>ssssss我是內(nèi)容ssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>ssssss我是內(nèi)容ssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>ssssss我是內(nèi)容ssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>ssssss我是內(nèi)容ssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br><span>ssssss我是內(nèi)容ssssssssss</span><br>
<span>ssssssssssssssss</span><br>
<span>ssssssssssssssss</span><br>
</div>
</div>
<script type="text/javascript">
function htmlScroll() {
var top = document.body.scrollTop || document.documentElement.scrollTop;
if (elFix.data_top < top) {
elFix.style.position = 'fixed';
elFix.style.top = 0;
elFix.style.left = elFix.data_left;
}
else {
elFix.style.position = 'static';
}
}
function htmlPosition(obj) {
var o = obj;
var t = o.offsetTop;
var l = o.offsetLeft;
while (o = o.offsetParent) {
t += o.offsetTop;
l += o.offsetLeft;
}
obj.data_top = t;
obj.data_left = l;
}
var oldHtmlWidth = document.documentElement.offsetWidth;
window.onresize = function () {
var newHtmlWidth = document.documentElement.offsetWidth;
if (oldHtmlWidth == newHtmlWidth) {
return;
}
oldHtmlWidth = newHtmlWidth;
elFix.style.position = 'static';
htmlPosition(elFix);
htmlScroll();
}
window.onscroll = htmlScroll;
var elFix = document.getElementById('div1');
htmlPosition(elFix);
</script>
</body>
</html>
到此這篇關于HTML 頁面滾動時部分內(nèi)容位置固定不滾動的實現(xiàn)的文章就介紹到這了,更多相關HTML 頁面滾動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了前端頁面彈框遮罩禁止頁面滾動，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學2020-11-30- 這篇文章主要介紹了CSS設計之頁面滾動條出現(xiàn)時防止頁面跳動的方法,在使用overflow:auto之后這樣的跳動情況是一個常見問題,本文給出了相關處理方法,需要的朋友可以參考下2015-06-08
- 禁用頁面滾動條的方法有很多，但最簡單、最快的也就數(shù)overflow: hidden了，下面是禁用html及body滾動條的方法，兼容IE6、72014-09-04
純css 實現(xiàn)footer 一直在頁面底部，不隨頁面滾動
CSS的簡單在于它易學，CSS的困難在于尋找更好的解決方案。在CSS的世界里，似乎沒有完美這種說法。所以，現(xiàn)在介紹的CSS絕對底部，只是目前個人見過的方案中比較完美的吧。2014-09-02