jq简易电梯导航

话不多说,先看图
jq简易电梯导航_第1张图片
直接上代码



<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .header {
            background: #333333;
            height: 50px;
            line-height: 50px;
            color: white;
            font-size: 30px;
        }

        .wrap {
            width: 80%;
            margin: 0 auto;
        }

        .wrap div {
            height: 400px;
            margin: 50px 0;
            text-align: center;
            line-height: 400px;
            font-size: 30px;
            color: white;
        }

        .wrap .one {
            background: skyblue;
        }

        .wrap .two {
            background: pink;
        }

        .wrap .three {
            background: tomato;
        }

        .wrap .four {
            background: grey;
        }

        .wrap .five {
            background: yellow;
        }

        .wrap .six {
            background: seagreen;
        }

        .footer {
            height: 240px;
            background: #f4f4f4;
            font-size: 30px;
            color: #666666;
            line-height: 240px;
        }

        .lift_nav {
            position: fixed;
            top: 50%;
            right: 15px;
            transform: translateY(-50%);
            display: none;
        }

        .lift_nav ul li {
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            color: #fff;
            padding: 10px 10px;
            margin-bottom: 10px;
            background: #9a7cff;
            cursor: pointer;
            user-select: none;
        }

        .lift_nav ul li.current {
            background: #c81623;
        }

        .btn {
            outline: none;
            border: 1px solid #05DFD7;
            background: #05DFD7;
            width: 40px;
            height: 80px;
            position: fixed;
            bottom: 220px;
            right: 20px;
            cursor: pointer;
            display: none;
            border-radius: 10px;
        }

        .btn div {
            color: white;
            width: 20px;
            margin: auto;
        }
    style>
head>

<body>
    <div class="header">
        <div class="wrap">
            这是导航栏
        div>
    div>

    <div class="wrap">
        <div class="one lift">这是1楼div>
        <div class="two lift">这是2楼div>
        <div class="three lift">这是3楼div>
        <div class="four lift">这是4楼div>
        <div class="five lift">这是5楼div>
        <div class="six lift">这是6楼div>
    div>

    <div class="footer">
        <div class="wrap">这是底部div>
    div>

    <div class="lift_nav">
        <ul>
            <li class="current">1li>
            <li>2li>
            <li>3li>
            <li>4li>
            <li>5li>
            <li>6li>
        ul>
    div>
    <button class="btn" type="button">
        <div>返回顶部div>
    button>
body>
<script src="./js/jquery.min.js">script>
<script>
    $(window).on("scroll",function () {

        if ($(window).scrollTop() >= 100) {
            $(".lift_nav").stop().fadeIn();
            $(".btn").stop().fadeIn();
        } else {
            $(".lift_nav").stop().fadeOut();
            $(".btn").stop().fadeOut();
        }


        // 滑动楼层显示
        $(".wrap .lift").each(function (i, v) {
            // 每一个div距离顶部的距离 
            // var wrapDiv = $(".wrap .lift").eq( $(this).index() ).offset().top - 300;
            // console.log(wrapDiv);

            if ($(window).scrollTop() >= $(v).offset().top - 300) {
                
                $(".lift_nav ul li").eq(i).addClass("current").siblings("li").removeClass("current");
            };
        });
    });

    // 点击去到的楼层
    $(".lift_nav ul").on("click", "li", function () {
        var wrapDiv = $(".wrap div").eq($(this).index()).offset().top - 300;
        $("html,body").animate({
            scrollTop: wrapDiv
        }, 200);
    });

    // 回顶部按钮
    $(".btn").click(function () {
            $("html").animate({
                scrollTop: 0
            }, 250);
        });
script>

html>

你可能感兴趣的