javascript - 标题固定有边框 - 边框只能通过滚动显示

Question

我已经用 bootstra4 编码了我的index.html，并且标题带有边框并且类粘性。我希望仅在页面滚动时显示边框。

HTML

    <!-- TOP NAV -->
    <header id="topNav">
        <div class="container">
      .....

</div>

CSS

#header.shadow-after-3:before {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 60px;
    bottom: -60px;
    background-image: url(../images/misc/shadow3.png);
    background-size: 100% 100%;
}

JS

我的js代码不会插入这里 - 如果是必要的话我会再试一次

Answer 1

使用Javascript你可以轻松解决它。

$(window).scroll(function() {
    if ($(this).scrollTop() > 250){  
        $('header').addClass("borderClass");
    }
    else{
        $('header').removeClass("borderClass");
    }
});