Låse et div-element til toppen av siden

Yawa · 6. juli 2011

Jeg har en <div> rett over en tabell som beskriver fargekoder i en tabell.

Det jeg ønsker å oppnå når brukeren begynner å scrolle nedover siden, er at denne <div>'en skal følge med til toppen av vinduet, men så låse deg der og være synlig hele tiden...

Noen som vet hvordan jeg kan få til dette?

OBS: <div>'en skal ikke låses til toppen hele tiden da den ikke er lokalisert på toppen i utgangspuktet, men litt nedpå siden (varierer).

agrimsrud · 7. juli 2011

Greieste er å bruke javascript. Har skrevet en liten funksjon i jQuery. Sikkert ikke feilfri, men bør funke greit nok. Kan testes her.

Legg flg. i <head>:

<style type="text/css"> 
.fixed {
position:fixed !important;
top:0 !important;
margin:0;
}
</style> 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
$(function() {

jQuery.fn.festTilToppen = function(opts) {

	var	$w = $(window),
		$e = this,
		ot = $e.offset().top;

	$w.scroll(function(){
		if( $w.scrollTop() > ot ) {
			$e.addClass("fixed");
		} else {
			$e.removeClass("fixed");
		}
	});
};

// Her endrer du #top med ID til det
// elementet som skal låses til toppen
$("#top").festTilToppen();

})(jQuery);
</script>

Logg inn

Låse et div-element til toppen av siden

Anbefalte innlegg

Yawa

Lenke til kommentar

Videoannonse

agrimsrud

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer