Question

我试图在此内容的底部添加一个页脚，该页脚不会覆盖内容但会将其向上移动。

我能看到它工作的唯一方法就是，当浏览器位于底部时，删除左侧红色'#work'上的'固定'类。

HTML

<div id="header-block">
    Header-block, this sits here in the background
</div>

<div id="content">
    <div id="work">
        This content should be fixed when at the top
    </div>
    <div id="description">
        This content should scroll -
    </div>

</div><!-- end content -->

<div id="footer">
    This should appear at the bottom
</div>

CSS

body {
    margin: 0px;
    padding: 0px;
}
#header-block {
    background: green;
    width: 100%;
    position: fixed;
    z-index: 1;
    height: 300px;
    top: 0;
}
#content {
    margin-top: 300px;
    width: 100%;
    position: relative;
    z-index: 2;
}
#work {
    background: red;
    width: 50%;
    height: 100vh;
    float: left;
    position: absolute;
}
#description {
    background: blue;
    width: 50%;
    height: 1200px;
    float: right;
    font-size: 30px;
}
#footer {
    background: black;
    width: 100%;
    height: 100px;
    position: absolute;
    z-index: 3;
    bottom: 0;
}

Answer 1

如果我理解你的问题是正确的，那么这应该可以解决问题（尽管很遗憾，它非常依赖于JavaScript）。

// Fix work column on scroll
contentStart = $("#content").offset().top ;
contentSize  = $("#content").height() ;

window.onscroll = function(){   
    if( window.XMLHttpRequest ) {
        var position=window.pageYOffset;

        // calculate the position of the footer and the actual seen window            
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();
        var elemTop = $("#footer").offset().top;

         if ( position > 300 && !(docViewBottom >= elemTop)) {
             $('#work').css({'position':'fixed', 'top':'0', 'height':'100vh'});
          } else {
              // if the footer is visible on the screen
              if(docViewBottom >= elemTop) {
                 $('#work').css({ 'top': 0 - (docViewBottom - elemTop) }); // scroll the #main div relative to the footer       
              } else {
                  $('#work').css({'position':'relative', 'top': 'auto'}) ;
              }
         }

    }
}

有关计算的更多信息，或许stackoverflow上的这个问题很有用。

编辑：Andrew Haining在我的回答之间发布了他的答案，或者试试他的链接，也许这是一个更好（更合适）的解决方案。不幸的是，当我在JSFiddle中测试你的代码时，我没有实现这个页面，我没有看到他的答案。

如果您想使用我的脚本，请确保您可以使用不同的分辨率进行测试。它适用于我在JSFiddle中的解析，我没有测试任何其他。

Answer 2

我不是100％确定你想要什么，但是如果你从页脚中移除position: absolute和bottom: 0，并在页脚上方放置一个class='clearboth'的div，那么似乎做你需要的。

CSS

.clearboth {
    clear: both;
}

这是我在你的小提琴上看到的图画;

enter image description here

你想要红色和蓝色总是触摸黑色吗？

我看不到红色覆盖黑色

Answer 3

当页面的滚动位置小于position:fixed div的内联位置时，您应该使用jQuery添加包含#work值的类。滚动到该位置后，删除该类并使该元素重新排列。

您可以使用以下jQuery方法实现此目的.. .scrollTop() .offset().top()和$(window).height()。

This tutorial会让您了解为达到必要结果需要采取的措施，您只需使用$(window).height()，$('#footer').height()和其他一些内容稍微更改计算改变以获得你想要的东西。

Answer 4

根据你提出的问题，我认为这就是你的意思。当红色div到达顶部时应该是固定的，但是当它低于顶部进行滚动时应该是绝对的，而滚动时黑色页脚应该低于红色，请检查我为你完成的代码。只需添加此jquery脚本并运行它。

<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(document).ready(function() {
        $(window).scroll(function () { 

                console.log($(window).scrollTop());

                if ($(window).scrollTop() >= 322) {

                    $('#footer').css("z-index","1");
                    $('#work').css(
                    {
                        "background": "red",
                        "width": '50%',
                        'height': '100vh',
                        'float': 'left',
                        'position': 'fixed',
                        'top': '0'
                    });
                }

                if ($(window).scrollTop() <= 322) 
                {
                    $('#work').css(
                    {
                        "background": "red",
                           "width": "50%",
                           "height": "100vh",
                           "float": "left",
                           "position": "absolute"
                    });
                };



        });

});
</script>

Answer 5

如果不完全是视差，这有点接近于视差如何工作，容器以不同的速度移动，以及一些容器在视口中达到特定的顶部/底部偏移时固定或滚动。

有插件可以做到。 Skrollr

您可以将Skrollr与skrollrcss一起使用，并确保容器如何根据窗口的滚动顶部和容器在屏幕上的位置。

在浏览器底部将div从固定切换为绝对

5 个答案: