I want to implement a hover effect on my header, specifically when the user is at the top of the page. I am working with Shopify and believe the best approach is to add a class when hovering over it and change certain CSS properties (such as text color and height). I currently have this code that achieves a similar result when scrolling. Is there a way to modify this code so that the same effect occurs when hovering over the element, but only if 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');
});