<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <style type="text/css"> * { margin: 0; padding: 0; } body { max-width: 640px; margin: 0 auto; } .box { display: block; height: 50px; line-height: 50px; text-align: center; border: 1px solid #ccc; border-radius: 20px; background-color: #DC7E2D; margin-top: 30px; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 9 } </style> </head> <body> <div style="height:300px;background-color: #3045A4"></div> <div style="height:100px;background-color: #3E41D6"></div> <div style="height:300px;background-color: #645FB1"></div> <div style="height:200px;background-color: #F18733"></div> <a href="javascript:;" class="box" id="btn">按钮</a> <script> window.onscroll = function() { var btn = document.getElementById('btn'); var scrollTop = document.body.scrollTop || (document.documentElement && document.documentElement.scrollTop); if (scrollTop >=300) { btn.style.display = 'none'; } else{ btn.style.display = 'block'; } } </script> </body> </html>
效果图：
