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

秒速五厘米 2021-12-14 12:35 386阅读 0赞

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!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>

转载于:https://www.cnblogs.com/lgyong/p/10531979.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211214/cf62892d713e47618f625c4384904df4.png