Помогите пожалуйста разобраться. Недавно затронул 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 -->
Ваш код написан таким образом, что при прокрутке вы каждый раз устанавливаете обработчики на .navbar. То есть, при прокрутке выполняется много действий каждый раз, и получается какая-то каша.
Необходимо переработать примерно так:
var scrolled = 0; //глобальная переменная
window.onscroll = function() {
scrolled = window.pageYOffset || document.documentElement.scrollTop; //меняем значение прокрутки
if (scrolled <= 150) {
document.querySelector('.navbar').style.opacity = '1';
} else {
document.querySelector('.navbar').style.opacity = '0.5';
}
}
$('.navbar').mouseover(function(){
if (scrolled <= 150) {
document.querySelector('.navbar').style.opacity = '1';
}
});
$('.navbar').mouseout(function(){
if (scrolled > 150) {
document.querySelector('.navbar').style.opacity = '0.5';
}
});
Я не совсем понял смысл вашей задачи, если что, доработаете мой код :)
Вариант на jQuery и с использованием добавления\удаления класса, мне кажется так удобнее.
$(window).bind('scroll', function(){ // Обработчик на скролл
console.clear(); // Удалить
let scrollTop = $(this).scrollTop(); // Текущая позиция скролла
console.info(scrollTop); // Удалить
if(scrollTop >= 150) // Если скролл больше 150px
$('.navbar').addClass('opacity'); // Добавляем класс opacity (или любой другой)
else // если меньше
$('.navbar').removeClass('opacity'); // Удаляем класс
});
body {height: 1000px; margin: 0;}
.navbar {display: block; width: 100%; height: 80px; background: #333; position: fixed; left: 0; top: 0; right: 0;}
/* Добавляем свойства к данному классу */
.navbar.opacity {opacity: .3;}
.navbar.opacity:hover {opacity: 1;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar"></div>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Допустим имеем структурную схему проекта или схему БД, на которой прямоугольники, изображающие объекты, соединены линиямиКоторые в свою...
Я создаю Observable и подписываюсь на него дважды, но при этом обновление приходит только для последнего подписавшегося:
Есть две таблицы (brands и symbols) c полями (brand,num и symb,number соответственно) (Взял для примера несколько строк, на самом деле их гораздо больше)
здравстуйте, хочу сделать сайт со следующими друг за другом вопросами, отвечаешь на один вопрос, на том же месте появляется другой, но без...