Question

我有一些图标总是固定在底部（屏幕底部，而不是页面的末尾）。当你不在底部时，我希望所有这些图标都是半透明的。当它们位于底部时变为不透明，然后在用户向上滚动时再次变为半透明。

此外，当图标是半透明的并且用户将鼠标悬停在图标上时，只有该特定图标应该变得不透明。当图标位于底部时，不应该有任何悬停效果（因为图标总是不透明）。

我发了an attempt here但是当图标位于底部时我无法禁用悬停。

这里有点偏离主题但有一种方法只能检测用户何时滚动到页面底部。我在代码中注释掉了一个警告。每次滚动时都会调用警报。我只想要一次调用警报。

哈哈。如果问题太过扭曲，我很抱歉。如果需要，我可以再次改写它。：）

下面是我的代码 -

HTML -

<div id="main">
    <div id="iconTray">
        <img src="icon1.png">
        <img src="icon2.png">
        <img src="icon3.png">
        <img src="icon4.png">
    </div>
</div>

CSS -

#main {
    border: solid 1px green;
    height: 800px;
    position: relative;
}
#iconTray {
    position: fixed;
    bottom: 0;
}
#iconTray img {
    opacity: 0.4;
}

jQuery -

$('#iconTray img').hover(function () {
    $(this).css('opacity', '1');
}, function () {
    $(this).css('opacity', '0.4');
});

$(window).scroll(function () {
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
        //bottom of page
        $('#iconTray img').css('opacity', 1);
        // i basically want to disable hover here when the user is 
        //at the bottom of the page, but i really dont know how to :P 
    } else {
        // this alert is called everytime the user scrolls 
        //alert('yo');
        $('#iconTray img').css('opacity', 0.4);
    }
});

Answer 1

在data()中存储您可以在悬停时检查的内容：

$('#iconTray img').on('mouseenter mouseleave', function (e) {
    if (!$(this).data('bottom'))
        $(this).css('opacity', e.type=='mouseenter'? 1 : 0.4);
});

$(window).scroll(function () {
    var isBottom = $(window).scrollTop() + $(window).height() == $(document).height();

    $('#iconTray img').css('opacity', isBottom ? 1 : 0.4).data('bottom', isBottom)
});

“滚动到底部”检查似乎有点过于准确，但如果它有效......

当图标位于页面底部时禁用悬停效果，否则启用悬停效果

1 个答案: