Floating sidemeny

[Tonny Kluften]

Hvordan kan jeg få den høyre sidemenyen her, Meny / Bestilling | Piki, til holde seg i samme posisjon i bredden når man skroller?

 

[adeneo]

Du må begynne med å plassere den riktig til å begynne med, da den havner litt midt på skjermen her. Javascript'et kan fikses slik:

$(function() {
    var fixed = false;

    $(document).scroll(function() {
        if ($(this).scrollTop() >= 210) {
            if (!fixed) {
                fixed = true;
                var pos = $('#sidebar').offset();
                $('#sidebar').css({
                    position: 'fixed',
                    left: pos.left,
                    top: 20
                });
            }
        } else {
            if (fixed) {
                fixed = false;
                $('#sidebar').css({
                    position: 'static'
                });
            }
        }
    });
});

 

[Tony J]

Går dette også an med adsense annonsering også, eller er det fy fy og bruke javascript da?

 

[adeneo]

Ikke noe problem å plassere adSense annonser på den måten, så fremt selve annonsekoden ikke endres og man ikke gjemmer annonsen

For eksempel hvis skjermstørrelsen er for liten eller noe slikt, så bør annonsen fortsatt være "synlig", selv om den teknisk sett havner utenfor skjermen, ettersom Google fortsatt teller selv om annonsen er "display:none", og det er derfor ikke tillatt å sette dette, men å flytte på annonsen med javascript er OK så vidt jeg har forstått.

 

[Tonny Kluften]

Takk for det.
Fungerer det javascriptet noe anderledes enn det jeg brukte, jquery? Herfra kom det, Edit this Fiddle - jsFiddle

var fixed = false;

$(document).scroll(function() {
    if ($(this).scrollTop() >= 210) {
        if (!fixed) {
            fixed = true;
            $('#sidebar').css({
                position: 'fixed',
                top: 20
            });
        }
    } else {
        if (fixed) {
            fixed = false;
            $('#sidebar').css({
                position: 'static'
            });
        }
    }
});

 

[adeneo]

Ikke annet enn at det setter avstanden fra venstresiden i tillegg ?

 

[Tonny Kluften]

Ok. Men CSS er ikke riktig heller. Når sidemenyen er fixed så vil den jo flytte seg sidelengs på forsj. monitorer.

 

[adeneo]

Nei, sidebar står som position fixed og 800px fra venstre, som betyr at sidebar'en kommer akkurat 800 piksler fra venstre, uavhengig av hvor bred skjermen er, slik at den havner midt på dersom skjermen er bredere enn de 960 pikslene som er angitt.

i style.css, endre:

#sidebar { width: 160px; float:right; position:fixed; left:800px; }

til

#sidebar { width: 160px; float:right; }

 

[Tonny Kluften]

Ja, da er det på plass
Takker og bukker.

 

[hansson]

Er du sikker på at det var dette du ville oppnå, Tonny? Her kommer det ingen scrollbar nede, og sidebar forsvinner ut av bildet når nettleseren gjøres mindre. 2012-12-11_0321 - ahansson's library

 

[Tonny Kluften]

Noen sidelengs scrollbar vil jeg ikke ha, hvis det var det du mente.
Det er ikke 100% det jeg ville, men det fungerer like bra. Fordi i praksis så forminsker/forstørrer man ikke vinduet mens man drive og bestiller noe. Og skulle man gjøre det så hopper menyen på plass igjen når man scroller.

 

[hansson]

Fiffig, det var jeg ikke klar over. Men ser jo nå at det var det javascriptet over her skulle gjøre.