只有當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>