Avatar billede Wezio Juniormester
30. januar 2018 - 22:53 Der er 3 kommentarer

Sticky menubar som på www.w3schools.com

Hej,

Jeg er ved at lave en hjemmeside, som skal virke på alle platforme. Jeg har i CSS lavet en responsiv menu, der tilpasser sig alle skærmstørrelser, og som på smartphones fx kan folde sig ud. Denne menu har jeg placeret toppen af siden, men under mit logo.
Jeg kunne godt tænke mig, at menuen reagerede ligesom den der er i toppen på https://www.w3schools.com

Dvs. Den normalt er placeret lidt nede på siden under logoet, men kravler op i toppen af siden, når der scrolles ned på denne og derved altid er synlig.
Er her nogle der kan hjælpe mig med at greje denne løsning?

På forhånd tak.

Mvh. Kasper
Avatar billede jakobdo Ekspert
31. januar 2018 - 08:46 #1
Måske du kunne kigge på denne: https://github.com/senff/Sticky-Anything
Avatar billede Wezio Juniormester
31. januar 2018 - 13:59 #2
Det ser interessant ud...

Jeg har lavet .js-filen som beskrevet og sat denne kode ind i min head´er:
<script src="jq-sticky-anything.min.js"></script>

Jeg kan læse mig til at nedenstående kode skal tilføjes det element, som jeg vil gøre sticky, men hvor henne skal koden placeres?
$('.main-menu').stickThis();

Jeg vil tro at mit element skal være i mellem disse parenteser?
$('.main-menu').stickThis( ELEMENT HER? );
Men når jeg sætter HTML koden til menu-baren her, virker det ikke?
Avatar billede jakobdo Ekspert
31. januar 2018 - 16:57 #3
Ideen er du smider denne i head eller lige inden </body>

<script src="jq-sticky-anything.min.js"></script>
<script>
$(function() {
    $('.main-menu').stickThis();
});
</script>

Og så smider du dette på din "sticky" menu:

<div class="main-menu">Her er din sticky menu</div>

Så "burde" det virke.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester