ansaurus

Question

Answer 1

A:

you can do this with any element by applying the css:

#keepmefixed{
  position:fixed;
}

however be aware that IE's support of this is missing, and it doesn't seem to work in Safari on the iPad (from my testing). You'll need to hook in some JavaScript to get it to work in these browsers.

scunliffe 2010-06-14 11:52:43

but i dont want to keep it fixed always, it should be absolute then if scroll downs to this element it will become fixed and when scroll up it will become absolute again

Ahmet vardar 2010-06-14 15:42:42

do you mean it should be `relative` until it would jump offscreen, then switch to position `fixed`? if so, just have a scroll event handler that checks if the scroll position exceeds the top (presuming vertical) position of the element... if so, change to `fixed`... and then vice versa returning to `relative` when the scroll is less than the (original) element position.

scunliffe 2010-06-14 16:55:07

can you show me a code snippet for this ? thanks

Ahmet vardar 2010-06-15 11:24:25

Answer 2

+1 A:

Something like this (tested on Chrome) will work:

<html>
<head>
<title>Example</title>
<style>
        .banner {position: absolute; top: 40px; left: 50px; background-color:cyan}
</style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" />
    <script type="text/javascript" >
$(function()  {
$(window).scroll(function()   {
    var top = $(window).scrollTop();
    if (top < 40) top= 40;
    $('.banner').css({top: top})
    })
})
    </script>
</head>
<body>
<div class="banner">This is the banner</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/><br/><br/> Cras rhoncus euismod sagittis.<br/><br/><br/> Fusce tincidunt consectetur ante eu commodo.<br/><br/><br/> Fusce lacinia consectetur nulla sit amet mattis.<br/><br/><br/> In viverra bibendum nibh vitae pharetra.<br/><br/><br/> Nam non eros semper ipsum facilisis fringilla.<br/><br/><br/> Phasellus sit amet purus interdum arcu hendrerit sagittis.<br/><br/><br/> Sed fermentum, orci non tincidunt pellentesque, tellus ipsum ultrices dui, at venenatis mi turpis non odio.<br/><br/><br/> Etiam elementum massa eu libero molestie nec pulvinar lacus suscipit.<br/><br/><br/> Etiam erat massa, mattis et sollicitudin eu, posuere commodo ligula.<br/><br/><br/> Vestibulum nec sem arcu.<br/><br/><br/> Vestibulum justo risus, feugiat at tristique a, sagittis vel dui.<br/><br/><br/> Sed enim erat, scelerisque sit amet accumsan scelerisque, vestibulum vitae dui.<br/><br/><br/> Integer et orci enim.<br/><br/><br/> Aliquam est mauris, consequat sed egestas vitae, scelerisque non sapien.<br/><br/><br/> Nam feugiat diam eu elit dignissim commodo.<br/><br/><br/> Curabitur eleifend lacus a leo vehicula rhoncus.<br/><br/><br/> Fusce luctus antequis urna sodales vestibulum.<br/><br/><br/> Aliquam tempus nisl vitae arcu bibendum sollicitudin.<br/><br/><br/>
</body>

Edit: positioning the element 40 px under the title, but making it visible if the user scrolls down

Iacopo 2010-06-16 17:01:05

this is exactly what i want, thank you so much

Ahmet vardar 2010-06-17 11:49:44

Answer 3

+1 A:

I have created this demo for you, let me know if this is what you are looking for.

Sarfraz 2010-06-16 17:30:52

no it stays fixed always

Ahmet vardar 2010-06-17 11:44:07

ansaurus

tags:

views:

answers:

dynamic element positioning

related questions