Поменять стили при наведении на блок

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>

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

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