欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML頁面滾動(dòng)時(shí)部分內(nèi)容位置固定不滾動(dòng)的實(shí)現(xiàn)

  發(fā)布時(shí)間：2021-04-14 16:13:05   作者：肖朋偉   我要評論
這篇文章主要介紹了HTML 頁面滾動(dòng)時(shí)部分內(nèi)容位置固定不滾動(dòng)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

本文主要介紹了HTML頁面滾動(dòng)時(shí)部分內(nèi)容位置固定不滾動(dòng)，對布局有一定的幫助作用，廢話不多說，具體如下：

效果截圖：

頁面源代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>無標(biāo)題頁</title>
</head>
<body style="width: 900px; margin: 0px auto; line-height: 23px; padding: 10px;">
<div>
    <div style="float: left; width: 120px;">
        <div>
            我會(huì)滾動(dòng)<br/>
            滾動(dòng)內(nèi)容區(qū)域<br/>
            滾動(dòng)內(nèi)容區(qū)域<br/>
            滾動(dòng)內(nèi)容區(qū)域<br/>
        </div>
        <div id="div1" style="border: solid 1px gray; width: 90px; padding: 10px; background-color: #eff;">
            我不滾動(dòng)<br/>
            你看我<br/><br/> 我不滾動(dòng)<br/>
            你看我<br/><br/> 我不滾動(dòng)<br/>
            你看我<br/><br/> 我不滾動(dòng)<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 頁面滾動(dòng)時(shí)部分內(nèi)容位置固定不滾動(dòng)的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)HTML 頁面滾動(dòng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論