使用z索引和位置：固定以进行分层滚动

Question

https://jsfiddle.net/t1r088ve/9/
我无法弄清楚如何缩放内容部分，以便用户可以滚动浏览所有内容，而不会使网站有2个垂直滚动条。
我也无法弄清楚如何使内容向上滚动以与封面页相同的方式显示页脚。
请帮忙。
我可以使用Javascript或JQuery，如果这是让它工作的方法。

这是相关的代码，我想：

.container,
.container-fluid {
    margin-bottom: 100vh;
    position: relative;
    top: 0;
    left: 0;
    overflow: auto;
    height: 100%;
}

.body {
    height: 100%;
    background-color: #eee;
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    margin-bottom: 100vh;
}

#parallax {
    overflow: hidden;
    height: 100vh;
    z-index: 10;
}

#footer {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    z-index: -10;
    background-color: #666;
    background-attachment: fixed;
    height: 100vh;
}

Answer 1

这是一个codepen，我认为通过jquery可以实现你想要的东西。

它使用此脚本，它基本上检查初始div的高度，当div的底部到达屏幕顶部时，.body类position从固定更改为{{ 1}} css还有一些微小的变化

Jquery的

relative

CSS

var height = $(window).height();

$(window).resize(function(){
   height = $(window).height();
});

$(document).on('scroll', function(){
  var windowpos = $(this).scrollTop()
  if(height- windowpos < 0){
    $('.body').css('position', 'relative');
  } else {
    $('.body').css('position', 'fixed')
  }
})