首页左侧固定导航缩放效果
1、技术实现原理：获取首页可见文档document scrollTop滚动条位置，当滚动条往下拉 t>600 大于600像素，左侧的色块显示出来。当滚动条往上或下拉小于600，色块隐藏起来
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .left{ position: fixed; top: 200px; left: 50px; background: pink; width: 60px; height: 248px; opacity: 1; transition: all 2s; } .left.h{ transform: scale(1); opacity: 0; } img{ width:100%; height:2000px; display: block; margin: 0 auto; } </style> <script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $(window).scroll(function(){ var t = $(document).scrollTop(); if (t>600) { $('.left').removeClass('h'); }else{ $('.left').addClass('h'); } }) }) </script> </head> <body> <div class="left h"></div> <img src="https://www.qiquanji.com/mip/data/img/dmj/201903111552287575275251.jpg" alt="" /> </body> </html> 
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知