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

演示 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)方法，文档here。基本原则是document.ready当您的 div 固定到顶部时设置滚动点。然后，您设置一个.on('scroll', handler)在窗口滚动时触发的事件。如果用户滚动到您的位置，则添加fixedCSS 类。