CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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

Synes godt om

jakobdo Ekspert

31. januar 2018 - 08:46 #1

Måske du kunne kigge på denne: https://github.com/senff/Sticky-Anything

Synes godt om

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?

Synes godt om

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.

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS