JS——scroll動畫

時間  2019-11-17
標籤 scroll 動畫 欄目 JavaScript 简体版
原文   原文鏈接

固定導航欄html

一、計算導航欄到頂部的距離值瀏覽器

二、當scrollTop值大於這個距離值就添加定位，當小於距離值後解除定位動畫

注意事項：當導航欄添加定位以後，導航欄就脫離了文檔流，也就是不佔位了，下面的盒子就會頂上來，因此要給下面盒子添加padding-top值this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            height: 5000px;
        }

        .box1 {
            height: 40px;
            background-color: pink;
            overflow: hidden;
        }

        .box2 {
            height: 50px;
            background-color: yellow;
            font: 500 20px/50px "simsun";
            text-align: center;
        }

        .box3 {
            width: 820px;
            height: 512px;
            margin: 10px auto;
        }

        .fixed {
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2">導航欄</div>
<div class="box3">
    <img src="images/nba.jpg">
</div>
<script>
    var banner = document.getElementsByTagName("div")[0];
    var nav = document.getElementsByTagName("div")[1];
    var lastDiv = document.getElementsByTagName("div")[2];
    window.onscroll = function () {
        if (scroll().top >= banner.offsetHeight) {
            nav.className = "box2 fixed";
            lastDiv.style.paddingTop = nav.offsetHeight + "px";
        } else {
            nav.className = "box2";
            lastDiv.style.paddingTop = "0px";
        }
    }

    function scroll() {
        return {
            "top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
            "left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
        };
    }
</script>
</body>
</html>

兩側跟隨廣告spa

一、以前都是offsetLeft計算x軸上的移動，如今是計算y軸方向的移動code

二、鼠標滾動以後，遮蓋的距離scrollTop值，須要和廣告以前的定位Top值進行相加纔是滾動的真正目標值htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            height: 5000px;
        }

        .box1 {
            width: 800px;
            margin: 50px auto;
            font: 500 25px/45px "simsun";
            color: red;
            text-align: center;
        }

        span {
            position: absolute;
            top: 300px;
            width: 40px;
            height: 120px;
            background: rgba(255, 142, 142, 0.3);
            font: 600 30px/60px "simsun";
            color: red;
            text-align: center;
        }

        .ad-left {
            left: 400px;
        }

        .ad-right {
            right: 400px;
        }
    </style>
</head>
<body>
<span class="ad-left">廣<br>告</span>
<span class="ad-right">廣<br>告</span>
<div class="box1">
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
</div>
<script>
    var sp1 = document.getElementsByTagName("span")[0];
    var sp2 = document.getElementsByTagName("span")[1];

    window.onscroll = function () {
        animate(sp1, scroll().top + 300);
        animate(sp2, scroll().top + 300);
    }

    function animate(ele, target) {
        clearInterval(ele.timer);
        ele.timer = setInterval(function () {
            var step = (target - ele.offsetTop) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            ele.style.top = ele.offsetTop + step + "px";
            if (Math.abs(target - ele.offsetTop) <= Math.abs(step)) {
                ele.style.top = target + "px";
                clearInterval(ele.timer);
            }
        }, 15);
    }

    function scroll() {
        return {
            "top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
            "left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
        };
    }
</script>
</body>
</html>

回到頂部blog

一、技術點：window.scrollTo(x,y)，以前都是移動某個元素，如今是須要移動整個顯示區域，因此用window.scrollTo(x,y)ip

二、瀏覽器顯示區域已經滾動的距離其實就是scrollTop值，作緩動畫，只須要將這個值慢慢變小，一直到0便可。文檔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            height: 5000px;
        }

        .box1 {
            width: 800px;
            margin: 50px auto;
            font: 500 25px/45px "simsun";
            color: red;
            text-align: center;
        }

        span {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 40px;
            height: 120px;
            background: rgba(255, 142, 142, 0.3);
            font: 600 30px/30px "simsun";
            color: red;
            text-align: center;
            display: none;
        }

    </style>
</head>
<body>
<span>回<br>到<br>頂<br>部</span>
<div class="box1">
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
    鋤禾日當午，汗滴禾下土，誰知盤中餐，粒粒皆幸苦<br>
</div>
<script>
    var sp = document.getElementsByTagName("span")[0];
    var target = 0;//目標位置
    var leader = 0;//顯示區域自身的位置
    window.onscroll = function () {
        if (scroll().top > 400) {
            sp.style.display = "block";
        } else {
            sp.style.display = "none";
        }
        leader = scroll().top;
    }
    var timer = null;
    sp.onclick = function () {
        clearInterval(timer);
        timer = setInterval(function () {
            var step = (target - leader) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            leader = leader + step;
            window.scrollTo(0, leader);
            if (Math.abs(target - leader) <= Math.abs(step)) {
                window.scrollTo(0, 0);
                clearInterval(timer);
            }

        }, 15);
    }

    function scroll() {
        return {
            "top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
            "left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
        };
    }
</script>
</body>
</html>

樓層跨越

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        body {
            height: 5000px;
        }

        ul {
            width: 800px;
            margin: 0 auto;
        }

        ul li {
            height: 400px;
        }

        ol {
            position: fixed;
            top: 150px;
            left: 350px;
        }

        ol li {
            width: 50px;
            height: 50px;
            font: 500 15px/50px "simsun";
            text-align: center;
            border: 1px solid #ccc;
            margin-top: -1px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<ul>
    <li>上衣</li>
    <li>下衣</li>
    <li>春天</li>
    <li>夏衣</li>
    <li>秋衣</li>
    <li>冬衣</li>
</ul>
<ol>
    <li>上衣</li>
    <li>下衣</li>
    <li>春天</li>
    <li>夏衣</li>
    <li>秋衣</li>
    <li>冬衣</li>
</ol>
<script>
    var ul = document.getElementsByTagName("ul")[0];
    var uLiArr = ul.children;
    var ol = document.getElementsByTagName("ol")[0];
    var oLiArr = ol.children;
    var arrColor = ["pink", "blue", "yellow", "orange", "green", "red"];
    var timer = null;
    var dispalyArea = 0;//顯示區域座標
    var target = 0;//目標值
    for (var i = 0; i < arrColor.length; i++) {
        uLiArr[i].style.backgroundColor = arrColor[i];
        oLiArr[i].style.backgroundColor = arrColor[i];
        oLiArr[i].index = uLiArr[i].offsetTop;
        //顯示區域的scrollTop值與目標的scrollTop值差值
        oLiArr[i].onclick = function () {
            target = this.index;
            clearInterval(timer);
            timer = setInterval(function () {
                var step = (target - dispalyArea) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                dispalyArea = dispalyArea + step;
                window.scrollTo(0, dispalyArea);
                if (Math.abs(target - dispalyArea) <= Math.abs(step)) {
                    clearInterval(timer);
                    window.scrollTo(0, target);
                }
            }, 15);
        }
    }
    window.onscroll = function () {
        dispalyArea = scroll().top;
    }

    function scroll() {
        return {
            "top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
            "left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
        };
    }
</script>
</body>
</html>

 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程