Stick div to top of page when start scrolling

Question

I have tried to make a div (id="hoe") that sticks to the top of the from the moment the user scrolls. before scrolling, the div is located under the header. Unfortunately, i can't get it to work after lot's of trying. Any tips and help on what I do wrong is greatly appreciated. Here is my code in a test version:

<!DOCTYPE html>
<head>

<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<style type="text/css">

#header
{
background-color: blue;
width: 100%;
height: 125px;
}

#hoe
{ 
background-color: red;
height: 180px;
width: 100%;
z-index: 9999;
top: 125;
position: fixed;
}

#een
{
margin-top: 180px;
background-color: green;
height: 700px;
width: 100%;
}

</style>

<script type="text/javascript">
$(document).ready(function() {

if ($('body').hasClass('lock')) {
    bar_pos = $('#hoe').offset();
    if (bar_pos.top >= (125+180)) {
        $('#hoe').css('top', 0);
        //document.getElementById("hoe").style.top="0"; also tried this
    }
});
});

</script>

</head>
<body class="lock">
<div id="header">
</div>
<div id="hoe">
</div>
<div id="een">
</div>
</body>
</html>

First thing to do is to learn HTML : ` ` - http://jsfiddle.net/soyuka/hEH3b/ looks like it's working or I don't understand what you're trying to do — soyuka, Feb 08 '13 at 12:40
jsfiddle would be appricated; however you can use existing plugin like http://stickyjs.com/ instead of writing your own :) — pwolaq, Feb 08 '13 at 12:40
Use this lightweight (~4KB) plugin: http://simianstudios.com/portamento — Vahid, Feb 08 '13 at 12:45
There no need for any plugin check this http://stackoverflow.com/questions/11627636/how-to-make-a-div-scroll-up-and-fix-at-the-top/11628528#11628528 — sandeep, Feb 08 '13 at 12:47
@soyuka: Oops, was merely a typo when i was copying code. Thanks for the jdfiddle tip, didn't know it yet, will be using it from now on. The problem is that from the moment that you start scrolling, the red div should stick to the top of the page. Tested the jsfiddle with different browsers too, but the red div just stays at it's place (125px from the top) — Kevin Verhoeven, Feb 08 '13 at 12:48

score 3 · Accepted Answer · answered Feb 08 '13 at 12:48

3

I've modified your code and created a fiddle here: http://jsfiddle.net/UcX4A/

There was a surplus bracket in your javascript

$(document).ready(function() {
    if ($('body').hasClass('lock')) {
        bar_pos = $('#hoe').offset();
        if (bar_pos.top >= (125+180)) {
            $('#hoe').css('top', 0);
            //document.getElementById("hoe").style.top="0"; also tried this
        }
    }); <<< Surplus bracket
});

Also, the "scroll" event wasn't attached to anything, so wasn't being evaluated. I changed your:

$(document).ready(function() {

To a:

$(window).scroll(function() {

answered Feb 08 '13 at 12:48

thesheps

635
4
11

Thanks! This helps a lot. Now I can expand this function and learn new things. – Kevin Verhoeven Feb 08 '13 at 12:52
It doesn't seem to be working now. The top, blue area disappears forever once you scroll down. Is that the intended effect? I thought it was to have the second div stick to the top as long as you are scrolled below it, but then move back down as you scroll up to the top. – Buttle Butkus Aug 07 '13 at 22:20

score 1 · Answer 2 · answered Feb 08 '13 at 12:52

See this: http://jsfiddle.net/WTnEd/

Use $(window).scroll()

$(document).ready(function () {
var bar_pos;
$(window).scroll(function (e) {
    if ($('body').hasClass('lock')) {
        bar_pos = $('#hoe').offset();
        if (bar_pos.top >= (125 + 180)) {
            $('#hoe').css('top', 0);
        }
        else{
            $('#hoe').css('top', 125);
        }
    };
});
});

matsolof · Answer 3 · 2013-02-09T13:26:48.370

As I understand the question, this is an alternate way to stick div to top of page when start scrolling:

<div id="header" style="position:fixed; top:0px; left:0px; right:0px;
    height:100px; z-index:2; background:blue;"></div>
<div id="hoe" style="position:fixed; top:100px; left:0px; right:0px;
    height:100px; z-index:2; background:red;"></div>
<div id="een" style="position:absolute; top:200px; left:0px; right:0px;
    height:100px; z-index:1;">
  <p>dummy text</p>
  <p>dummy text</p>
  <p>dummy text</p>
</div>

Stick div to top of page when start scrolling

3 Answers3