javascript - jQuery 仅在 scrollTop = 0 时悬停

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>