addClass() работает, но у него есть проблема с приоритетом css

Question

Так что я хочу добавитьClass() в другой класс, но это работает некорректно.

В СКС у меня есть:

body { 
main { 
    section.theory { 
    position: absolute; 
    width: 100vw; 
    height: calc(100vh - 100px); 
    top: 100vh; 
    background-color: $white; 
    box-shadow: 0px -5px 5px #cfcfcf; 
    overflow: hidden; 
    } 
} 

.J-bigSection-visible { 
    top: 100px; 
}  
} 

И в JavaScript У меня есть:

$('#theory-trigger').on('click', function(){ 
    $('section.theory').addClass('J-bigSection-visible'); 
}); 

Когда я вижу исходный код страницы DOM-считывает функцию и добавить класс, но CSS ISN» t. он кажется подчеркнутым, поэтому верх: 100vh остается.

Если я пишу .css ({'top': '100px'}); на jQuery это работает, но в этом проекте я хочу остаться только с css. Что я делаю неправильно? :/

Answer 1

В вашем SCSS вам необходимо переместить .J-bigSection-visible {top: 100px;} внутри блока section.theory. Это добавит необходимую специфику.

SCSS

body { 
main { 
    section.theory { 
    position: absolute; 
    width: 100vw; 
    height: calc(100vh - 100px); 
    top: 100vh; 
    background-color: $white; 
    box-shadow: 0px -5px 5px #cfcfcf; 
    overflow: hidden; 

    &.J-bigSection-visible { 
     top: 100px; 
    } 
    } 
}  
} 

EDIT: Ответы два комментария вопросы.

Первый вопрос, вы можете использовать тот же класс. Вы просто должны изменить SCSS, чтобы отразить это:

SCSS

body { 
    main { 
     section.theory { 
     position: absolute; 
     width: 100vw; 
     height: calc(100vh - 100px); 
     top: 100vh; 
     background-color: $white; 
     box-shadow: 0px -5px 5px #cfcfcf; 
     overflow: hidden; 

     &.J-bigSection-visible { 
      top: 100px; 
     } 
     } 
     section.practice { 
     position: absolute; 
     width: 100vw; 
     height: calc(100vh - 100px); 
     top: 100vh; 
     background-color: $white; 
     box-shadow: 0px -5px 5px #cfcfcf; 
     overflow: hidden; 

     &.J-bigSection-visible { 
      top: 100px; 
     } 
     } 
    }  
    } 

Второй вопрос: да, вы можете addClass к элементу с ID. Вам просто нужно изменить Jquery быть $('#elementWithID').addClass('yourClass');

Примечание: Это добавит CLASS к вашему элементу, так как ваши элементы могут иметь только один ID

Answer 2

Вы неправильно используете CSS.

body main section.theory более специфичен, чем body .J-bigSection-visible

Попробуйте section.J-bigSection-visible и переместить его внутри main блока - это будет иметь такую ​​же специфичность, и так как он приходит позже в листе будет переопределить.

В более общем случае, если такое исправление недоступно, вы можете использовать top: 100px !important; для принудительного переопределения.