当页面滚动到距顶部一定高度时某DIV自动隐藏和显示

最新推荐文章于 2021-06-07 13:55:44 发布

weixin_30511039

最新推荐文章于 2021-06-07 13:55:44 发布

阅读量692

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lcf0916/p/9325320.html

版权

<!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"  
  /> 
 
  <meta content= 
  "yes"  
  name= 
  "apple-mobile-web-app-capable"  
  /> 
 
  <meta content= 
  "black"  
  name= 
  "apple-mobile-web-app-status-bar-style"  
  /> 
 
  <meta content= 
  "telephone=no"  
  name= 
  "format-detection"  
  /> 
 
  <style type= 
  "text/css" 
  > 
 
  *{ margin: 0; padding: 0; } 
 
  body{ max-width: 640px; margin: 0 auto } 
 
  .div1{ background: #D5D4D4;height: 500px; margin-bottom: 10px; overflow: hidden; font-size: 50px;} 
 
  .div2{ background: #D5D4D4; height: 500px; margin-bottom: 10px; overflow: hidden;font-size: 50px;} 
 
  .div3{ background: #D5D4D4; height: 500px; margin-bottom: 10px; overflow: hidden;font-size: 50px;} 
 
  #scrollSearchDiv{ width: 100%; height: 40px; line-height: 40px; display: none; position: fixed; left: 0; bottom:0; text-align: center; font-size: 20px; color: #fff; } 
 
  </style> 
 
  </head> 
 
  <body> 
 
  <div  
  class 
  = 
  "div1 J_payBottomShow J_payPopupShow" 
  >1</div>   
 
  <div  
  class 
  = 
  "div2  J_payPopupShow" 
  >2</div>   
 
  <div  
  class 
  = 
  "div3  J_payPopupShow" 
  >3</div>   
 
  <div id= 
  "scrollSearchDiv" 
  >按钮显示隐藏</div> 
 
  <script src= 
  "http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" 
  ></script> 
 
  <script type= 
  "text/javascript" 
  > 
 
  $(function () {              
 
  //绑定滚动条事件  
 
  //绑定滚动条事件  
 
  $(window).bind( 
  "scroll" 
  , function () {  
 
  var  
  sTop = $(window).scrollTop();  
 
  var  
  sTop = parseInt(sTop);  
 
  if  
  (sTop >= 130) {  
 
  if  
  (!$( 
  "#scrollSearchDiv" 
  ). 
  is 
  ( 
  ":visible" 
  )) {  
 
  try  
  {  
 
  $( 
  "#scrollSearchDiv" 
  ).slideDown();  
 
  }  
  catch  
  (e) {  
 
  $( 
  "#scrollSearchDiv" 
  ).show();  
 
  }                        
 
  }  
 
  }  
 
  else  
  {  
 
  if  
  ($( 
  "#scrollSearchDiv" 
  ). 
  is 
  ( 
  ":visible" 
  )) {  
 
  try  
  {  
 
  $( 
  "#scrollSearchDiv" 
  ).slideUp();  
 
  }  
  catch  
  (e) {  
 
  $( 
  "#scrollSearchDiv" 
  ).hide();  
 
  }                         
 
  }  
 
  }   
 
  });  
 
  })  
 
  </script> 
 
  </body> 
 
  </html>