带有边框的标题 - 边框只能通过滚动显示答案

【问题标题】：Header fixed with border - the border should only shown by scrolling带有边框的标题 - 边框只能通过滚动显示
【发布时间】：2019-12-30 00:21:00
【问题描述】：

我已经用 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 的代码不会在这里插入 - 如果它是必要的，我会再试一次

【问题讨论】：

你能提供一个关于 codepen 的链接，或者我们可以现场查看吗？
我试试....当然我可以将它上传到我的域并提供一个链接....这也有帮助吗？
我希望如此。给我发个链接，我看看。
@Andrew Savetchuk 上传链接是link - 当你给我发邮件时（我不经常使用stackoberflow），如果这对你有帮助，我可以为你提供ftp-access
请看我的回复

标签： javascript html css bootstrap-4

【解决方案1】：

使用Javascript，您可以轻松解决。

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

【讨论】：

【解决方案2】：

从 #header 中删除 box-shadow 属性：

应该是这样的：

    #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中的border-bottom属性改为border-bottom: none;

应该是这样的：

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

当页面滚动时，它会将fixed 类添加到标题元素中，这就是我们应该为这个类设置样式的原因。

【讨论】：

我已经尝试过了，但没有任何改变....但我感谢您花时间解决我的问题 :-) 下次我将在没有影子类的情况下工作
@webtroll 所以你只想隐藏白色边框或阴影？
只有边框在页面置顶时隐藏（img shadow3.png）/class .shadow-after-3在页面置顶时隐藏
它看起来很棒 - 阴影会显示/出现在 scolling 上吗？
@webtroll 是的，它通过滚动显示。我会在 1 分钟内更新答案