Question

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

编辑：以下是一些图片，可以让我的问题更清晰。

加载页面时的正常状态：
问题，并且Google广告列与页脚冲突：
如何解决：

Answer 1

Derfder ......

Voila，我提出的解决方案：

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

动画有点生涩，但我觉得它可以做你想要的事情

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

让我知道你的想法！

Answer 2

尝试使用以下代码将事件绑定到window.scroll以检查页面是否触及底部（200px底部）并将#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 3

您需要实现窗口滚动功能，这是一个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 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

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

有关可能的修复方法，请参阅Js Fiddle，请根据需要调整像素等进行调整

Answer 6

对于此问题，您应该在CSS中使用z-index

Answer 7

尝试这样的事情

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

Answer 8

试试这个：

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

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

8 个答案: