01. Allmänt om webbutveckling

Sticky-div?

2015-04-25 18:43 #0 av: Deviance

Hejsan!

Jag har en liten fundering angående sticky-div, har googlat en del men tycker inte att jag riktigt förstår då jag inte ligger på samma nivå i webbutveckling som andra medlemmar på det forumet så jag vänder mig hit där någon förhoppningsvis kan nybörjar guida mig :)

Jag kodar min nya blogg design till min blogg som är skapad på blogg.se. Och jag vill ha en dropdown meny som följer med sidan ner. Jag som har adblocker ser inte annonserna och då ser det såklart ut precis som jag vill men det är inte optimalt för de som inte använder adblocker. Då fastnar istället min dropdown i mitten på sidan ungefär så jag undrar om någon kan kolla om jag kan göra dropdown-diven sticky först när man scrollat så den hamnar vid toppen av sidan?

Kan gärna PMa min länk till testbloggen

Anmäl
2015-04-25 19:57 #1 av: Deviance

Okej så jag lyckades hitta en bra kod för sticky div :) Det enda problemet jag får är att det hackar till när den går från flytande till position: fixed; det kommer liksom upp en vertikal scroll innan man scrollat ner tillräckligt långt och det är den hoppar till och fixerar sig och den vertikala scrollen försvinner. Kan jag få den vertikala scrollen att försvinna helt?

mylifeaslinnea.blogg.se/testing

Anmäl
2015-04-25 22:44 #2 av: Deviance

Fortsätter uppdatera processen av det så får ni läsa när någon ser detta och kan komma med feedback :)

Har fortfarande problemet jag förklarat i senaste inlägget men nu har det tillkommit ett till problem. Sticky-div vägrar fungera på inläggssidorna (permalinken till ett inlägg), arkivsida eller kategorisida trots att jag lagt in scriptet och htmlkoden i html-mallen för dessa sidor?

Anmäl
2015-04-25 23:23 #3 av: yeahsica

Jag ser ingen vertikal scroll när jag tittar (Chrome & Firefox), fixade det sig? Om du vill fixa till "hoppet" som blir kan du använda den här uppdaterade koden:

function sticky_relocate() {
  var window_top = $(window).scrollTop();
  var div_top = $('#sticky-anchor').offset().top;
  if (window_top > div_top) {
    $('#sticky').addClass('stick');
    $('body').css('padding-top', '60px');
} else { $('#sticky').removeClass('stick');
    $('body').css('padding-top', '0');
} } $(function() { $(window).scroll(sticky_relocate); sticky_relocate(); });

Har fetmarkerad det jag lagt till. "60px" står för höjden på din meny, ändra den till rätt värde så ska inte sidan hoppa mer. Vet tyvärr inte varför det inte fungerar på arkiv- och kategorisidorna.


Anmäl

Bli medlem på iFokus

För att kunna delta i diskussionen måste du bli medlem på iFokus. Det går snabbt, enkelt, och kostar ingenting. Medlemskapet ger dig tillgång till över 300 sajter.