Feste meny til toppen

Rigo · 17. februar 2012

Jeg har laget en meny som er under en logo. Jeg bruker

position:fixed;

for å feste menyen ved scrolling. Problemet mitt er at høyden på logoen er 50px, og at når jeg da scroller så blir det et mellomrom på 50px; mellom toppen av nettleseren og menyen.

Vet ikke om jeg forklarte meg godt nok. Kan forklare på nytt om det er vanskelig å forstå problemet.

KarmaZ · 17. februar 2012

Forsøk med margin:0px; om jeg forstod deg rett.

Rigo · 17. februar 2012

Tok to bilder for å lettere kunne forklare det. margin:0px; hjalp da altså ikke!

1. http://oi43.tinypic.com/6pnd5h.jpg

2. http://oi43.tinypic.com/34o4zf7.jpg (scrollet en gang ned)

KarmaZ · 17. februar 2012

  .element  { position:fixed; top:2%; right:2%; }

Dette var et eksempel. Men legg ved top, ellers legger du ved det du behøver selv.

Endret 17. februar 2012 av KarmaZ

Rigo · 17. februar 2012

Det der hjalp ikke stort. Nå er jeg tilbake med koden jeg startet med. Om jeg legger til top, så får jeg fortsatt det mellomrommet når jeg scroller..

FraXinuS · 18. februar 2012

Jeg tror du må bruker javascript for å få til dette, her er et eksempel: http://jsfiddle.net/xDMxP/

Rigo · 18. februar 2012

Takk, skal se om dette funker senere, og komme tilbake med et svar!

EDIT:

Får det ikke til å funke, selv om det funker på siden du ga meg. Har tatt over akkurat den samme koden, og den følger fortsatt ikke. Føler meg noe forvirret nå. Skjønner virkelig ikke hvorfor det ikke funker når jeg bruker akkurat samme kode som du har lagt inn på jsFiddle.

Endret 18. februar 2012 av Rigo

FraXinuS · 18. februar 2012

Du må selvfølgelig tilpasse koden til din side. Jeg vet ikke hvordan htmlen på siden din er oppbygd, så du må enten poste htmlen din eller tilpasse det selv.

Koden jeg postet bruker også jQuery, så det må du inkludere hvis koden skal funke.

Endret 18. februar 2012 av FraXinuS

Rigo · 18. februar 2012

Vel, jeg har lagt inn en jQuery link fra google, samt lagt inn akkurat det du la inn på den siden. Det ville fortsatt ikke funke, så vil du at jeg skal poste det jeg har så langt?¨

EDIT:

Prøvde med en blank html fil, for å se om det hjalp, men får fortsatt ikke noe resultat..

index.html

<html>
<head>

<LINK REL=StyleSheet HREF="menu.css" TYPE="text/css" MEDIA=screen>

<script type="text/javascript">
$('#content').append(new Array(80).join('<p>Lorem ipsum dolor sit amet</p>'));

var menu_offset = $('#menu').offset().top;
$(window).scroll(function(e){
   var menu = $('#menu');
   if(window.pageYOffset - menu_offset >= 0){
       menu.css({'position' : 'fixed', 'top': '0'});
   }
   else{
       menu.css('position', 'static');
   }
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>

<body>
       <div id="header"></div>
       <div id="menu"></div>
       <div id="content"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
</body>
</html>

menu.css

#header{
   height: 50px;
   background: #167193;
   margin-bottom: 2px;
}
#menu{
   height: 40px;
   width: 100%;
   background: #333333;
}
p{
   padding: 0.5em;
}

Endret 18. februar 2012 av Rigo

FraXinuS · 18. februar 2012

Du må flytte jquery inkluderingen til før det andre scriptet.

Og slik som koden din er nå så vil javascriptet bli kjørt før innholdet på siden er lastet, dermed finnes ikke #menu når scriptet kjøres og det feiler. Du må enten flytte scriptet helt på bunnen av siden eller lytte etter et event som sier fra når siden er ferdig lastet.

<html>
<head>

<LINK REL=StyleSheet HREF="menu.css" TYPE="text/css" MEDIA=screen>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
 var menu_offset = $('#menu').offset().top;
 $(window).scroll(function(e){
   var menu = $('#menu');
   if(window.pageYOffset - menu_offset >= 0){
     menu.css({'position' : 'fixed', 'top': '0'});
   }
   else{
     menu.css('position', 'static');
   }
 });
});
</script>
</head>

<body>
       <div id="header"></div>
       <div id="menu"></div>
       <div id="content"><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><
br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><
br><br><br><br><br></div>
</body>
</html>

Rigo · 18. februar 2012

Funker fortsatt ikke. Har kun brukt koden du har gitt meg hele veien, men det ender opp med det samme resultatet uansett hva jeg gjør. Menyen forblir på toppen - den vil ikke følge ved scrolling.

Endret 18. februar 2012 av Rigo

FraXinuS · 18. februar 2012

Hvilken nettleser bruker du?

Prøv å åpne det i Chrome, trykk CTRL+SHIFT+J og se om du får noen feilmeldinger.

Rigo · 18. februar 2012

Ingen feilmeldinger der nei. Bruker Google Chrome. Funker koden du skrev ovenfor for deg? Isåfall så er det veldig rart at det ikke funker hos meg.

FraXinuS · 18. februar 2012

diskusjon.no legger inn et mellomrom i den første "</script>" taggen. Har du fjernet det?

Rigo · 18. februar 2012

Der kom den gitt. Tusen takk!

EDIT:

Får den ikke til å funke på det jeg allerede har laget av koding. Vet ikke hvorfor, men om jeg sjekker etter feilmeldinger så kommer det her opp: Uncaught TypeError: Cannot read property 'top' of null

- Fikk det til å funke, takk igjen.

Endret 18. februar 2012 av Rigo

Logg inn

Feste meny til toppen

Anbefalte innlegg

Rigo

Videoannonse

KarmaZ

Rigo

KarmaZ

Rigo

FraXinuS

Rigo

FraXinuS

Rigo

FraXinuS

Rigo

FraXinuS

Rigo

FraXinuS

Rigo

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer