- 所在位置：
- 首頁 >
- 編程技術(shù) >
- CSS/HTML >
- HTML頁面中怎么實現(xiàn)固定位置不滾動的效果
HTML頁面中怎么實現(xiàn)固定位置不滾動的效果
Admin 2022-06-16 群英技術(shù)資訊 1116 次瀏覽
在這篇文章中，我們來學習一下“HTML頁面中怎么實現(xiàn)固定位置不滾動的效果”的相關(guā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>
以上就是關(guān)于“HTML頁面中怎么實現(xiàn)固定位置不滾動的效果”的相關(guān)知識，感謝各位的閱讀，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注群英網(wǎng)絡，小編每天都會為大家更新不同的知識。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：[email protected]進行舉報，并提供相關(guān)證據(jù)，查實之后，將立刻刪除涉嫌侵權(quán)內(nèi)容。
猜你喜歡
-
使用Canvas繪制圖案出現(xiàn)位置偏離怎么辦，如何避免
這篇文章主要介紹了canvas 繪圖時位置偏離的問題解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
-
Flexbox布局具有什么特點，基本實現(xiàn)是怎樣的
css Flexbox布局的介紹：1、Flexbox是flexiblebox的簡稱，是CSS3引進的新布局模式。2、決定了要素如何在頁面上排列，可以在不同的畫面尺寸和設備下預測地表現(xiàn)出來。
-
在CSS3中畫半圓弧線怎么做，代碼是什么
本篇文章主要介紹了css3實現(xiàn)畫半圓弧線的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
-
CSS中如何實現(xiàn)元素小寫轉(zhuǎn)大寫
在css中，小寫變大寫的代碼是“text-transform:uppercase”；“text-transform”屬性的作用是控制元素文本的大小寫樣式，當屬性的值為“uppercase”時，元素內(nèi)的文本小寫樣式會變成大寫樣式。
-
基于react實現(xiàn)的簡易CSS扇形菜單代碼是什么
這篇文章主要介紹了2分鐘教你實現(xiàn)環(huán)形/扇形菜單(基礎(chǔ)版)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
推薦內(nèi)容
- CSS中flex布局如何實現(xiàn)自動換行？
- 在HTML中如何讓button居中，有幾種方法
- JS中怎樣刪除數(shù)組末尾元素？教你兩種方法
- vue怎樣獲取url參數(shù)?教你兩種方法
- 如何用Python計算BMI指數(shù)？一文帶你看懂
- python怎樣獲取數(shù)組元素的下標？教你三種方法
- python中的ord函數(shù)有什么用？用法是什么？
- Python中array與list轉(zhuǎn)換如何做，方法是什么
- 在CSS中怎么實現(xiàn)一條橫線，方法是什么
- Python怎樣設計串口之間通信的程序
- phpstorm怎么使用和操作？一文帶你快速了解
- vue怎么給對象數(shù)組賦值？this.$set方法幫你解決
成為群英會員,開啟智能安全云計算之旅
立即注冊關(guān)注或聯(lián)系群英網(wǎng)絡
7x24小時售前：400-678-4567
7x24小時售后：0668-2555666
24小時QQ客服
群英微信公眾號
CNNIC域名投訴舉報處理平臺
服務電話：010-58813000
服務郵箱：[email protected]
投訴與建議：0668-2555555
Copyright ? QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版權(quán)所有
增值電信經(jīng)營許可證 : B1.B2-20140078 ICP核準（ICP備案）粵ICP備09006778號 域名注冊商資質(zhì) 粵 D3.1-20240008
