CSS半页固定半滚动无法正常工作

如何解决CSS半页固定半滚动无法正常工作

使用我在网上找到的代码段https://codepen.io/mattyfours/pen/LNgOWx

我做了一些修改，现在，尽管滚动/固定功能起作用了，但滚动时我的“固定”侧却跳了起来。我在固定侧添加了“背景大小：包含”，仅在开始滚动时才起作用。但是，在页面加载/未发生滚动时，图像保持其全尺寸，这意味着一旦滚动开始，图像就会从全角变为“包含”并创建了一个跳转。

Github： https://github.com/tavimba/fixed-scroll 可以在about.html

中看到该问题

javascript：

var window_height;
var header_height;
var doc_height;
var posTop_sticky1;
var posBottom_sticky1;
var posTop_s2;
var posBottom_s2;
$(document).ready(function() {
    getValues();
});

$(window).scroll(function(event) {
    var scroll = $(window).scrollTop();


    if (scroll < posTop_sticky1) {
        $('.sticky').removeClass('fixy');
        $('.sticky').removeClass('bottom');
    }

    if (scroll > posTop_sticky1) {
        $('.sticky').removeClass('fixy');
        $('.sticky').removeClass('bottom');
        $('#sticky1 .sticky').addClass('fixy');
    }
    if (scroll > posBottom_sticky1) {
        $('.sticky').removeClass('fixy');
        $('.sticky').removeClass('bottom');
        $('#sticky1 .sticky').addClass('bottom');
        $('.bottom').css({
            'max-height': window_height + 'px'
        });
    }

    if (scroll > posTop_s2 && scroll < posBottom_s2) {
        $('.sticky').removeClass('fixy');
        $('.sticky').removeClass('bottom');
        $('#s2 .sticky').addClass('fixy');
    }

});

function getValues() {
    window_height = $(window).height();
    doc_height = $(document).height();
    header_height = $('header').height();

    //get heights first
    var height_sticky1 = $('#sticky1').height();
    var height_s2 = $('#s2').height();

    //get top position second
    posTop_sticky1 = header_height;
    posTop_s2 = posTop_sticky1 + height_sticky1;

    //get bottom position 3rd
    posBottom_sticky1 = posTop_s2 - header_height;
    posBottom_s2 = doc_height;
}


var rtime;
var timeout = false;
var delta = 200;
$(window).resize(function() {
    rtime = new Date();
    if (timeout === false) {
        timeout = true;
        setTimeout(resizeend,delta);
    }
});

function resizeend() {
    if (new Date() - rtime < delta) {
        setTimeout(resizeend,delta);
    } else {
        timeout = false;
        getValues();
    }
}

CSS：

section {
    width: 100%;
    min-height: 100%;
    float: left;
    position: relative;
}

header {
    width: 100%;
    height: 5vw;
    background-color: black;
    float: left;
}

.sticky {
    height: 100%;
    width: 60%;
    float: left;
    position: absolute;
}

.sticky.fixy {
    position: fixed;
    top: 0;
    left: 0;

}

.sticky.bottom {
    position: absolute;
    bottom: 0;
}

.green {
    background-image: url(../imgs/front%20view.jpg);
    background-size: cover;
}

.stickyBg {
    background-image: url(../imgs/bonnets.jpg);
    background-size: cover;
}

.scrolling {
    float: right;
    width: 50%;
    padding: 20px;

    h5 {
        margin-left: 135px;
    }

    p {
        margin-left: 135px;
        font-size: 1em;
        line-height: 1.5;
    }
}

解决方法

跳跃是由position从absolute变为fixed并结合100％的高度引起的。

此外，以上代码还存在以下缺陷：

1. 最大高度分配看起来不一致。
2. JS假定HTML中恰好有两个部分：＃section1和＃s2。第三部分不起作用。
3. 窗口调整大小处理不正确。半页滚动逻辑包括两个步骤：CalculateVars和AdjustDOMElementPositions。为了使外观平滑，必须在3种情况下完成这两个操作：onDocumentLoad，onResize和onScroll。
4. 全局变量。

看起来，它需要一些重构才能工作；）

<section class="js-half-page-scroll-section"><!-- Get rid of id -->
...
</section>

function halfPageScroll() {
  let scrollTop,windowHeight,headerHeight; // and some other common vars
  // Calculate vars
  scrollTop = $(window).scrollTop();
  //...
  let repositionSection = function($section) {
    let sectionHeight; // and some other vars related to current section
    // Some logic
  }
  $('.js-half-page-scroll-section').each((i,el) => repositionSection($(el)));
}

$(document).ready(halfPageScroll);
$(window).scroll(halfPageScroll);
$(window).resize(halfPageScroll); // TODO: add some debounce wrapper with timeouts