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 class='button'><div class='shrink'>.

中的第二个 div

以同样的方式.button div .shrink会在div中查找带有classshrink的元素，而这个div应该是class 'button' 的一个元素。您没有满足这些条件的元素，因此您的样式不适用于任何东西。尝试使用 .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>

JQuery 滚动上的 addClass 不起作用

JQuery addClass on scroll doesn't work

jquery

css

addclass