logo   Sidebar

Sidebar03
Intern
Static / Fixed

En sidebar (også set benævnt et sidepanel) er en container (div-boks) til data, der på skærmen typisk vises i det tomme område mellem wrapperens yderside og skærmens inderside. (Boksen kan dog også placeres, så den ligger inde i wrapperens område).


Kodemæssigt kan boksen placeres hvorsomhelst indenfor sidens body-tag. Ved at placere den lige før /body vil den genere indlæsningen af siden mindst.


Den fysiske placering på skærmen styres med CSS. Yderligere styring kan foretages ved anvendelse af javaScript-programmer.


En sidebar der er positioneret med fixed kaldes også en "sticky sidebar", fordi den er som klistret fast på skærmen.


Sidebarer kan deles i 3 hovedtyper:

  • Skærmmidte
    Viser fuldt indhold. Placeres med skærmens midte som udgangspunkt for afstandsberegning.
  • Skærmkant
    Viser fuldt indhold. Placeres med skærmens højre eller venstre kant som udgangspunkt for afstandsberegning.
  • Håndtag
    Viser "håndtag" langs skærmkant. Ved mus-over eller klik på håndtag vises hele sidebarens indhold.



Skærmmidte


En sidebar med afstandsberegning fra midten af skærmen styres således med CSS:


        CSS kode        Forklaring
#sidebar01Selektorens navn
{
width: nnpx;sidebarens bredde i pixel.
height: nnpx;sidebarens højde i pixel.
position: xxx;Kan være absolute eller fixed. Ved absolute følger sidebaren med siden op og ned ved scroll. Ved fixed bliver sidebaren stående under scroll af siden.
top: nnpx;
eller
bottom: nnpx;		Den vertikale afstand i pixel fra skærmens top eller bund til sidebarens top eller bund.
"bottom" synes kun relevant på sider med fast højde.
left: 50%;
eller
right: 50%;		Angivelse af at den horisontale afstandsberegning skal foretages fra midten af skærmen. Det vil være mest hensigtsmæssigt at bruge "left" når sidebaren skal placeres langs skærmens højre side og at bruge "right" når sidebaren skal placeres langs skærmens venstre side
margin-left: nnpx;
eller
margin-right: nnpx;		Margin der flytter sidebaren hhv. til højre og venstre i forhold til skærmens midte. javaScript-programmer skal altid anvendes. Vil nok typisk være 400-600 px.
background: #xxx;sidebarens baggrundsfarve. Kun medtaget midlertidigt af hensyn til markering.
}


HTML-koden er:

<div id="sidebar01">
Div. almindelig HTML-kode
</div>


Ved lille / "minimeret" skærm forbliver sidebaren i samme horisontale position i forhold til wrapper og forsvinder derved under skærmens yderside på den mindre skærm.



Skærmkant


En sidebar med afstandsberegning fra skærmens ydersider styres således med CSS:


        CSS kode        Forklaring
#sidebar02Selektorens navn
{
width: nnpx;sidebarens bredde i pixel.
height: nnpx;sidebarens højde i pixel.
position: xxx;Kan være absolute eller fixed. Ved absolute følger sidebaren med siden op og ned ved scroll. Ved fixed bliver den stående under scroll af siden.
top: nnpx;
eller
bottom: nnpx;		Afstanden i pixel fra skærmens top eller bund til sidebarens top eller bund.
"bottom" synes kun relevant på sider med fast højde.
left: nnpx;
eller
right: nnpx;		Afstanden i pixel fra skærmens venstre eller højre side til sidebarens venstre eller højre side.
background: #xxx;sidebarens baggrundsfarve. Kun medtaget midlertidigt af hensyn til markering.
}

Ved lille / "minimeret" skærm forbliver sidebaren i samme horisontale position i forhold til skærmens yderside og glider derved ind over wrapperen på den mindre skærm.



Sidebar03


Sidebar03 hører egentlig hjemme i en blank kolonne indenfor wrapperen. I mangel af sådan, er den valgte løsning benyttet.

Sidebaren vises som udgangspunkt på den plads, hvor den hører hjemme ifølge strukturen i opbygningen af HTML-siden. Derfor har den position: static;.


Et lille javaScript program sikrer, at den skifter til position: fixed; når den møder skærmens overkant - og skifter tilbage igen når der bliver rette tid dertil.


Sidebaren styres således med CSS:


        CSS kode        Forklaring
#sidebar03Selektorens navn
{
width: nnpx;sidebarens bredde i pixel.
height: nnpx;sidebarens højde i pixel.
margin-left: nnpx;
margin-right: nnpx;		Afstanden i pixel fra kolonnens venstre eller højre side til sidebarens venstre eller højre side.
border: xxxxx;sidebarens omrids. Kun medtaget midlertidigt af hensyn til markering.
}


HTML-koden er:

<div class="sidebar03" id="sidebar03">
<p>Sidebar03<br />Intern<br />Static / Fixed</p>
</div>


Det benyttede javaScript program ser således ud:

<script type="text/javascript">
$(function(){ // document ready
if (!!$('.sidebar03').offset()) { // make sure ".sidebar03" element exists
var stickyTop = $('.sidebar03').offset().top; // returns number
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
if (stickyTop < windowTop){
$('.sidebar03').css({ position: 'fixed', top: 0 });
}
else {
$('.sidebar03').css('position','static');
}
});
}
});
</script>



Sidebar03


Håndtag


Sidebarer med "håndtag" er næsten altid "sticky". De kan udformes på ganske mange måder og vil altid involvere brugen af javaScript. Muligheden for på+ internettet at finde en, der (næsten) passer er så stor, at det oftest skønnes mere hensigtsmæssigt at downloade og evt. tilpasse, end selv at bygge fra bunden.

------------------------------------------------

Sidebar01
HTML-delen placeres lige over <body>
#sidebar01 {
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 250px;
left: 50%;
margin-left: 550px;
}
<div id="sidebar01">
<p>Sidebar01<br />Skærmmidte<br />Absolute</p>
</div>
</body>
Sidebar02
HTML-delen placeres lige over <body>
#sidebar02 {
width: 100px;
height: 100px;
background: yellow;
position: fixed;
top: 100px;
right: 25px;
}
<div id="sidebar02">
<p>Sidebar02<br />Skærmkant<br />Fixed</p>
</div>
</body>
Sidebar03
HTML-delen placeres der hvor den øverste kant af sidebaren skal være.
Den er dynamisk derved at den stopper ved skærmkanten. Derfor skal der også anvendes en jQuery.
#sidebar03{
width: 100px;
height: 100px;
border: 1px solid red;
margin-left: 100px;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
<script type="text/javascript">
$(function(){ // document ready
if (!!$('.sidebar03').offset()) { // make sure ".sidebar03" element exists
var stickyTop = $('.sidebar03').offset().top; // returns number
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
if (stickyTop < windowTop){
$('.sidebar03').css({ position: 'fixed', top: 0 });
}
else {
$('.sidebar03').css('position','static');
}
});
}
});
</script>
<h1>Sidens toptekst</h1>
<div class="sidebar03" id="sidebar03">
<p>Sidebar03<br />Intern<br />Static / Fixed</p>
</div>
Sidebar0
x
x

Sidebar01
Skærmmidte
Absolute

Sidebar02
Skærmkant
Fixed

Sidebar04
Skærmkant
Absolute / Fixed