CSS半页固定半滚动不流畅

Question

使用我在网上找到的代码片段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;
    }
}

Answer 1

跳跃是由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