<!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>Document</title> <style> body { background: rgba(151, 150, 150, .2); } div { background: orange; margin-bottom: 10px; height: 300px; width: 95%; } ul { position: absolute; list-style: none; margin: 0; padding: 0; top: 360px; right: 10px; background: white; } li { width: 40px; height: 40px; font-size: 14px; text-align: center; margin: 5px auto; border-top: rgb(214, 210, 210) 1px solid; } .top { display: none; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <ul> <li>实惠热卖</li> <li>淘宝特色</li> <li>猜你喜欢</li> <li class="top"><span>顶部</span></li> <li>反馈</li> <li>暴恐举报</li> </ul> <script> var div = document.querySelectorAll('div'); for (var i = 0; i < div.length; i++) { if (i % 2 == 0) { div[i].style.backgroundColor = 'pink'; } } var ul = document.querySelector('ul'); document.addEventListener('scroll', function() { // 获取页面卷去部分 用 window.pageYOffset if (window.pageYOffset >= 300) { ul.style.position = 'fixed'; ul.style.top = 60 + 'px'; } else { ul.style.position = 'absolute'; ul.style.top = 360 + 'px'; } var top = document.querySelector('.top'); if (window.pageYOffset >= 370) { top.style.display = 'block'; } else { top.style.display = 'none'; } // console.log(window.pageYOffset); }) </script> </body> </html>
仿淘宝滚动页面效果
猜你喜欢
转载自www.cnblogs.com/qtbb/p/11706165.html
今日推荐
周排行