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

Posted 2023-03-05

【中文标题】到达页面底部后更改固定定位元素的边距顶部位置？

【英文标题】：Change margin-top position of an fixed positioned element after reaching the bottom of the page?

【发布时间】：2012-09-13 20:00:13

【问题描述】：

我需要使用垂直滚动条在到达页面底部（或距底部 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>

编辑：这里有一些图片可以让我的问题更清楚。

加载页面时的正常状态：

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

需要如何解决：

【问题讨论】：

是的，Javascript 可以做到。

一个 position='fixed' 的元素不在文档流中并且没有边距。您可以更改最高值...

你能说清楚吗？据我了解，您在距顶部 200 像素处有一个 div。您希望在滚动页面时逐渐移到顶部。当您在文档末尾滚动时，它应该在顶部的 0px 处？我说的对吗？

【参考方案1】：

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

【参考方案2】：

德夫德……

瞧，我提出的解决方案：

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

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

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

让我知道你的想法！

【讨论】：

我错过了什么？这没有成功吗？附言感谢投票的人:-)

【参考方案3】：

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

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

【参考方案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>

【讨论】：

谢谢，我明天试试。今天我还有太多其他的工作。

【参考方案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://***.com/a/6148937/297641

【讨论】：

嗯，我需要一些不同的东西。我用更多信息和图片编辑了我的问题。

@Derfder 请发布 layout/html 和相应的 css，以便我们可以使用它

#header 和 #left 是固定的，其他 div 是 position: relative 和 float: left。样式、边距和 z-index 对我来说不是问题。唯一的问题是在向下滚动并开始使用谷歌广告向上移动左侧 div 时检测结束（从底部开始 200 像素），因此页脚不会干扰它们。当我滚动到顶部时，反之亦然。

@Derfder 这不适合您.. 我们需要查看您的 html 和 css 以了解您是如何修复此 #left 和 #top 的。修复这个小提琴jsfiddle.net/6Q6XY/5中的html，就像你在你的应用程序中一样。

【参考方案6】：

试试这个：

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

【讨论】：

它正在制作奇怪的东西。你试过你的代码吗？它使我的页面更长和东西。也不工作;(。

【参考方案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");

        
    );

【讨论】：

不工作，即使我改变 $('#left').css("margin-top", "0px"); for alert("bottom!"; 没有任何警报。我尝试了使用和不使用 $(document).ready (function () //code ); 你的代码不起作用;(

它确实有效，也许如果你粘贴你的代码以便我们检查你做错了什么js-fiddle

【参考方案8】：

试试这样的方法

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