Question

我有以下脚本：

 $(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仍然处于相对位置。我该怎么做才能将它重置为位置：当用户向上滚动时绝对？

Answer 1

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

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"); } });语句设置为您希望重置元素的任何位置。

Answer 2

仅更改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; }

Answer 3

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

其次，由于你使用2000ms衰落，你应该在变量中保持元素的状态被淡化，这样你就不会在元素仍然消失时触发fadeOut事件（或者至少你可以stop()现有动画。）

就你原来的问题而言，如果你在t == y时将位置设置为相对，那么看起来你应该能够在{t $('.master_footer').css('position', 'absolute')。（如果正在使用的浏览器支持过度滚动，您也可能需要检查t＆gt; = y。）

如果用户向上滚动，如何重置CSS？

3 个答案: