CODEWITHSUNDEEP
javascripthtmlcss
Jonas B
Jonas B

Reputation: 2391

Positioning a div relative to scroll position

This script shows and positions a div
like: 

function myfunction()  
{  
   obj.style.visibility = "visible";
   obj.style.width: "100%";  
   obj.style.height = "100%";  
   obj.style.position = "absolute";
   obj.style.top: "0px";
   obj.style.left: "0px";
   obj.style.z-index = "44";  
   obj.focus()  
 }

and so on
<b onclick="myfunction()">Click here</b>

Of course it's a bit more than that, but this is to show you what I'm trying to do. This works well, the div fills the screen like it should.

The problem is when sometimes we display a lot of links so the user has to scroll.. when the div shows its always on the top of the page and the user gets scrolled up there when it gets focus. When the user is done and closes the div, he has to find his way back down the list where he was.

Is there any way to position the div relative to the browsers scroll position?

Upvotes: 1

Views: 14204

Answers (4)

vapcguy
vapcguy

Reputation: 7537

I used this to do it: http://www.pixelbind.com/make-a-div-stick-when-you-scroll/#comment-800

But I had to edit the CSS to use "absolute", not "fixed" - which gets around the IE bug and allows you to be able to specify the number in pixels from the top where you want to display the div.

Try:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript"> 
$(document).ready(function() {
var s = $("#sticker");
var pos = s.position();                    
$(window).scroll(function() {
    var windowpos = $(window).scrollTop();
    s.css("top", windowpos + 150);
    //s.html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos);
    s.html("<table width='750' align='center' style='color:white;font-face:Times;font-weight:bold;text-decoration:underline'><tr><td align='center' width='61%'>Column 1</td><td align='center'><span style='' width='10%'>Column 2</td><td align='center' width='29%'>Column 3</td></tr></table>");
    if (windowpos >= pos.top) {
        s.addClass("stick");
        $(".linebreak").show();
    } else {
        s.removeClass("stick"); 
        $(".linebreak").hide();
    }
});
});
</script>
<style type="text/css">

div#sticker {
padding:11px;
background:#AAA;
}
.stick {
position:absolute;
z-index:-10;
color:white;
}
</style>

and adding rows to a table to get a table row that follows the table as you scroll:

<tr>
<td colspan="3">
    <div id="sticker" class="stick">
        <table width="780" style="text-decoration:underline;color:white;font-weight:bold">
            <tr>
                <td align="center" width="61%">Column 1</td>
                <td align="center" width="10%">Column 2</td>
                <td align="center" width="29%">Column 3</td>
            </tr>
        </table>
    </div>
</td>
</tr>
<tr><td class="linebreak"><p>&nbsp;</p></td></tr>
<tr><td class="linebreak"><p>&nbsp;</p></td></tr>
<tr><td class="linebreak"><p>&nbsp;</p></td></tr>

Upvotes: 0

balexandre
balexandre

Reputation: 75073

as long as you have the

position: fixed;

will be be ok...

or am I missing something here?

Take a look at, for example, UserVoice announce image in several sites, like tr.im (now defunct)

it has the behaviour that, I think, you are trying to accomplish, am I right?

alt text http://www.balexandre.com/temp/2009-09-23_1449.png

the css that you can grab from FireBug is:

a#uservoice-feedback-tab {
   background:#A5C1D1 url(http://feedback.tr.im/images/feedback_tab_black.png) no-repeat scroll -2px 50%;
   border-color:#A5C1D1 -moz-use-text-color #A5C1D1 #A5C1D1;
   border-style:outset none outset outset;
   border-width:1px medium 1px 1px;
   display:block;
   height:90px;
   margin-top:-45px;
   position:fixed;
   right:0;
   top:40%;
   width:25px;
   z-index:100001;
}

alt text http://www.balexandre.com/temp/2009-09-23_1450.png

try to apply to your code :)

Upvotes: 8

Ty W
Ty W

Reputation: 6814

could use position:fixed, but you'd lose IE6 unless you use one of the hacks to get around the IE6 incompatibility.

Upvotes: 0

Khodor
Khodor

Reputation: 1006

you have to use an expression in CSS, something like that:

.div {
position:fixed;
top:expression(window.scrollTop + "px");
...
}

Upvotes: 0

Related Questions