Когда страница скролится, добавим класс, например, scrolled
:
if ($(window).scrollTop() > 0) {
$('.top-bar').addClass('scrolled')
}
Определим его в css:
.top-bar.scrolled {
opacity: 0.5;
}
Но если наведено мышью, вернем обратно 1:
.top-bar:hover {
opacity: 1;
}
Вот и все, тестим:
$(window).scroll(function() {
if ($(window).scrollTop() > 0) {
$('.top-bar').addClass('scrolled')
} else {
$('.top-bar').removeClass('scrolled')
}
})
.top-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
opacity: 1;
background-color: #ccc;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
z-index: 99;
height: 20px;
}
.top-bar.scrolled {
opacity: 0.5;
}
.top-bar:hover {
opacity: 1;
}
.content {
height: 2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top-bar"></div>
<div class="content"></div>
.top-bar
и такopacity:1;
а что делать, если элемент не скролится и на него не навели мышкой? :-/ – Sublihim 9 янв '17 в 8:48