Hoe verander je navigatie background van transparant naar solid als je gaat scrollen?

Status
Niet open voor verdere reacties.

Allard

Gebruiker
Lid geworden
8 dec 2001
Berichten
892
Ik ben bezig met een Squarespace site, en de mainpage heeft een fullbleed image. Het menu is transparant want dat ziet er mooier uit vindt ik.
Het is een sticky menu, en op het moment dat ik ga scrollen, verlies ik de leesbaarheid ervan omdat het transparant blijft.

Ik zou graag mijn menu een solid background geven, op het moment dat mensen gaan scrollen. Dus dat het verandert van transparant naar solid op t moment dat je gaat scrollen

Ik weet dat het mogelijk is, maar ik weet alleen niet precies hoe.. Javascript?

Kan iemand me hiermee helpen?

het adres is www.kodiac.nl

thanks!
 
Kan je hier iets mee?
Code:
<style>
.Header-nav-inner.bgHelpmij {
    background: yellow;
}
.Header-nav-inner.bgHelpmij .Header-nav-item {
    color: blue;
}
</style>

<!-- dit is de html van het menu -->
<div class="Header-nav-inner">
<a href="/" class="Header-nav-item Header-nav-item--active" data-test="template-nav">HomeR</a><a href="/820-park" class="Header-nav-item" data-test="template-nav">About</a><a href="/work" class="Header-nav-item" data-test="template-nav">Portfolio</a><a href="/contact-1" class="Header-nav-item" data-test="template-nav">Contact</a>
</div>

<script>
var MainNav = document.querySelector(".Header-nav-inner");
document.addEventListener('scroll', function (event) {
    if (window.pageYOffset > 200) MainNav.classList.add("bgHelpmij");
    else MainNav.classList.remove("bgHelpmij");
}, true);
</script>
De kleurtjes kan je zelf invullen :)
 
Laatst bewerkt:
Goedemorgen

Bedankt voor je reactie! De code die je stuurde is volgens mij wel voor een nieuw menu. En ik zoek de code om mijn bestaande menu aan te passen, aangezien ik in Squarespace niet makkelijk een eigen menu kan opbouwen.

Kan je me daarbij helpen? Ik kan namelijk wel script en custom CSS toevoegen aan de site, dus op zich zou dat moeten kunnen toch?

Het adres is www.kodiac.nl. En ik wil dus dat op de homepage... de achtergrondkleur van het menu (dus de hele balk)..verandert van transparant..naar een vaste kleur op t moment dat je scrollt...

hoor het graag ! mvg
 
De code die je stuurde is volgens mij wel voor een nieuw menu. En ik zoek de code om mijn bestaande menu aan te passen, aangezien ik in Squarespace niet makkelijk een eigen menu kan opbouwen
De code is echt voor je bestaande menu bovenaan de pagina.
Zet alles wat tussen <style> en </style> staat onderaan in je custom css.
Zet de code <script>.....</script> in de html ergens onder het bestande menu.
De kleuren 'yellow' en 'blue' kan je zelf aanpassen.

Laat even weten als het niet lukt om het script ergens onder het menu te zetten.

Noot: je vindt in de html het menu door te zoeken op: Header-nav-inner
 
Laatst bewerkt:
Ah wacht ik snap het nu, ik begreep je eerste post verkeerd over het HTML stukje

Anyway, ik heb het nu aan de praat. Ik kan in squarespace de HTML niet direct aanpassen, maar ik kan wel script invoeren bij de header of footer van de paginas.
ALs ik het script in het footer gedeelte plaats, dan werkt het zoals ik bedoel dus dat is top.

Het enige wat ik graag zou willen, is dat niet de alleen de navigatie achtergrond solid wordt.. maar de hele bovenste headerbalk (over de hele breedte dus). Dus ik heb de naam aangepast naar .Header--top ipv welke jij noemde

zou je even kunnen kijken of het zo ook werkt bij jou?

Het effect is dus alleen op de homepage...

heel erg bedankt voor je hulp!
 
Kan je me trouwens uitleggen wat dat javascriptje doet? Is het zo dat hij ook de boel zelf transparant maakt? nee toch?

En ik zie trouwens dat het effect op elke page toegepast wordt..terwijl ik het alleen op de homepage wil gebruiken. Hoe stel ik het in dat het alleen op de homepage toegespast wordt?
 
Laatst bewerkt:
Kan je me trouwens uitleggen wat dat javascriptje doet? Is het zo dat hij ook de boel zelf transparant maakt? nee toch?
CSS in Javascript veranderen is geen probleem maar dat heb ik hier niet toegepast.
In het kort heb ik dit gedaan.

scroll je tussen 0 en 200 pixels vanaf de bovenkant dan is de html
<div class="Header-nav-inner">

scroll je meer dan 200 pixels vanaf de bovenkant dan is de html
<div class="Header-nav-inner bgHelpmij">

De Header-nav-inner heb je zelf veranderd, prima gedaan.

Op het plaatje zie je het omslagpunt waarbij de balk verandert.

fiets.jpg
 
Ah ja het is me duidelijk nu, heel erg bedankt. Het is voor mij allemaal nieuw dus fijn dat je het even wilde uitleggen

Zou je me trouwnes nog 1 ding kunnen uitleggen?
Dit is gewoon simple CSS hoor, maar ik kom er niet uit

Als je kijkt naar deze pagina

http://www.kodiac.nl/blog/2017/5/24/alcohol-whiskeys-zkh8k

zie je onderin een slider met een viertal projecten...

ik zou graag een achtergrond kleur willen instellen voor die slider, die over de hele breedte van de browser gaat, dus full width. Ik wil echter de projecten gewoon hetzelfde houden qua spacing als nu, dus echt alleen achtergrond kleur full width. En ik zou dit graag toepassne op alle sliders die op alle project pagina's komen.. Zijn allemaal dezelfde namelijk..

zou je me kunnen helpen met de CSS hiervoor? Ik weet niet goed wat ik moet aanspreken, en met welke CSS dan...

thanks!
 
Laatst bewerkt:
Helaas niet mogelijk tenzij je de complete layout een re-design geeft. Het content gedeelte is namelijk niet paginabreed.
Dit is het best haaklbare.

kodiac3.jpg

Zoek in de html deze class en voeg de style eraan toe.
Code:
<div class="sqs-block summary-v2-block sqs-block-summary-v2" style="background:#ddd;"
 
Laatst bewerkt:
Ja daar was ik al bang voor dat het niet kon. Geen probleem dan doe ik het denk ik wel zoals jij aangaf...

Heel erg bedankt voor je hulp!

mvg
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan