解决div下面的滚动元素（在屏幕下） - 我想在滚动后修复它

Question

我不知道如何解决这种情况：

我有html / css看起来像这样： 该图显示了我的css / html的外观以及登陆页面后屏幕上显示的内容：

当我向下滚动时，我看到绿色元素： 向下滚动 - ＆gt;

继续向下滚动后，我看到了完整的绿色元素，如果我向下滚动，我想在css语言中使用这个元素：position fixed bottom 0.如下图所示： 我看到了完整的元素 - ＆gt;相同的链接，但图像名为problem3.png

然后我滚动到下面，我想将它固定在页面底部，就像在这张图片上一样：

屏幕上的固定元素 - 我想要什么，我不知道该怎么做 - ＆gt;相同的链接，但图像称为problem4.png（愚蠢的垃圾邮件防范机制）

有可能解决这种情况吗？

总结一下：我有两个div，一个在上面，第二个在下面，Wheen我向下滚动我突然看到另一个元素（绿色div）当我继续向下滚动时我想要将此绿色DIV固定在页面底部。

当然，当我向上滚动（回到顶部）时，我想在第二个div的顶部“停放”那个绿色div。

有没有办法用jQuery（Javascript）/ html / css解决这种情况？

提前谢谢

Answer 1

我认为你必须展示你的一些html结构。有很多方法可以达到这种效果。从根本上说，在javascript术语中你会期待：

1. 向窗口滚动添加事件侦听器，以检查绿色元素是否完全在视图中
2. 如果它在视野中，添加一个类（或更改它的css）来修复它所需的位置
3. 更改窗口滚动方法，以便检查红色div与屏幕顶部的相对偏移量。如果它低于应该修复绿色div的位置，请删除之前添加的类。

听起来很复杂，但也不算太糟糕。 javascript就像：

$(function() {
  $(window).scroll(function() {

    if($(".divToFix").hasClass("fixedAtBase")){
        if(Utils.underView($(".redDiv"), $(".divToFix").height())) $(".divToFix").removeClass("fixedAtBase");
    } else {
        if(Utils.inView($(".divToFix"))) $(".divToFix").addClass("fixedAtBase");
    }

  });


});

Utils = {
    underView: function(element, offset) {
        return (($(window).height() + $(window).scrollTop() - offset) <= element.offset().top);
    },

    aboveView: function(element) {
        return ($(window).scrollTop() >= element.offset().top + element.height());
    },

    inView: function(element) {
        return (Utils.aboveView(element) !== true && Utils.underView(element, element.height()) !== true);
    }
};

请记住，我没有测试过那种或任何东西。

编辑 - 这是demo