Div stops at the top when scrolling

Question

I am trying to make a div change class to fixed when it reach the top of the page.

I have this JavaScript code.

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

        var top = 200;
        var y = $(this).scrollTop();

        if (y >= top) {
            // if so, add the fixed class
            $('#kolonne-v').addClass('fixed');
        } else {
            // otherwise remove it
            $('#kolonne-v').removeClass('fixed');
        }
    });
</script>

What am i doing wrong?

Answer 1

Demo jsFiddle

JS

$(function () {
    var top = 200; 
    //this should be the offset of the top of your div 
    //which can be found by doing the following line

    //var top = $("#kolonne-v").offset().top;

    $(window).on('scroll', function () {
        if (top <= $(window).scrollTop()) {
            // if so, add the fixed class
            $('#kolonne-v').addClass('fixed');
        } else {
            // otherwise remove it
            $('#kolonne-v').removeClass('fixed');
        }
    })
});

Description

This uses the jquery .on('scroll', handler) method, documentation here . The basic principal is that on document.ready you set the scroll point when your div becomes fixed to the top. Then you setup an .on('scroll', handler) event that triggers whenever the window is scrolled in. If the user scrolls to your point you add the fixed CSS class.