4. 前端--jQuery滚动事件

最新推荐文章于 2024-09-11 11:07:15 发布

喵先生呢

最新推荐文章于 2024-09-11 11:07:15 发布

阅读量1k

点赞数

分类专栏： # 前端-JQuery 文章标签： jq scroll

本文链接：https://blog.csdn.net/weixin_45267102/article/details/109604365

版权

前端-JQuery 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

文章目录

前端–jQuery滚动事件

scroll() 滚动条事件

scrollLeft() 获取的是横向滚动的距离。
scrollTop() 获取的纵向滚动的距离。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>jq滚动事件</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul, li {
            list-style: none;
        }

        #box {
            width: 2000px;
            height: 3000px;
            background-color: #dbdbdb;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script>

        $(function () {
            $(window).scroll(function () {
                console.log($(window).scrollTop());
                console.log($(this).scrollLeft());
            })
        });

    </script>
</head>
<body>
<div id="box">喵瞄</div>
</body>
</html>

1. 滚动事件实现广告跟随

广告跟随： 当前图片的位置= 滚动滚动的距离 + 当前图片与浏览器上边框的距离。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>广告跟随</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul, li {
            list-style: none;
        }
        #box {
            height: 3000px;
        }
        img{
            position:absolute;
            left:0px;
            top:0px;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script>

        $(function () {
            $(window).scroll(function(){
                // 广告跟随：  当前图片的位置= 滚动滚动的距离 + 当前图片与浏览器上边框的距离。
                var top1 = $(this).scrollTop();
                $("img").stop().animate({"top":(top1+160)+"px"},2000);
            })
        });
    </script>
</head>
<body>
<img src="../images/03.jpg" alt="">
<div id="box"></div>
</body>
</html>

2. 小火箭返回最顶端

$(window).height();获取的是当前浏览器可视区域的高度。
$(window).scrollTop()；滚动条滚动的距离纵向。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>小火箭返回最顶端</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul, li {
            list-style: none;
        }

        body {
            height: 3000px;
        }

        #box {
            height: 900px;
            background-color: #dad8d8;
        }

        img {
            position: fixed;
            right: 0px;
            bottom: 0px;
            display: none;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script>
        /**
         * $(window).height();获取的是当前浏览器可视区域的高度。
         * $(window).scrollTop()；滚动条滚动的距离纵向
         */
        $(function () {
            $(window).scroll(function () {
                console.log(this);
                if ($(window).scrollTop() >= $(window).height()) {
                    $("img").slideDown(200);
                } else {
                    $("img").slideUp(200);
                }
            });
            $("img").mouseenter(function () {
                $(this).prop("src", "../images/02.gif");
            }).mouseleave(function () {
                $(this).prop("src", "../images/01.png");
            }).click(function () {
                /**
                 * $("html") 在谷歌浏览器生效了
                 * $("body") 在火狐浏览器生效。
                 */
                $("body,html").stop().animate({"scrollTop": "0px"}, 500);
            })
        });
    </script>
</head>
<body>
<div id="box"></div>
<img src="../images/01.png" alt="">
</body>
</html>

3. 电梯导航☆☆

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>itbuild.cn</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .header {
            width: 1000px;
            height: 600px;
            margin: 0 auto 50px;
            font-size: 60px;
            font-weight: 700;
        }

        .main {
            width: 1000px;
            margin: 0 auto 50px;
            font-size: 60px;
            font-weight: 700;
        }

        .main div {
            height: 600px;
            margin: 0 auto 50px;
        }

        .nav {
            width: 100%;
            height: 50px;
            background: rgba(0, 0, 0, 0.5);
            position: fixed;
            left: 0;
            top: 0;
            display: none;
        }

        .nav ul {
            width: 1200px;
            height: 50px;
            /*background: pink;*/
            margin: 0 auto;
        }

        .nav ul li {
            float: left;
        }

        .nav ul li.current {
            background: #6495ED;
        }

        .nav ul li a {
            display: block;
            width: 120px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: #fff;
            text-decoration: none;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(window).scroll(function () {
            //当 滚动高度大于header高度的时候，显示导航栏
            if ($(this).scrollTop() >= 600) {
                $(".nav").slideDown(200);
            } else {
                //当 滚动高度小于header高度的时候，隐藏导航栏
                $(".nav").slideUp(200);
            }
            // 遍历导航标签。
            $(".nav ul li").each(function (index, ele) {
                // 如果滚动高度，大于某个课程内容距离body边框的高度-50px，
                // 那么让当前的li标签处于选中状态。否则，删除选中状态。
                if ($(window).scrollTop() >= $(".main div").eq(index).offset().top - 50) {
                    $(this).addClass("current").siblings().removeClass("current");
                }
            });
            // 给ul下面的所有的li绑定一个单击事件。
            $(".nav ul").on("click", "li", function () {
                //获取到点击的按钮的索引号。
                var index1 = $(this).index();
                // 获取到当前索引对应的课程内容距离body边框的高度。
                var top1 = $(".main div").eq(index1).offset().top;
                // 将滚动条移动到对应课程的位置。
                $("html,body").stop().animate({"scrollTop": (top1 - 50) + "px"}, 1000);
            })
        })
    </script>

</head>

<body>
<div class="nav">
    <ul>
        <li>
            <a href="##">JavaEE</a>
        </li>
        <li>
            <a href="##">Android</a>
        </li>
        <li>
            <a href="##">PHP</a>
        </li>
        <li>
            <a href="##">UI设计</a>
        </li>
        <li>
            <a href="##">iOS</a>
        </li>
        <li>
            <a href="##">前段与移动开发</a>
        </li>
        <li>
            <a href="##">C/C++</a>
        </li>
        <li>
            <a href="##">网络营销</a>
        </li>
        <li>
            <a href="##">Python</a>
        </li>
        <li>
            <a href="##" style="border:0 none">云计算之大数据</a>
        </li>

    </ul>
</div>
<div class="header" style="background: red;">头部</div>
<div class="main">
    <div class="java" style="background:#0099CC;">java</div>
    <div class="android" style="background:#A4FF34;">android</div>
    <div class="php" style="background:green;">php</div>
    <div class="ui" style="background:blue;">ui</div>
    <div class="ios" style="background:blueviolet;">ios</div>
    <div class="h5" style="background:gray;">h5</div>
    <div class="c" style="background:yellow;">c</div>
    <div class="net" style="background:black;">net</div>
    <div class="python" style="background:cadetblue;">python</div>
    <div class="cal" style="background:darkblue;">cal</div>

</div>
</body>

</html>