<!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 > affordable Hot </ Li > < li > Taobao Features </ li > < li > you may also like </ li > <li class="top"> < Span > top </ span > </ Li > < Li > Feedback </ Li > < Li > violent fear Report </ 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 site = document.querySelector ( ' site ' ); document.addEventListener ( ' Scroll ' , function () { // get the page to the volume portion with 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>