私は<a href="http://kompas.com" rel="nofollow noreferrer">this website</a>のナビゲーションバーを複製しようとしているJavaScriptコード

Question

平野へのjQueryを変換し、

(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); 

を私は成功したのjQueryを使用してそれを実装しているが、私は、プレーンJavaScriptでこれを書き換える必要があり、これはそれを書き換える私の試みです平野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 orginalを削除したいです。

(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