功能1 -- 顶部导航栏和返回顶部效果

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>顶部导航栏效果和返回顶部</title></head><body>


<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    body {
        background: #ddd;
    }
    div {
        height: 2000px;
    }
    .nav {
        width: 100%;
        border-bottom: 1px solid #383e41;
        background-color: rgba(0, 0, 0, 0.5);
        position: fixed;
        top: 0;
        height: 80px;
        z-index: 11;
    }

    .nav.active {
        background-color: rgba(0, 0, 0, 1);
    }
    .go-top {
        width: 44px;
        height: 44px;
        background: url(http://images.cnblogs.com/cnblogs_com/lgyong/1411096/t_goTop.png) no-repeat center;
        background-size: 100%;
        cursor: pointer;
        position: fixed;
        bottom: 100px;
        right: 0;
        display: none;
        box-shadow: 0 0px 15px 3px rgba(29, 33, 36, 0.3);
    }
</style>


<div>
    <nav class="nav"></nav>
    <div class="go-top"></div>
</div>

<script type="text/javascript">
    // js
    window.onscroll = function () {
        console.log('on')
        let bannerTopHeight = document.getElementsByClassName('nav')[0];
        var t = document.documentElement.scrollTop || document.body.scrollTop;
        console.log(t)
        console.log(bannerTopHeight.offsetHeight)
        if (t >= bannerTopHeight.offsetHeight) {
            bannerTopHeight.setAttribute('class', 'nav active')
        } else {
            bannerTopHeight.setAttribute('class', 'nav')
        }

        let fixedBox = document.getElementsByClassName('go-top')[0];
        if (t >= 300) {
            fixedBox.style.display = 'block';
        } else {
            fixedBox.style.display = 'none';
        }

    }
</script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    // jquery
    $(window).scroll(function (event) {
        if ($(window).scrollTop() !== 0) {
            $(".go-top").fadeIn();
        } else {
            $(".go-top").fadeOut();
        }
        $(".go-top").click(function () {
            $("html,body").animate({
                scrollTop: 0
            }, 300);
            return false;
        })
        $(".go-top").on('touchstart',function () {
            $("html,body").animate({
                scrollTop: 0
            }, 300);
            return false;
        })
        
        var bannerTopHeight = $(".nav").height();
        if ($(window).scrollTop() >= bannerTopHeight) {
            $(".nav").addClass("active");

        } else {
            $(".nav").removeClass("active");
        }

    });
</script>
</body></html>
View Code
功能1 -- 顶部导航栏和返回顶部效果

猜你喜欢
