jQuery的转换为纯JavaScript代码

Question

我试图复制的this website导航栏，我已经成功地使用jQuery实现它，但我需要在普通的JavaScript

(function ($) { 
$(document).ready(function() { 
    var $nav1 = $("#nav-1"), 
     $nav2 = $("#nav-2"), 
     $sticky = $nav1.before($nav2.addClass("fixed").removeClass("hide")); 

    $(window).on("scroll", function() { 
     var fromTop = $(window).scrollTop(); 
     $("body").toggleClass("on-scroll", (fromTop > 200)); 
    }); 
}); 
})(jQuery); 

这是我尝试重写它来重写这个以纯JS，但它不是ATM

(function() { 
var nav1 = document.getElementById("nav-1"), 
    nav2 = document.getElementById("nav-2"), 
    sticky = nav1.insertAdjacentHTML("beforebegin", nav2.outerHTML); 

// nav2.className += " fixed"; 
nav2.classList.add("fixed"); 
nav2.classList.remove("hide"); 

window.onscroll = function() { 
    var fromTop = window.scrollTop; 
    body.classList.toggle("on-scroll", fromTop > 200); 
}; 
}()); 

Answer 1

工作你是非常接近的，首先，你可能想要删除的原单#nav-2，因为你是一个副本。其次，你要确定身体的scrollTop的，您可以通过document.body的访问，请参见下面的更新：

(function() { 
var nav1 = document.getElementById("nav-1"), 
    nav2 = document.getElementById("nav-2"), 
    sticky = nav1.insertAdjacentHTML("beforebegin", nav2.outerHTML); 

nav2.parentElement.removeChild(nav2); 

// nav2.className += " fixed"; 
nav2.classList.add("fixed"); 
nav2.classList.remove("hide"); 

window.onscroll = function() { 
    var fromTop = document.body.scrollTop; 
    document.body.classList.toggle("on-scroll", fromTop > 200); 
}; 
}()); 

JSFiddle