滚动上的 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>

jQuery

        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 将在 div 中查找类为 shrink 的元素，并且该 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>