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>

如果scrollTop = 0，jQuery只会悬停

1 个答案: