在到达页面底部后更改固定位置元素的页边距-顶部位置？

Question

我需要使用垂直滚动条将固定div元素的上边距从边距到顶部:200 0px更改为边距顶部0 0px，在到达页面底部后(或从底部到200 0px)。

如果滚动回顶部，则切换回回。

我想一些javascript/jQuery代码可以做到这一点。

我的html/布局代码：

<div id="header" style="position: fixed; margin-top: 0px;">
     Header content
</div>
<div id="main">
    <div id="left" style="position: fixed; margin-top: 200px;">Google Ads here</div>
    <div id="right">Content posts here</div>
</div>
<div id="footer">
    Footer content
</div>

编辑:这里有一些图片可以让我的问题更加清晰。

1. 加载页面时的正常状态：

​

1. 当您向下滚动时出现问题，并且google ads列与页脚冲突：

​

1. 如何解决这个问题：

​

Answer 1

德福德..。

瞧，我提议的解决方案：

http://jsfiddle.net/YL7Jc/2/

动画有点不爽，但我认为它能做你想做的事

(这是我对较早的一封信的看法：

我可以始终在屏幕上保持一个DIV，但不总是在一个固定的位置？ )

让我知道你的想法！

Answer 2

下面的代码将一个事件绑定到window.scroll，以检查页面是否到达底部(200 if中的底部)，并将#left移动到顶部(margin-top: 0)。

演示： http://jsfiddle.net/6Q6XY/4/ (添加了一些演示代码来查看它何时到达底部)。

$(function() {
    var $left = $('#left');

    $(window).bind('scroll', function() {   
        if (($(document).height() 
               - (window.pageYOffset + window.innerHeight)) < 200) {                
            $left.css('marginTop', 0);
        } else {
            $left.css('marginTop', 200);
        }
    });
});

参考： https://stackoverflow.com/a/6148937/297641

Answer 3

您需要实现窗口滚动函数，这是一个jquery实现，因此请确保包含最新的jquery libaries。

$(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() == $(document).height()) {

            //if it hits bottom
            $('#left').css("margin-top", "0px");

        }
        else {

            $('#left').css("margin-top", "200px");

        }
    });