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

Question

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

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

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

继续向下滚动后，我看到了完整的绿色元素，如果向下滚动，我想要这个元素就像CSS语言中一样：位置固定底部0。见下图： 我已经看到了完整的元素 ->相同的链接，但图像名为 Problem3.png

，然后我滚动到下面，我想将其固定在页面底部，如下图所示：

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

是否可以解决这种情况？

总结一下：我有两个 div，一个在上面，第二个在下面，当我向下滚动时，我突然看到另一个元素（绿色 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);
    }
};

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

编辑 - 这是一个 演示