滚动上的 JQuery addClass 不起作用

Question

我有 4 个彼此相邻的按钮。我想要的是当我滚动到某个点时，4 个按钮的高度和宽度会发生变化。该按钮由彼此重叠的 2 个 div 组成，因此您只能看到一个 div。当鼠标进入 div 时，底部的 div 会上升，这样您就可以看到它们。我的问题是，如果我滚动到那个特定点，只有底部 div 的属性发生变化，但顶部 div 保持不变。

HTML

        <div class="buttons" class="container">
            <div class="button">
                <div class="topdiv">Something</div>
                <div class="bottomdiv"><p>S.</p></div>
            </div>

            <div class="button" >
                <div class="topdiv">Something</div>
                <div class="bottomdiv"><p>S.</p></div>
            </div>

            <div class="button" >
                <div class="topdiv">Something</div>
                <div class="bottomdiv"><p>S.</p></div>
            </div>

            <div class="button" >
                <div class="topdiv">Something</div>
                <div class="bottomdiv"><p>S.</p></div>
            </div>
        </div>

查询

        if (scrollPos < somepoint){
            $(".buttons").removeClass("fixedtop");
            $(".button").removeClass("shrink");
            $(".button div").removeClass("shrink");
            }

        if (scrollPos >= somepoint){
            $(".buttons").addClass("fixedtop");
            $(".button").addClass("shrink");
            $(".button div").addClass("shrink");
            }

CSS

.button .shrink{
transition: 0.5s;
width: 100px;
height: 100px;
}  

.button div .shrink{
transition:0.5s;
width: 100px;
height: 100px;
}

“.button div”工作正常，但“.button”不行。我尝试使用 CSS :hover transition 并且它在那里工作，但是当我在 CSS 中滚动到那个点时我不能让它缩小。

Answer 1

您似乎不太了解样式的应用方式。例如.button .shrink不会应用于 <div class='button shrink'> , 但到下一对中的第二个 div <div class='button'><div class='shrink'> .

同理.button div .shrink将寻找类为 shrink 的元素在一个 div 中，这个 div 应该是“按钮”类元素的子元素。您没有满足这些条件的元素，因此您的样式不适用于任何东西。尝试使用 .button_shrink而不是 .button .shrink和 .button div.shrink而不是 .button div .shrink (您需要将 $(".button").addClass("shrink"); 更改为 $(".button").addClass("button_shrink"); )。

说明我想说的:

   
.button .shrink{
color:red;
}  

.button div .shrink{
color:blue;
}

<div class='button shrink'>
  No styles will be applied to this div
  <div class='shrink'>
    This one is red, because it's 'shrink' inside 'button'
    <div class='shrink'>
      This is blue because it's 'shrink' inside a div which is inside 'button'
      </div>
    </div>
  </div>
     

我认为您正在尝试做的事情:

.button_shrink{
    color:red;
    } 

.button div.shrink{
    color:blue;
    }

 <div class='button button_shrink'>
      Red
      <div class='shrink'>
        Blue
      </div>
</div>