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

Question

我需要使用垂直滚动条在到达页面底部（或距底部 200px）后将固定 div 元素的上边距从 margin-top: 200px 更改为 margin top 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. 加载页面时的正常状态：

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

3. 需要如何解决：

Answer 1

对于这个问题，你应该在 css 中使用 z-index

Answer 2

德夫德……

瞧，我提出的解决方案：

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

动画有点生涩，但我认为它可以满足您的需求

（这是我对之前的 s/o 帖子的看法：
Can I keep a DIV always on the screen, but not always in a fixed position?）

让我知道你的想法！

Answer 3

嗨，首先你应该在标记别人之前更清楚，因为每个人都给出类似的答案然后它表明问题不明确。

请参阅Js Fiddle 以获得潜在的修复，请根据需要调整像素等

Answer 4

HTML

<div id="main" style="width: 960px; margin: 0px auto;"> 
    <div id="left" style="position: fixed; top: 200px; left: 0px; background: #000; width: 100%; color: #fff;">Google Ads here</div> 
    <div id="right"></div> 
</div> 

JAVASCRIPT

<script type="text/javascript">
    $(function() {
        var documentHeight = $(document).height();
        var windowHeight = $(window).height();
        var left = $('#left');
        var leftTopPosition = $('#left').css('top');
        leftTopPosition = parseInt(leftTopPosition.substring(0, leftTopPosition.length-2));             

        $(window).scroll(function(){
            var pageOffsetY = window.pageYOffset;           
            if((documentHeight - pageOffsetY - windowHeight) <= 200 && leftTopPosition == 200) {
                left.stop().animate({
                    'top': '0px'
                });

                leftTopPosition = 0;
            }

            else if((documentHeight - pageOffsetY - windowHeight) > 200 && leftTopPosition == 0) {
                left.stop().animate({
                    'top': '200px'
                });

                leftTopPosition = 200;
            }
        });
    });

</script>

Answer 5

尝试下面将事件绑定到window.scroll 的代码，以检查页面是否到达底部（200 像素的底部）并将#left 移动到顶部（margin-top: 0）..

DEMO： 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 6

试试这个：

$(window).bind('scroll', function(){
   if(($(window).height()-$(window).scrollTop())<200)
   {
       $('#left').css('margin-top',$(window).scrollTop());
   }
   else
   {
       $('#left').css('margin-top',200);
   }
});

Answer 7

您需要实现窗口滚动功能，这是一个 jquery 实现，所以请确保您包含最新的 jquery 库

$(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");

        }
    });

Answer 8

试试这样的方法

      if ($(window).scrollTop() == $(document).height() - $(window).height())   
           {
              document.getElementById(yourid).setAttribute("style","margin-top:0px");
           }