只有当scrollTop = 0时，jQuery才会悬停

Question

我想为我的标题添加悬停效果，但前提是用户位于页面顶部。我正在与shopify合作，我认为最好的方法是当你将鼠标悬停在上面并更改一些CSS属性（如文本颜色和高度）时，它会添加一个类。如果你滚动，我已经得到了这个代码。如果将鼠标悬停在元素上，可以编辑此代码吗？但只有在scrollTop = 0？

$(document).ready(function() { 
    (function() { 

    $(document).on('shopify:section:load', function(event) {  
     jQuery(window).trigger('resize').trigger('scroll'); 

     var Heightcalculate = $('header').height(); 
     // Responsive edits 
     if($(window).width() > 980){ 
     //caches a jQuery object containing the header element 
     var header = $(".scrollheader"); 
     $(window).scroll(function() { 
      var scroll = $(window).scrollTop(); 

      if (scroll >= 1) { 
      header.removeClass('scrollheader').addClass("coverheader"); 
      $('#phantom').show(); 
      $('#phantom').css('height', Heightcalculate+'px'); 
      } else { 
      header.removeClass("coverheader").addClass('scrollheader'); 
      $('#phantom').hide(); 
      } 
     });   
     } 
     $('.no-fouc').removeClass('no-fouc'); 
     $('.load-wait').addClass('hide'); 

    }); 

Answer 1

悬停，检查$.scrollTop()，并添加类，如果是0

var $header = $(".scrollheader"); 
 
$header.hover(function() { 
 
    if ($(window).scrollTop() == 0) { 
 
    $header.addClass('hovered'); 
 
    } 
 
},function() { 
 
    if ($header.hasClass('hovered')) { 
 
    $header.removeClass('hovered'); 
 
    } 
 
});

body { 
 
    height: 500vh; 
 
} 
 
.scrollheader { 
 
    position: fixed; 
 
    top: 0; left: 0; right: 0; 
 
} 
 
.hovered { 
 
    background: #171717; 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header class="scrollheader">header</header>

你也可以使用一个事件监听器上滚动，如果有人是在顶部在页面上添加一个表示该类的类，然后在该类上触发一个CSS悬停。

$header = $('.scrollheader'); 
 
$(window).on('scroll',function() { 
 
    if ($(this).scrollTop() == 0 && ! $header.hasClass('top')) { 
 
    $header.addClass('top'); 
 
    } else if ($header.hasClass('top')) { 
 
    $header.removeClass('top'); 
 
    } 
 
});

body { 
 
    height: 500vh; 
 
} 
 
.scrollheader { 
 
    position: fixed; 
 
    top: 0; left: 0; right: 0; 
 
} 
 
.top:hover { 
 
    background: #171717; 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header class="scrollheader top">header</header>