Correction status:Uncorrected
Teacher's comments:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>获取滚动值案例</title> <link rel="icon" type="image/x-icon" href="images/2.png"> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <style> *{margin: 0;padding: 0} .con{ width: 100%; height: 60px; background: rgba(160,3,162,0.1); box-shadow: 1px 3px 7px #ccc; line-height: 60px;position: fixed; } .con2{ background: rgba(160,3,162,0.4); } form{ width: 500px; widows: 35px; position: relative; margin: 0 auto; } input{ width: 480px; height: 35px; border-radius: 20px; border: none; outline: none; padding-left: 20px; } button{ width: 70px; height: 35px; order: none; border-top-right-radius: 20px; border:none; color:#fff; position: absolute; right: 0; top: 14px; outline: none; font-weight: bold; background: rgba(160,3,162,0.4); } [placeholder]{color: rgba(160,3,162,0.6);} .pic{ width: 70%; height: 500px; background:url(images/3.jpg); margin: 0 auto; } .box{ width: 70%; height: 1200px; background:rgba(108,108,106,0.1); margin: 0 auto; } </style> </head> <body> <div class="con"> <form> <input type="text" placeholder="#请输入关键词#"> <button>搜索</button> </form> </div> <div class="pic"></div> <div class="box"></div> <script> $(function(){ $(window).scroll(function(){ if($(window).scrollTop()>60){ $('.con').css('display','none') }else{ $('.con').css('display','block') } if($(window).scrollTop()>580){ $('.con').addClass('con2').css('display','block') }else{ $('.con').removeClass('con2') } }) }) </script> </body> </html>
点击 "运行实例" 按钮查看在线实例