Question

jQuery的：

function showDiv() {
    if ($(window).scrollTop() > 610) {
        $(".a").css({"position": "fixed", "top": "10px"});
    } else {
        $(".a").css({"position": "relative", "top": "0px"});
    }
}
$(window).scroll(showDiv);
showDiv();

HTML：

<div>
    <div class="a">
        A
    </div>
    <div class="b">
        B
    </div>
</div>

当用户滚动过去 div“B”（A和B不在视线范围内）时，我想这样做，然后 div“A”会褪色in并将自己固定在浏览器的顶部。

当你向上滚动并且 div“B”重新出现时，我希望 div“A”淡出并将自身重新定位回原来的位置。

我的代码目前正是这样做的，除了它不会褪色。

我尝试过使用.is(":visible")，.is(":hidden")，.hide();，以便我可以使用fadeIn();和fadeOut();，但无论我尝试什么，我无法弄清楚，我知道这首先是无效的。可能有一些方法可以检测它是否通过了div而不是通过某个坐标？

Answer 1

这是适合您需求的东西：

function showDiv() {
    if ($(window).scrollTop() > 610 && $('.a').data('positioned') == 'false') {
        $(".a").hide().css({"position": "fixed", "top": "10px"}).fadeIn().data('positioned', 'true');
    } else if ($(window).scrollTop() <= 610 && $('.a').data('positioned') == 'true') {
        $(".a").fadeOut(function() {
            $(this).css({"position": "relative", "top": "0px"}).show();
        }).data('positioned', 'false');
    }
}
$(window).scroll(showDiv);
$('.a').data('positioned', 'false');

指向工作示例的链接：http://jsfiddle.net/MFUw3/10/

编辑：我添加了Sparky672建议的代码改进和（最初省略的）淡出。

jQuery：在页面滚动上隐藏/显示Div

1 个答案: