Wybieranie elementu poprzez klasę w jQuery

Chciałbym pobrać element po przez klasę css by dodać do niego inna klase css i potem odpowiednio usunąć.
W head dołączam:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Kod jQuery wyglada następująco

<script>
        $(document).ready(function() {
            $(window).scroll(function() {
                var scrollTop = $(window).scrollTop();
                if (scrollTop > $(document.body).offset().top) {
                    $("nav").addClass("nav-active");
                    //$("div").hasClass("nav-end").addClass("nav-end-active");
                    $("#abba").addClass("nav-end-active");
                } else {
                    $("nav").removeClass("nav-active");
                    $("#abba").removeClass("nav-end-active");
                }
            });
        });
    </script>

Kod HTML:

<nav>
        <div class="nav-logo">
            <div class="text">LoremIpsum</div>
        </div>
        <div class="nav-button"></div>
        <div class="nav-button"></div>
        <div class="nav-button"></div>
        <div class="nav-button"></div>
        <div class="nav-button">
            <div class="text">Lorem</div>
        </div>
        <div class="nav-button">
            <div class="text">Lorem</div>
        </div>
        <div class="nav-button">
            <div class="text">Lorem</div>
        </div>
        <div class="nav-button">
            <div class="text">Lorem</div>
        </div>
        <div id="abba" class="nav-end">
            <div class="text">Loremipsum.</div>
        </div>
    </nav>

Kod CSS:

nav {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 10.5vh;
    background-color: rgba(0, 0, 0, 0);
    display: grid;
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(12, 1fr);
    color: white;
    overflow: visible;
    z-index: 2;
    transition: all 300ms ease;
}

nav:hover {
    background-color: white;
    color: black;
    transition: all 300ms ease;
    box-shadow: 0px 1px 3px 0px rgba(12, 31, 81, 0.75);
}

.nav-active {
    background-color: white;
    color: black;
    transition: all 300ms ease;
    box-shadow: 0px 1px 3px 0px rgba(12, 31, 81, 0.75);
}

nav:hover .nav-end {
    border-left: 1px solid #E0E5F0;
    opacity: 1.0;

}

.nav-end-active {
    border-left: 1px solid #E0E5F0;
    opacity: 1.0;

}

W konsoli nie mam błędów a mimo to klasa nie jest dodawana nawet poprzez ID. Macie jakies pomysły?
Nie wiem dlaczego klasa nie jest dodawana.

U mnie klasy "nav-active" oraz "nav-end-active" są dodawane (i później usuwane).
Po dodaniu tekstu (aby można było scrollować) wygląda to następująco:

https://pasteboard.co/H0uT0iB.png

Faktycznie dodaje. Jednak jak widze, mimo że dodana klasa ma własność opacity na 1.0 to jest ona nieaktywna. Wartość ta jest jakby aktywowana dopiero po najechaniu myszą. Dopiero jak wyłączyłem wartość opacity z klasy nav-end to dopiero klasa nav-end-active dodana poprzez jQuery przyniosła pożądany skutek (screen). Może jakieś pomysły, dlaczego nav-end-activ nie działa a nav-activ już tak

U mnie po dodaniu klasy "nav-end" (w Twoim pierwszym poście brakuje jej) i przetestowaniu widze że "opacity" w klasie "nav-end-activ" jest aktywna i ma wartość 1.
Możesz dokładniej napisać jaki efekt wizualny chciałbyć osiągnąć?
Możesz także uzupełnić kod z pierwszego posta?

Cały CSS związany z menu:

nav {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 10.5vh;
    background-color: rgba(0, 0, 0, 0);
    display: grid;
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(12, 1fr);
    color: white;
    overflow: visible;
    z-index: 2;
    transition: all 300ms ease;
}

nav:hover {
    background-color: white;
    color: black;
    transition: all 300ms ease;
    box-shadow: 0px 1px 3px 0px rgba(12, 31, 81, 0.75);
}

.nav-active {
    background-color: white;
    color: black;
    transition: all 300ms ease;
    box-shadow: 0px 1px 3px 0px rgba(12, 31, 81, 0.75);
}

nav:hover .nav-end {
    border-left: 1px solid #E0E5F0;
    opacity: 1.0;

}

.nav-end-active {
    border-left: 1px solid #E0E5F0;
    opacity: 1.0;
    background-color: aqua;
}

.nav-logo {
    grid-area: 1 / 1 / 1 / 3;
    color: inherit;
    font-size: 2rem;
    text-align: center;
    background-color: inherit;
    position: relative;
}

.nav-button {
    color: inherit;
    font-size: 1rem;
    font-size: 500;
    background-color: inherit;
    line-height: 100%;
    transition: all 300ms ease;
    position: relative;
}

.nav-button:hover {
    color: #29C9FF;
    font-size: 1rem;
    font-size: 500;
    background-color: inherit;
    line-height: 100%;
    transition: all 300ms ease;
}

.nav-end {
    background-color: inherit;
    color: inherit;
    grid-area: 1/11/1/13;
    text-align: center;
    font-size: 1.5rem;
    position: relative;
    opacity: 0.0;
}

Efekt ma być taki że gdy zjeżdżam niżej menu ma wyglądać tak jak gdybym najechał myszą (odpowiednie klasy i reguły css są dodawane tylko nie respektowane przez przeglądarkę - wartość opacity i background-color są przekreślone).

Jeżeli chcesz osiągnąć efekt "najazdu" (najazd.png) podczas scrollowania i tym samym sprawić by reguły dodanej klasy "nav-end-active" były brane pod uwagę musisz sprawić żeby były one "ważniejsze" niż reguły klasy "nav-end". W tym celu możesz użyć "!important" w klasie "nav-end-active":

.nav-end-active {
    border-left: 1px solid #E0E5F0;
    opacity: 1.0 !important;
    background-color: aqua !important;
}

lub dokładniej sprecyzować CSS-Selektor:

.nav-end.nav-end-active {
    border-left: 1px solid #E0E5F0;
    opacity: 1.0;
    background-color: aqua;
}