实例(获取流动值案例scroll和scrollTop的运用)
<!DOCTYPE html> <html> <head> <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 type="text/css"> *{margin: 0;padding: 0;} .content{ width:100%;height:60px; background: rgba(160,3,162,0.1); box-shadow: 1px 3px 7px #ccc; line-height: 60px; position: fixed; } .content_2 { background: rgba(160,3,162,0.4);} form{width: 500px;height: 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-bottom-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: 580px;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="content"> <form> <input type="text" placeholder="# 请输入关键词 #"> <button>全网搜</button> </form> </div> <!-- 轮播图 --> <div class="pic"></div> <!-- 页面详情 --> <div class="box"></div> <script> $(function(){ //scroll事件 :当用户流动指定的元素时触发 $(window).scroll(function(){ if($(window).scrollTop() > 60) { //流动条距窗口顶部60过后触发(隐藏导航条) $('.content').css('display','none') } else { $('.content').css('display','block') } if($(window).scrollTop() > 580) { ////流动条距窗口顶部580过后触发(改变样式为content_2并显示) $('.content').addClass('content_2').css('display','block') } else { $('.content').removeClass('content_2') } }) }) </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例