Zmiana koloru po przeskrolowaniu

Odpowiedz Nowy wątek
2018-12-20 23:27
0

Cześć, chcę zrobić żeby menu po przeskrolowaniu zmieniło background na czarny mam coś takiego dodam , że console.loga wykrywa. Chyba nie może znaleźć klasy , mam ją w main.scss , która jest kompilowana przez php na styl wewnętrzny. I pytanie ponieważ, żeby nadpisać styl bootstrap'a do nava musiałem dodać !important do background-color: transparent czy może to być przyczyną ?

window.onscroll = function () {
    const navbar = document.querySelector('#navbar');
    if (window.scrollTop > 0) {
        navbar.classList.add("black");
    }
    console.log("siema");
};
.black {
    background-color: black;
}

Pozostało 580 znaków

2018-12-21 01:47
1

Jeżeli masz jakąś własność zdefiniowaną jako !important, to nie nadpisze jej żaden inny styl pozbawiony !important, więc tej klasie "black" też możesz przypisać.

Ale ogólnie to niedobra praktyka, a twój problem z przerabianiem Bootstrapowych styli wynikał prawdopodobnie z tego, że tamtejszy styl był opisany jakiś dłuższym łańcuchem selektorów typu:
DIV.jakiś > DIV.inny > DIV.menu {deklaracje}
a taki zapis ma wyższy priorytet niż późniejsze proste nadpisanie:
DIV.menu {deklaracje}


To jakbyś to zrobił jeżeli bez !important nie działa ? Mam zrobić jakieś "dogłębne" zagnieżdzenie ? - Raloseq 2018-12-21 21:01
Najprościej modyfikując za pomocą JS sam styl obiektu a nie przydając mu nim kolejną klasę. A najsensowniej, odnajdując łańcuch selektorów, który odpowiada za ustawienie przezroczystego tła, np: A > B > C > klasa_z_przezrocztym_tłem i napisać własny, analogiczny, który nadpisze jej ustawienia, np: A > B > C > klasa_z_czarnym_tłem Użyj jakiejś Konsoli WWW w przeglądarce, Firebuga czy co tam masz na pokładzie. - Freja Draco 2018-12-21 23:48
Podałbyś jakiś przykład czegoś takiego bo pierwszy raz się spotykam czy to ma być po prostu navbar.classList.add.('nav black")' coś takiego ? - Raloseq 2018-12-22 00:57
Przeprowadziłam mały test i okazuje się, że jest inaczej niż sądziłam i przypisanie elementowi drugiej klasy o opisanej łańcuchem selektorów, nie nadpisze jednak wartości z pierwszej klasy opisanej łańcuchem selektorów. W tej sytuacji widzę jedno sensowne wyjście: navbar.classList.remove("transparent"); navbar.classList.add("black"); - Freja Draco 2018-12-22 02:04

Pozostało 580 znaków

2018-12-21 10:44
1

https://jsfiddle.net/we9L9h2r/
https://codepen.io/Smakosh/pen/WaRVmE
https://codepen.io/carasmo/pen/ZmQQYy


Co oznacza "e" w parametrach przesyłanych do funkcji ? 2 link - Raloseq 2018-12-21 20:52
Pytanie zrobiłem z drugiego linku ale jak chciałem dodać do tego a,span'a to już nie działało a postąpiłem tak samo z klasami jak w navie. Link do gita https://github.com/Haqz/Simple-Portoflio-CMS - Raloseq 2018-12-22 16:25

Pozostało 580 znaków

2018-12-23 16:01
0

https://codepen.io/anon/pen/wRddKw Czemu document.querySelectorAll nie działa w tym przypadku ? I po dodaniu all nie działa przez to span

edytowany 1x, ostatnio: Raloseq, 2018-12-23 16:03

Pozostało 580 znaków

2018-12-23 16:47

Ok dałem już sobie radę tutaj jest rozwiązanie

const navbar = document.querySelector('.navigation');
const div = document.querySelector('#navbarNav');
const listItem = div.querySelectorAll('.nav-link');
const navSpan = document.querySelector('#nav-span');
window.addEventListener('scroll', function (e) {
    const lastPosition = window.scrollY;
    if (lastPosition > 50) {
        navbar.classList.add('active');
        listItem.forEach(function (e) {
            e.classList.add('active-a');
        });
        navSpan.classList.add('span-active');
    } else if (navbar.classList.contains('active')) {
        navbar.classList.remove('active');
        listItem.forEach(function (e) {
            e.classList.remove('active-a');
        });
        navSpan.classList.remove('span-active');
    } else {
        navbar.classList.remove('active');
        listItem.forEach(function (e) {
            e.classList.rempve('active-a');
        });
        navSpan.classList.remove('span-active');
    }
});

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0