Annons:
Etikettallmänt-om-webbutveckling
Läst 695 ggr
Deviance
2015-04-25 18:43

Sticky-div?

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

____________

hamstrar & fotografering

Annons:
Deviance
2015-04-25 19:57
#1

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

____________

hamstrar & fotografering

Deviance
2015-04-25 22:44
#2

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?

____________

hamstrar & fotografering

yeahsica
2015-04-25 23:23
#3

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.

Upp till toppen
Annons: