SOURCE

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

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

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

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';
});

<div class="container">
    <div class="outer">
        <div class="top">
            <div class="topHeader">
                筛选器
            </div>
            <div class="topContent">
                多门店评分
            </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: scroll;
    position: relative;
}

.outer {
    overflow: visible;
}

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

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

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

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

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

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

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

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