Автор оригинала: FreeCodeCamp Community Member.
jQuery был когда-то одним из самых популярных библиотек JS. Он решил много проблем, таких как изготовление манипуляций DOM и стандартных вызовов AJAX на всех разных браузерах, которые все по-разному обрабатывают JavaScript.
Многие функции резания jQuery’s, когда-то режут кромки, сделали его в Vanilla JavaScript, поэтому нет необходимости загружать целую библиотеку всего за несколько функций. Учитывая это, не редкость, что одна из ваших задач на работе будет переписать jQuery в ванильный JavaScript.
Как переписать jquery в ванильные js
Представьте, что у вас есть следующий код:
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.menu {
width: 100%;
height: 75px;
background-color: rgba(0, 0, 0, 1);
position: fixed;
background-color:rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.light-menu {
width: 100%;
height: 75px;
background-color: rgba(255, 255, 255, 1);
position: fixed;
background-color:rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#menu-center {
width: 980px;
height: 75px;
margin: 0 auto;
}
#menu-center ul {
margin: 15px 0 0 0;
}
#menu-center ul li {
list-style: none;
margin: 0 30px 0 0;
display: inline;
}
.active {
font-family:'Droid Sans', serif;
font-size: 14px;
color: #fff;
text-decoration: none;
line-height: 50px;
}
a {
font-family:'Droid Sans', serif;
font-size: 14px;
color: black;
text-decoration: none;
line-height: 50px;
}
#home {
background-color: grey;
height: 100%;
width: 100%;
overflow: hidden;
background-image: url(images/home-bg2.png);
}
#portfolio {
background-image: url(images/portfolio-bg.png);
height: 100%;
width: 100%;
}
#about {
background-color: blue;
height: 100%;
width: 100%;
}
#contact {
background-color: red;
height: 100%;
width: 100%;
}$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#menu-center a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('#menu-center ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}Когда вы прокрутите страницу, NAVBAR должна изменить цвета, когда вы получаете разные разделы:
Функция, которая обрабатывает это Onscroll :
function onScroll(event){
var scrollPos = $(document).scrollTop();
/* console.log(scrollPos); */
$('#menu-center a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('#menu-center ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}Перевести Onscroll В ванили JS у вас есть несколько вариантов.
Опция № 1: Используйте онлайн компилятор
Вы можете использовать онлайн-инструмент, такой как Google Компилятор закрытия Чтобы сжать код и раздеть любой ненужный jQuery.
Проблема в том, что вы все еще по существу ушли с кодом jQuery, поэтому браузер все равно надо загрузить библиотеку.
Опция № 2: вручную перевести код
Лучший вариант – проверить такие ресурсы, как Вам не нужен jquery и Возможно, вам не понадобится jquery Прежде чем переписать свой код jQuery. Вы сможете найти собственные версии JS самых популярных методов jQuery, некоторые из которых вы можете использовать в своем собственном коде.
Вот …| Onscroll Функция в ванили JS:
function onScroll(event) {
var sections = [...document.querySelectorAll('#menu-center a')];
var scrollPos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
sections.forEach(function(currLink) {
var val = currLink.getAttribute('href');
var refElement = document.querySelector(val);
if (refElement.offsetTop <= scrollPos && (refElement.offsetTop + refElement.offsetHeight > scrollPos)) {
//document.querySelector('#menu-center ul li a').classList.remove('active');
currLink.classList.add('active');
} else {
currLink.classList.remove('active');
}
});
}
document.addEventListener('scroll', onScroll);