javascript - 滚动时div停在顶部

Question

我试图在 div 到达页面顶部时将其更改为固定。

我有这个JavaScript代码。

<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>

我做错了什么？

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');
        }
    })
});

描述

这使用了 jquery .on('scroll', handler) 方法，documentation here 。基本原理是，在 document.ready 上，当 div 固定在顶部时设置滚动点。然后，您设置一个 .on('scroll', handler) 事件，该事件在窗口滚动时触发。如果用户滚动到您的位置，您将添加 fixed CSS 类.