Javascript 标题用边框固定-边框只能通过滚动显示

我已经用bootstra4编写了index.html，并用border和sticky类来表示标题。我只想在滚动页面时显示边框

HTML

JS

我的js代码不会插入这里-如果是Nessary，我会再试一次

从#标题中删除框阴影属性：

应该是这样的：

    #header {
        position: relative;
        left: 0;
        top: 0;
        right: 0;
        z-index: 1000;
        font-size: 14px;
        background-color: #fff;
        border-bottom: rgba(0,0,0,0.05) 1px solid;
        -webkit-transition: all .800s;
        -moz-transition: all .800s;
        -o-transition: all .800s;
        transition: all .800s;
    }

#header.transparent {
    position: absolute;
    background-color: transparent;
    border-bottom: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

然后将标题中的边框底部属性更改为

边框底部：无

应该是这样的：

    #header {
        position: relative;
        left: 0;
        top: 0;
        right: 0;
        z-index: 1000;
        font-size: 14px;
        background-color: #fff;
        border-bottom: rgba(0,0,0,0.05) 1px solid;
        -webkit-transition: all .800s;
        -moz-transition: all .800s;
        -o-transition: all .800s;
        transition: all .800s;
    }

#header.transparent {
    position: absolute;
    background-color: transparent;
    border-bottom: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

最后，在CSS中查找并替换

#header.shadow-after-3:before

到

#header.fixed.shadow-after-3:before

---

当页面滚动时，它会将

固定的

类添加到header元素，这就是我们应该设置此类样式的原因。

使用

Javascript

可以轻松解决此问题

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

---

你能在codepen或smth上提供一个链接吗？我们可以现场查看吗？我尝试了…当然我可以上传到我的域名并提供链接…这也会有帮助吗？我希望如此。给我发一个链接，我来看看。@Andrew Savetchuk上传链接是-当你给我发邮件时（我不经常使用stackoberflow），如果这对你有帮助，我可以授予你ftp访问权，请看我的回答我已经试过了，但没有任何改变……但我感谢你花时间解决我的问题：-）下一次我将在没有阴影的情况下工作-class@webtroll所以你想只隐藏白色边框或阴影？当页面位于顶部时，只有边框应该隐藏（img shadow3.png）/class.shadow-after-3应该在页面处于顶部时隐藏它看起来很棒-阴影会通过scolling显示/显示吗？@webtroll是的，通过滚动显示。我会在1分钟内更新答案