4

我需要使用垂直滚动条在到达页面底部（或距底部 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. 需要如何解决： 在此处输入图像描述

4

8 回答 8

2

德夫德...

瞧，我提出的解决方案：

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

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

（这是我对较早的 s/o 帖子的看法：
我可以将 DIV 始终保留在屏幕上，但并不总是在固定位置吗？）

让我知道你的想法！

于 2012-09-28T20:46:54.920 回答
1

试试下面的代码，它绑定一个事件来window.scroll检查页面是否到达底部（200px 的底部）并将页面移动#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

于 2012-09-24T16:49:54.343 回答
0

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

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

于 2012-09-28T15:29:55.640 回答
0

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>
于 2012-09-26T07:47:21.763 回答
0

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

        }
    });
于 2012-09-21T11:45:27.893 回答
0

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

于 2020-07-08T12:25:28.697 回答
-1

尝试这样的事情

      if ($(window).scrollTop() == $(document).height() - $(window).height())   
           {
              document.getElementById(yourid).setAttribute("style","margin-top:0px");
           }
于 2012-09-21T11:43:14.270 回答
-1

尝试这个：

$(window).bind('scroll', function(){
   if(($(window).height()-$(window).scrollTop())<200)
   {
       $('#left').css('margin-top',$(window).scrollTop());
   }
   else
   {
       $('#left').css('margin-top',200);
   }
});
于 2012-09-21T11:54:02.920 回答