0

我有以下脚本：

 $(window).scroll(function () {
                if ($(window).scrollTop() == $(document).height() - $(window).height()) {
                    $("#reas").fadeIn(2000);
                    $(".footer").fadeIn(2000);
                    $(".master_footer").css("position", "relative");
                }
            });

如果用户在#reas 下方滚动，上面的脚本会更改 .master_footer 的位置。但是当我上升时 .master_footer 的位置仍然是相对的。当用户向上滚动时，我该怎么做才能将其重置为位置：绝对？

4

3 回答 3

1

假设您在.master_footer使用 javascript 设置元素之前已设置元素的 css：在您的 javascript 中，当您要将元素重置为其默认样式时，只需style从元素中删除属性：

$(".master_footer").removeAttr("style");

例如：

$(window).scroll(function () {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
        $("#reas").fadeIn(2000);
        $(".footer").fadeIn(2000);
        $(".master_footer").css("position", "relative");
    } else if ($(window).scrollTop() < 500){ // <-- set your reset point here
        $(".master_footer").removeAttr("style");
    }
});

您可以将else if语句设置为您想要重置元素的任何点。

于 2013-07-09T19:16:11.430 回答
1

通过仅更改 js 代码：

$(window).scroll(function () {
                if ($(window).scrollTop() == $(document).height() - $(window).height()) {
                    $("#reas").fadeIn(2000);
                    $(".footer").fadeIn(2000);
                    $(".master_footer").css("position", "relative");
                }else{
                    $(".master_footer").css("position", "absolute");
                }
            });

但我宁愿使用类似的东西：

$(window).scroll(function () {
                    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
                        $("#reas").fadeIn(2000);
                        $(".footer").fadeIn(2000);
                        $(".master_footer").addClass('relative');
                    }else{
                        $(".master_footer").removeClass('relative');
                    }
                });

然后你可以自定义你的CSS

.relative{  position:relative; }
于 2013-07-09T19:23:14.563 回答
0

首先，我建议使用轮询解决方案，而不是将事件处理程序附加到滚动事件，特别是如果您打算支持旧版本的 IE，其中一些似乎会触发每个滚动像素的事件！例如，您可以每秒检查一次滚动位置。

其次，由于您使用的是 2000 毫秒的淡入淡出，因此您应该将元素淡入淡出的状态保存在一个变量中，这样您就不会在元素仍在淡入淡入时触发 fadeOut 事件（或者至少您可以stop()使用现有的动画）。

就您最初的问题而言，如果您在 t == y 时将位置设置为相对位置，那么您似乎应该能够设置$('.master_footer').css('position', 'absolute')when (t < y)。（如果正在使用的浏览器支持过度滚动，您可能还需要检查 t >= y）。

于 2013-07-09T19:23:04.333 回答