триггер CSS: наведите указатель мыши на javascript с помощью прокрутки

Question

Я работаю над сайтом с фиксированным меню в верхней части сайта. Если вы наведите указатель мыши на навигационную панель, она перемещается вниз, чтобы показать ссылки. Наведение осуществляется с помощью классов css.

Навигация следует показывать полностью, когда вы входите на сайт или прокручиваете вверх.

Я пытаюсь реализовать его, используя метод javascript, который использует прогресс прокрутки.

$(window).scroll(function() { 
 
\t var wS = $(this).scrollTop(); 
 
\t if (wS > 200){   
 
\t \t alert('you have scrolled to the h1!'); 
 
       $document.getElementById('awning').addClass('awning:hover'); 
 
    \t   $document.getElementById('nav').addClass('awning:hover #nav'); 
 
    } 
 
});

ли смысл или есть лучший способ сделать это?

Предупреждение даже не показывает вверх

Answer 1

Вы не можете назначить pseudo-classes как это. Псевдо-класс используется для определения стиля элемента при возникновении специального состояния (например, зависание над элементом, уже посещенная ссылка), или элемент является каким-то особым (первый вид, даже и т. Д.).

Вы должны создать дополнительный класс в CSS так:

#awning.revealed{ /* notice there is no space between selectors */ 
    /*your css code goes here (same as in :hover)*/ 
} 

А потом просто добавить класс к элементу, как это:

$document.getElementById('awning').addClass('revealed'); 

Answer 2

Пожалуйста, используйте приведенный ниже код и нажмите на 2 значение (200)

$('.wi').on("click", function() { 
 
    console.log('clicked'); 
 
    var temp = $('.wi'); 
 
    if (temp.hasClass('wi-celsius')) { 
 
     alert("Current is 'Celsius'... updating it to 'Fahrenheit!'"); 
 
     var convertedTemp = parseInt(temp.text()) * 9/5 + 32; 
 
\t \t temp.text(convertedTemp); 
 
\t \t temp.removeClass('wi-celsius'); 
 
\t \t temp.addClass('wi-fahrenheit'); 
 
    }else { 
 
     alert("Current is 'Fahrenheit'... updating it to 'Celsius!'"); 
 
     var convertedTemp = (parseInt(temp.text()) -32)/ (9/5); 
 
\t \t temp.text(convertedTemp); 
 
\t \t temp.removeClass('wi-fahrenheit'); 
 
\t \t temp.addClass('wi-celsius'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<ul id="list"> 
 
    <li>100</li> 
 
    <li>&nbsp;<i class="wi wi-celsius">200</i></li> 
 
    <li>300</li> 
 
</ul>

Это то, что вам нужно?