SOURCE

const $ = document.querySelector.bind(document);

const container = $('.container');
const commentHead = $('.commentHead');
const commentHeadForPosition = $('.commentHeadForPosition');

const buttonUp = $('.buttonUp');
const buttonDown = $('.buttonDown');
const topContent = $('.topContent');
const topDOM = $('.top');

buttonUp.addEventListener('click', () => {
    commentHeadForPosition.scrollIntoView({ behavior: 'smooth' });
});

buttonDown.addEventListener('click', () => {
    container.scrollTo({top: 0, left: 0, behavior: 'smooth'});
});

new IntersectionObserver(
    ([e]) => e.target.classList.toggle('sticky', e.intersectionRatio < 1), 
    { threshold: [1] }
).observe(commentHead);

$('.button1').addEventListener('click', () => {
    topContent.style.height = '1000px';
});

$('.button2').addEventListener('click', () => {
    topContent.style.height = '300px';
});

const at = new AnyTouch(container);

at.on('pan', (e) => scroll(-e.deltaY));
container.addEventListener('mousewheel', e => scroll(e.deltaY));

const scroll = (deltaY) => {
    if (deltaY > 0) {
        if (topDOM.scrollHeight - topDOM.scrollTop === topDOM.clientHeight) {
            container.scrollBy({ top: deltaY, left: 0 });
        } else {
            topDOM.scrollBy({ top: deltaY, left: 0 });
        }
    } else {
        if (container.scrollTop === 0) {
            topDOM.scrollBy({ top: deltaY, left: 0 });
        } else {
            container.scrollBy({ top: deltaY, left: 0 });
        }
    }
}

<div class="container">
    <div class="outer">
        <div class="top">
            <div class="topHeader">
                筛选器
            </div>
            <div class="topContent">
                <p>多门店评分</p>
                <p>多门店评分</p>
                <p>多门店评分</p>
                <p>多门店评分</p>
                <p>多门店评分</p>
                <p>多门店评分</p>
            </div>
        </div>
        <div class="commentHeadForPosition"></div>
        <div class="commentHead">评价Header<button class="buttonUp">↑</button><button class="buttonDown">↓</button></div>
        <div class="comment">评价内容</div>
    </div>
</div>
<button class="button1">多门店评分长一点</button>
<button class="button2">多门店评分短一点</button>

* {
    box-sizing: border-box;
}

.container {
    width: 400px;
    height: 700px;
    border: 1px solid #333;
    overflow: hidden;
    position: relative;
}

.outer {
    //overflow: auto;
}

.top {
    max-height: 500px;
    overflow: hidden;
    border: 1px solid red;
}

.topHeader {
    height: 100px;
    background: lightcyan;
    position: sticky;
    top: 0;
}

.topContent {
    height: 700px;
    background: lightpink;
}

p {
    background: lightskyblue;
}

.commentHead {
    position: sticky;
    height: 100px;
    top: -1px;
    background: lightblue;
}

.commentHeadForPosition {
    scroll-margin-top: -1px;
}

.comment {
    height: 900px;
    background: lightgreen;
}

.commentHead.sticky .buttonUp {
    display: none;
}

.commentHead:not(.sticky) .buttonDown {
    display: none;
}