javascript - 原生监听滚动事件-PHP中文网问答

这两种是一样的吗？ $(window).scroll(function(){ }) 原生要怎么写

 $(window).scroll(function(){  })
 window.onscroll = function(){ }

想要滚动到达顶部时固定在顶部，不到达时不固定，下面不正常，怎么改。兼容Chrome就行，原生的。谢谢
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .fixed{
                position: fixed;
                top: 0;
            }
        </style>
    </head>
    <body>
    <p style="height:200px;background-color:#EFE4B0;"></p>
    <p id="fixed" style="height:40px;width:100%;background-color:#7092BE;color:#fff;">这个p到达顶部时悬浮在顶部，不到顶部不悬浮</p>
    <p style="height:2000px;background-color:#C3C3C3;"></p>
    </body>
        <script type="text/javascript">
        var fixedDom = document.getElementById('fixed');
        document.addEventListener('scroll',winScroll,false);
        function winScroll(e){

            if(fixedDom.offsetTop < document.body.scrollTop){
                fixedDom.classList.remove("fixed"); 
            };
            if(fixedDom.offsetTop > document.body.scrollTop){
                fixedDom.classList.add("fixed");  
            };
        }
        </script>
</html>

html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .fixed{ position: fixed; top: 0; } </style> </head> <body> <p style="height:200px;background-color:#EFE4B0;"></p> <p id="fixed" style="height:40px;width:100%;background-color:#7092BE;color:#fff;">这个p到达顶部时悬浮在顶部，不到顶部不悬浮</p> <p style="height:2000px;background-color:#C3C3C3;"></p> <script type="text/javascript"> var fixedDom = document.getElementById('fixed'); window.addEventListener('scroll',winScroll); function winScroll(e){ var top = getElementViewTop(fixedDom); top < 0 ? fixedDom.classList.add("fixed") : fixedDom.classList.remove("fixed"); } function getElementViewTop(element){ 　　　　var actualTop = element.offsetTop, elementScrollTop=document.body.scrollTop; 　　　　return actualTop-elementScrollTop; 　　} </script> </body> </html>