navbar is niet fixed

[Verwijderd]

Mijn vorige topic is blijkbaar gesloten. Ik kon ook niet de mensen bedanken die reageerde op mijn topic. Hierbij, dank je wel. : )

Nu mijn vraag. Wanneer ik mijn navbar fixed probeer te krijgen is deze niet fixed op de website. Weet jij wat ik verkeerd doe?

HTML:

    <div id="navbar">
        <a href="#home">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
    </div> 
    
    <div class="page-wrapper">

Cascading Stylesheet:

#navbar {
  overflow: hidden;
  background-color: #333;
}

/* Navbar links */
#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

/* Page content */
.content {
  padding: 16px;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 10;
  width: 100%;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;

[ Voor 0% gewijzigd door Creepy op 05-04-2020 00:00 ]

[Wintervacht]

Verwijderd schreef op zaterdag 4 april 2020 @ 21:28:Weet jij wat ik verkeerd doe?

Niet in je vorige topic kijken waarom die gesloten is en daar je nieuwe post op aanpassen.
Het antwoord is daar ook al gegeven.

[Verwijderd]

Helemaal niet. Ze hadden vragen die ik moest beantwoorden.
Mij is duidelijk dat ik die vragen daar mocht stellen als ik maar let op de layout van mijn vraag.

Ik heb nu mijn site erbij gezet en daarmee kan misschien worden gevonden waarom mijn navbar wel of niet werkt.

[ Voor 26% gewijzigd door Verwijderd op 04-04-2020 21:44 ]

[Fonta]

Verwijderd schreef op zaterdag 4 april 2020 @ 21:41:
Helemaal niet. Ze hadden vragen die ik moest beantwoorden.
Mij is duidelijk dat ik die vragen daar mocht stellen als ik maar let op de layout van mijn vraag.

Ik heb nu mijn site erbij gezet en daarmee kan misschien worden gevonden waarom mijn navbar wel of niet werkt.

Je site had je in je vorige post er ook al bij gezet en is daar toen uitgeknipt.
Je laat nog steeds geen eigen initiatief zien wat je zelf al hebt geprobeerd, wat je gezocht hebt etc etc.

[Wintervacht]

Verwijderd schreef op zaterdag 4 april 2020 @ 21:41:
Helemaal niet. Ze hadden vragen die ik moest beantwoorden.
Mij is duidelijk dat ik die vragen daar mocht stellen als ik maar let op de layout van mijn vraag.

Ik heb nu mijn site erbij gezet en daarmee kan misschien worden gevonden waarom mijn navbar wel of niet werkt.

Waar is dan

Mijn vraag
...

Relevante software en hardware die ik gebruik
...

Wat ik al gevonden of geprobeerd heb
...

En wederom; het antwoord staat al in je vorige topic.

[Verwijderd]

Oke, je hebt gelijk @Wintervacht

[ Voor 40% gewijzigd door Verwijderd op 04-04-2020 21:56 ]

[Verwijderd]

Fonta schreef op zaterdag 4 april 2020 @ 21:46:
[...]

Je site had je in je vorige post er ook al bij gezet en is daar toen uitgeknipt.
Je laat nog steeds geen eigen initiatief zien wat je zelf al hebt geprobeerd, wat je gezocht hebt etc etc.

Ik ben er gister een tijd mee bezig geweest en ik begrijp gewoon niet van wat ik doe dat wat letterlijk overeenkomt met andere sites hun codes, dat wanneer ik het doe, het niet werkt.

Heeft het te maken met div en moet de div van de navbar boven die van andere div's staan? Die van mij staat bovenaan in ieder geval. Op andere sites met F12 kom ik er niet achter jammer genoeg.

Weet u wat ik verkeerd doe meneer @Fonta ?

[Fonta]

Zoals @Wintervacht ook al aangaf, het antwoord staat in je andere topic.

[Verwijderd]

Fonta schreef op zaterdag 4 april 2020 @ 21:56:
Zoals @Wintervacht ook al aangaf, het antwoord staat in je andere topic.

Nee? Ik heb alles gedaan volgens mij wat er in vorige topic staat.
Marigin 30px en volgens mij is in mijn sourcecode alles goed geregeld betreft javascript.

[Hahn]

Verwijderd schreef op zaterdag 4 april 2020 @ 22:01:
[...]


Nee? Ik heb alles gedaan volgens mij wat er in vorige topic staat.
Marigin 30px en volgens mij is in mijn sourcecode alles goed geregeld betreft javascript.

Blijkbaar niet, want #navbar krijgt niet de class .sticky erop als je naar beneden scrollt.

Maar zet die position: fixed; gewoon direct op #navbar, en je bent klaar, zonder JavaScript nodig te hebben.

[Verwijderd]

Hahn schreef op zaterdag 4 april 2020 @ 22:02:
[...]

Blijkbaar niet, want #navbar krijgt niet de class .sticky erop als je naar beneden scrollt.

Maar zet die position: fixed; gewoon direct op #navbar, en je bent klaar, zonder JavaScript nodig te hebben.

Beste @Hahn ,
Ik ben een nooby, neem aan dat je superieur bent ten opzicht van mij als het op web development aankomt (jullie allemaal)

Hoe, waar, kan ik lezen over de functionaliteit .sticky, waarom staat er een punt? Ik heb het achter dingen geplakt maar weet niet wat ik doe. Dit is volgens mij gewoon basic css maar heb het nog niet gevonden in een manual. Ken jij een website? Ik kan het niet vinden.

Ik heb het er nu onder geplakt zoals jij zei, maar hij doet het niet. Ik doe nog steeds iets verkeerd.

[ Voor 5% gewijzigd door Verwijderd op 04-04-2020 22:08 ]

[Hahn]

Verwijderd schreef op zaterdag 4 april 2020 @ 22:06:
[...]


Beste @Hahn ,
Ik ben een nooby, neem aan dat je superieur bent ten opzicht van mij als het op web development aankomt (jullie allemaal)

Hoe, waar, kan ik lezen over de functionaliteit .sticky, waarom staat er een punt? Ik heb het achter dingen geplakt maar weet niet wat ik doe. Dit is volgens mij gewoon basic css maar heb het nog niet gevonden in een manual. Ken jij een website? Ik kan het niet vinden.

Lees je eigen code. In de CSS staat '.sticky', die toegevoegd zou moeten worden aan navbar via JavaScript, maar dat gebeurt dus niet.

Maar je lijkt nu al position:fixed; op #navbar gezet te hebben en dat werkt. Probleem opgelost, toch? Ik zie een sticky balk bovenin nu.

[Verwijderd]

Hahn schreef op zaterdag 4 april 2020 @ 22:08:
[...]

Lees je eigen code. In de CSS staat '.sticky', die toegevoegd zou moeten worden aan navbar via JavaScript, maar dat gebeurt dus niet.

Maar je lijkt nu al position:fixed; op #navbar gezet te hebben en dat werkt. Probleem opgelost, toch? Ik zie een sticky balk bovenin nu.

Nee, want wanneer ik scroll blijft het niet staan. Ik gebruik chrome en wil niks meer doen met webflow, ik wil het zelf maken; alleen de navbar blijft niet fixed mee zweven tijdens het scrollen.

[Hahn]

Werkt helemaal prima hier, hij blijft netjes op z'n plek staan (Chrome 80):

[Verwijderd]

Hahn schreef op zaterdag 4 april 2020 @ 22:11:
Werkt helemaal prima hier, hij blijft netjes op z'n plek staan (Chrome 80):

[Afbeelding]

Ik snap er helemaal niks meer van. Ik denk zelfs dat je me in de maling neemt maar verwacht dat dit niet jouw intentie is aangezien je de tijd neemt iemand zoals ik te helpen (veel benodigd effort).

Ik heb Version 80.0.3987.163 (Official Build) (64-bit) en hij scrolt niet mee. Ik heb echt het idee dat ik op een andere wereld leef. Neem je me echt niet in de maling? Ik snap er echt niks van.

[Hahn]

Ik neem je niet in de maling, bij mij blijft 'ie gewoon prima fixed bovenaan staan. Probeer je website eens in incognito window te bekijken?

[Verwijderd]

Hahn schreef op zaterdag 4 april 2020 @ 22:22:
Ik neem je niet in de maling, bij mij blijft 'ie gewoon prima fixed bovenaan staan. Probeer je website eens in incognito window te bekijken?

Als dit een tekenfilm was zou je mijn zou je me een behoorlijke Looney Tunes gezichtsuitdrukking maken. Hoe kan dat nou, in incognito modus werkt het wel. Hoe moet ik nou potentiele clients uitleggen dat ze alleen mijn site kunnen bezoeken in incognito modus.
Dit drukt toch een aparte snor.

Weet jij hoe dat komt? Dadelijk wordt mijn site ervaren als het mediocre van het mediocre.

Het lijkt wel dam-sweet die fixed-bar (ik ben al erg snel verwonderd met de kleine dingen die ik doe in *we development).

[ Voor 8% gewijzigd door Verwijderd op 04-04-2020 22:27 ]

[Hahn]

Heeft niks met incognito te maken, jij zit waarschijnlijk nog naar een gecachte versie te kijken in je normale browser. Even hard refreshen, cache weggooien, of wachten, en het komt vanzelf goed.

[Verwijderd]

Hahn schreef op zaterdag 4 april 2020 @ 22:28:
Heeft niks met incognito te maken, jij zit waarschijnlijk nog naar een gecachte versie te kijken in je normale browser. Even hard refreshen, cache weggooien, of wachten, en het komt vanzelf goed.

Met jou @Hahn , er is geen regen en zonneschijn nodig om een regenboog te maken.

[Hahn]

Nu heb ik het idee dat jij mij in de maling neemt

Maar goed, dit is zeer basis HTML/CSS-kennis. Dus als dit al lastig voor je was, dan raad ik je aan om eens wat cursusjes door te lopen. Begin bijvoorbeeld eens met https://www.w3schools.com/.

[Postman]

Of probeer de HTML/CSS cursussen op Udemy (er zijn genoeg gratis te vinden daar).
YouTube heeft ook voldoende content, maar ik vind het daar lastiger om het kaf van het koren te scheiden door ontbreken van een goede recensie manier.

[Wintervacht]

Codecademy heeft een leuke interactieve course over css en javascript, html zal er ook wel ergens bij staan.
Doe er je voordeel mee!

[Creepy]

Weet je, als je RobIII in "navbar is niet fixed" eens doorleest dan snap je misschien ook waarom ook dit topic weer op slot gaat.