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