There is such a block

<div class="top-bar"> </div>

Such styles

 .top-bar { position: fixed; top: 0; left: 0; right: 0; opacity:1; background-color: #fff; box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2); z-index: 99; }

This is Header. It is fixed. How to make it so that when you scroll down, it becomes the property opcity:0.5 , and when you hover on it opacity:1 ;

  • so at. .top-bar and so opacity:1; and what to do if the element is not scrolled and it is not hovering over it? : - / - Sublihim

3 answers 3

 var scrollTop = $(window).scrollTop(), e = $('.top-bar'); // кэшируем элемент, чтобы не искать его каждый раз, т.к. событие scroll отстреливает часто $(window).scroll(function() { if(scrollTop < $(window).scrollTop()){ e.addClass('current'); }else if(scrollTop > $(window).scrollTop()){ e.removeClass('current'); }; scrollTop = $(window).scrollTop(); }); 
 body {height: 1000px} .top-bar { position: fixed; top: 0; left: 0; right: 0; opacity: 1; height:20px; /* Добавил, что бы наглядно было */ background-color: #fff; box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2); z-index: 99; } .top-bar.current {opacity: 0.5} .top-bar.current:hover {opacity: 1} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="top-bar"> </div>

  • MB -sb rename to something without a hyphen in the beginning? And to drive the whole header into the variable, not its class. - br3t
  • @ br3t, if this is so important, then here is Yuri
  • thanks, everything is cool, only when you spin the wheel up for some reason it becomes active - duddeniska
  • @duddeniska, the wheel on the mouse is broken. I have a twist and sometimes it works down - Yuri

 $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 100) { $(".top-bar").addClass("top-bar-current"); } else { $(".top-bar").removeClass("top-bar-current"); } }); 
 body{ min-height: 2000px; background: #ddd; } .top-bar { height: 60px; position: fixed; top: 0; left: 0; right: 0; opacity: 1; background-color: #fff; box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2); z-index: 99; } .top-bar-current{ opacity: 0.5; transition: 0.3s; } .top-bar-current:hover{ opacity: 1; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="top-bar"> </div>

    When the page scrolls, add a class, for example, scrolled :

     if ($(window).scrollTop() > 0) { $('.top-bar').addClass('scrolled') }

    We define it in css:

     .top-bar.scrolled { opacity: 0.5; }

    But if hovering the mouse, return 1:

     .top-bar:hover { opacity: 1; }

    That's all, we test:

     $(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>