在此div内部滚动时，如何更改特定高度div

Question

我在JS中需要帮助：我的页面带有Div类。插入式内部comperlay-y：scroll。我想滚动此div，当滚动时，我想将Div类的高度更改为160。

重要：当我滚动整个站点(窗口(时，我不想更改此DIV的高度。我只想在滚动此div类时才更改此高度。Maincom。

示例代码：

<div class="maincom">
<ul class="nav nav-tabs">
<li class="active">
<a href="#comments" data-toggle="tab">Comments</a></li></ul>
<h2>Your comment</h2>
<form>...</form>
</div>

CSS：

.maincom {
position: fixed;
background-color: white;
width: 100%;
bottom: 0px;
right: 0px;
height: 160px;
overflow-x: hidden;
overflow-y: scroll;
display: block;
clear: both;
background: white;
margin-bottom: 0px;
z-index: 4;
}

div" maincom"是覆盖：滚动，高度：160px。我正在搜索解决方案：当MainCom向下滚动时，高度将为350px。滚动时，高度将返回为160px

这无法正常工作：

$(".maincom").on("scroll", function () {
        var scrollTop = $(".maincom").scrollTop();
        if (scrollTop > 100) {
            $(".maincom").stop().animate({height: "160px"},200);
        }
        else {
             $(".maincom").stop().animate({height: "350px"},200);   
        }
     });

还有其他解决方案吗？:)

第一步现已完成。这是第二/最后一个：

更新：椰子中的石灰解决方案完全很好。多谢 ！现在我还有一件事：

示例代码2：

<div class="reward">You can win 50 points for that</div>
    <div class="maincom">
        <ul class="nav nav-tabs">
        <li class="active">
        <a href="#comments" data-toggle="tab">Comments</a></li></ul>
        <h2>Your comment</h2>
        <form>...</form>
        </div>

和。奖励类别的代码：

.reward{
    position: fixed;
    background-color: white;
    width: 100%;
    bottom: 140px;
    right: -20px;
    height: 64px;
    overflow-x: hidden;
    overflow-y: scroll;
    display: block;
    clear: both;
    background: white;
    margin-bottom: 20px;
    z-index: 5;
    background-color: #0077dd;
    color: white;
    font-size: 10px;
    opacity: 0.8;
}

and现在：如何设置JS-如果.maincom滚动(然后是.maincom的高度增加(，则.horward的底部从140px增加到300px。

如果您也知道解决方案，那么您是最好的！：(

谢谢！彼得

Answer 1

尝试一下，我插入了更多列表元素以查看效果

let maincom = document.querySelector('.maincom')
maincom.addEventListener('scroll',function(){
	if(this.scrollTop>0){
  	this.style.height ="360px"
  }
  if(this.scrollTop === 0){
  	this.style.height = '160px'
  }
})

.maincom {
position: fixed;
background-color: red;
width: 100%;
height: 160px;
overflow-x: hidden;
overflow-y: scroll;
display: block;
clear: both;
background: white;
margin-bottom: 0px;
z-index: 4;
}

<div class="maincom">
<ul class="nav nav-tabs">
<li class="active">
<a href="#comments" data-toggle="tab">Comments</a></li>
<li class="active">
<a href="#comments" data-toggle="tab">Comments</a></li>
<li class="active">
<a href="#comments" data-toggle="tab">Comments</a></li>
<li class="active">
<a href="#comments" data-toggle="tab">Comments</a></li>
<li class="active">
<a href="#comments" data-toggle="tab">Comments</a></li>
<li class="active">
<a href="#comments" data-toggle="tab">Comments</a></li>
<li class="active">
<a href="#comments" data-toggle="tab">Comments</a></li>
<li class="active">
<a href="#comments" data-toggle="tab">Comments</a></li>
<li class="active">
<a href="#comments" data-toggle="tab">Comments</a></li>
<li class="active">
<a href="#comments" data-toggle="tab">Comments</a></li>
<li class="active">
<a href="#comments" data-toggle="tab">Comments</a></li>
<li class="active">
<a href="#comments" data-toggle="tab">Comments</a></li>
<li class="active">
<a href="#comments" data-toggle="tab">Comments</a></li>
<li class="active">
<a href="#comments" data-toggle="tab">Comments</a></li>
<li class="active">
<a href="#comments" data-toggle="tab">Comments</a></li>
<li class="active">
<a href="#comments" data-toggle="tab">Comments</a></li>
<li class="active">
<a href="#comments" data-toggle="tab">Comments</a></li>
<li class="active">
<a href="#comments" data-toggle="tab">Comments</a></li>
</ul>
<h2>Your comment</h2>
<form>...</form>
</div>