Mouseover/out. Прозрачность. Navbar

154
31 августа 2019, 10:50

Помогите пожалуйста разобраться. Недавно затронул 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  -->

Answer 1

Ваш код написан таким образом, что при прокрутке вы каждый раз устанавливаете обработчики на .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'; 
	} 
});

Я не совсем понял смысл вашей задачи, если что, доработаете мой код :)

Answer 2

Вариант на 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>

READ ALSO
Как расширить регион действия клика
javascript

Как расширить регион действия клика

Допустим имеем структурную схему проекта или схему БД, на которой прямоугольники, изображающие объекты, соединены линиямиКоторые в свою...

 172
Подписки на события используя RxJs
javascript

Подписки на события используя RxJs

Я создаю Observable и подписываюсь на него дважды, но при этом обновление приходит только для последнего подписавшегося:

 135
Выбрать данные по подстрокам mysql
MySQL

Выбрать данные по подстрокам mysql

Есть две таблицы (brands и symbols) c полями (brand,num и symb,number соответственно) (Взял для примера несколько строк, на самом деле их гораздо больше)

 169
сайт с вопросами на одной странице [закрыт]
HTML

сайт с вопросами на одной странице [закрыт]

здравстуйте, хочу сделать сайт со следующими друг за другом вопросами, отвечаешь на один вопрос, на том же месте появляется другой, но без...

 162