Делаю верстку с помощью gulp, с папки src/js все скрипты собираю в один минифицированный, который подключаю к файлам html. Так вот, на странице index.html подключенный мой build/all.js на этой странице используется код на скролл, но когда перехожу со страницы index.html на view.html где также подключенный build/all.js получаю ошибку: Uncaught TypeError: Cannot read property 'style' of undefined. Потому что нету тех элементов, c index.html на которые писался код. Так вот, как правильно организовать подключение js, или организовать код, что бы он работал только на тех страницах, где используется ?
index.js:
const opacity = document.getElementsByClassName('move-img');
function showDivs() {
var top = $(document).scrollTop();
if ( top >= 100 && top < 400) {
$('.servicies-right').stop().animate({
'margin-right': '100px',
'opacity': '1'
}, 1000);
opacity[0].style.opacity = '1';
}
else if (top >= 400 && top < 600) {
$('.servicies-left').stop().animate({
'margin-left': '100px',
'opacity': '1'
}, 1000);
$('.servicies-right').stop().animate({
'margin-right': '100px',
'opacity': '1'
}, 1000);
opacity[0].style.opacity = '1';
opacity[1].style.opacity = '1';
}
else if (top >= 600) {
$('.right2').stop().animate({
'margin-right': '100px',
'opacity': '1'
}, 1000);
$('.servicies-left').stop().animate({
'margin-left': '100px',
'opacity': '1'
}, 1000);
$('.servicies-right').stop().animate({
'margin-right': '100px',
'opacity': '1'
}, 1000);
opacity[0].style.opacity = '1';
opacity[1].style.opacity = '1';
opacity[2].style.opacity = '1';
}
}
var timer = null;
$(window).scroll(function () {
clearTimeout(timer);
timer = setTimeout(showDivs, 300);
});
index.html:
<script src="build/js/all.js"></script>
view.html:
<script src="build/js/all.js"></script>