内容在滚动

Question

我正在使用Materialize css框架和jquery构建一个Angular 4应用程序。

我面临的问题是滚动时随机闪烁。我创建了一个脚本，当它到达窗口顶部时，将div位置设置到窗口的顶部。

我可以提供一个有问题的gif：

如果你看一下带有“你能不能再眨眼了吗”的小栏，你会知道我在说什么。

HTML部分：

<div id="list-header">
<div class="wrapper">
    <div class="row-head row">
        <div class="col s3"><h5>Can</h5></div>
        <div class="col s3"><h5>You</h5></div>
        <div class="col s3"><h5>Stop blinking</h5></div>
        <div class="col s3"><h5>Please</h5></div>
    </div>
</div>

CSS部分：

#list-header {
    border-top: 1px solid #D6E2EB;
    border-bottom: 1px solid #D6E2EB;
    background: #ECF1F4;
    position: absolute;
    width:100%;
    z-index:100;
}

#list-header.floating {
    position: fixed;
    top: 0;
}

Angular 4组件中的JS部分：

ngOnInit() {
    $(window).scroll(function () {
        if ($(window).scrollTop() > $('#list-header').offset().top) {
            $('#list-header').addClass('floating');
        }
        else {
            $('#list-header').removeClass('floating');
        }
    });
}

感谢您的时间！

Answer 1

经过一番研究，我发现了几个提供类似解决方案的库。

最后，为了使它非常简单和干净，我决定使用github上的 ng-sticky 库。 Link to library

它简化了整个过程，并且完美无缺。

安装和启用指南由这个很棒的库的创建者提供，在他的github页面上。