Помогите пожалуйста разобраться. Недавно затронул js. После обновления страницы, наведения на navbar всё хорошо работает.
НО, после прокрутки вниз/вверх и установки изначального положения, при mouseover и mouseout на navbar пропадает прозрачность.
П.С. Пишу первый раз на overflow, сильно не ругайтесь)
window.onscroll = function() {
var scrolled = window.pageYOffset || document.documentElement.scrollTop; // Получаем положение скролла
if (scrolled <= 150) {
// Если прокрутка есть, то делаем блок плавно прозрачным
document.querySelector('.navbar').style.opacity = '1';
// При наведении на блок возвращается прозрачность '1'
$('.navbar').mouseover(function() {
document.querySelector('.navbar').style.opacity = '1';
})
} else {
// Если блок пересёк отметку, то блок стабильно прозрачный
document.querySelector('.navbar').style.opacity = '0.5';
};
if (scrolled >= 150) {
// При отведении мышки возвращается прозрачность '0.5'
$('.navbar').mouseout(function() {
document.querySelector('.navbar').style.opacity = '0.5';
})
}
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="block-1">
<!-- navigation start -->
<nav class="navbar fixed-top navbar-expand-lg py-4 px-5">
<div class="container-fluid">
<a href="index.html" class="navbar-brand">
<img src="img/logo.png" alt="" width="60" height="60">
</a>
<div class="contacts d-flex flex-column">
<a href="tel:+79643743104" class="phone">7 / 964 / 374 31 04</a>
<a href="mailto:uta14@gmail.com" class="mail">uta24@gmail.com</a>
</div>
<div class="social ml-auto">
<a href="#" class="social-link vk"><i class="fab fa-lg fa-vk"></i></a>
<a href="#" class="social-link facebook"><i class="fab fa-lg fa-facebook-f"></i></a>
<a href="#" class="social-link instagram"><i class="fab fa-lg fa-instagram"></i></a>
<a href="#" class="social-link twitter"><i class="fab fa-lg fa-twitter"></i></a>
<a href="#" class="social-link google"><i class="fab fa-lg fa-google-plus-g"></i></a>
</div>
</div>
</nav>
<!-- navigation end -->