Question

我需要JS的帮助：我有div类的内容.maincom里面有overlay-y：scroll。我想滚动这个div，滚动时我想将div类.maincom的高度从160改为350。

重要提示：当我滚动整个网站（窗口）时，我不想更改此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”是overlay-y：scroll，高度：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);   
        }
     });

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

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

更新：来自Lime In The Coconut的解决方案非常棒。非常感谢！现在我还有一件事：

示例代码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 class 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;
}

现在：如何设置JS - 如果.maincom向下滚动（然后.maincom的高度增加），.reward的底部从140px增加到300px。

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

谢谢！彼得

Answer 1

试试这个，我已插入更多列表元素以查看效果

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: