滾動中的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：懸停轉換並且它在那里工作，但是當我滾動到CSS中的那個點時我無法縮小它。

Answer 1

您似乎不太了解樣式的應用方式。 例如.button .shrink不會應用於<div class='button shrink'> ，而是應用於以下對中的第二個div <div class='button'><div class='shrink'> 。

以同樣的方式.button div .shrink將在.button div .shrink查找具有類shrink的元素，並且此div應該是類'button'元素的子元素。 您沒有滿足這些條件的元素，因此您的樣式不適用於任何內容。 嘗試使用.button_shrink而不是.button .shrink和.button div.shrink而不是.button div .shrink （你需要更改$(".button").addClass("shrink"); to $(".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>