Question

我已经设法最终使这个代码工作，它根据URL中的hashtag以及div是否触摸窗口的顶部或底部来淡入和淡出div。 jQuery看起来像这样：

var distanceFromTop = $(window).scrollTop(),
    distanceFromBottom = $(window).scrollTop() + $(window).height();

var divOneFromTop = $("#div-one").offset().top,
    divOneFromBottom = divOneFromTop + $("#div-one").height();

if (window.location.hash == "#div-one" && distanceFromTop >= divOneFromTop && !(distanceFromBottom > divOneFromBottom)) {
    $(".div-one-info").fadeIn(300);
} else {
    $(".div-one-info").fadeOut(300);
}

var divTwoFromTop = $("#div-two").offset().top,
    divTwoFromBottom = divTwoFromTop + $("#div-two").height();

if (window.location.hash == "#div-two" && distanceFromTop >= divTwoFromTop && !(distanceFromBottom > divTwoFromBottom)) {
    $(".div-two-info").fadeIn(300);
} else {
    $(".div-two-info").fadeOut(300);
}

事情是，我需要大约八个div，我重复自己一段荒谬的时间。有没有人知道如何减少这种情况并使其更加“自动化”，所以我不必一直写＃div-one和divOne等等？

Answer 1

如下所示：

var id = window.location.hash;

var divFromTop = $(id).offset().top,
    divFromBottom = divFromTop + $(id).height();

if (distanceFromTop >= divFromTop && !(distanceFromBottom > divFromBottom)) {
    $(id.replace("#", ".") + "-info").fadeIn(300);
} else {
    $(id.replace("#", ".") + "-info").fadeOut(300);
}

你可能会让它更具可读性，但基本的想法是你使用文档位置哈希来识别必要的元素。

Answer 2

您可以使用属性starts with选择器迭代您的div，获取ID并与位置哈希进行比较：

$.each($('[id^="div-"]'), function () {
    var id = $(this).attr('id'),
        divOneFromTop = $(this).offset().top,
        divOneFromBottom = divOneFromTop + $(this).height();

    if (window.location.hash == "#" + id && distanceFromTop >= divOneFromTop && !(distanceFromBottom > divOneFromBottom)) {
        $("." + id + "-info").fadeIn(300);
    } else {
        $("." + id + "-info").fadeOut(300);
    }
});

Jquery代码有效，但必须有一种方法可以减少它

2 个答案: