Question

我想在一个包含背景图像的div中放置一个导航栏（引导程序4）。当用户向下滚动时，导航栏应停留在顶部，调整大小并更改其颜色。如果我将其放在div中，它将保持粘性，直到bg-img滚动到看不见为止。当导航栏位于该div上方时，它可以工作。这是要播放的代码：https://www.codeply.com/go/WbswGGulCf

谢谢！

编辑：这是代码： HTML：

<div class="top flex-center position-ref">
    <div class="top-right links">
        <a href="#">Kontakt</a>
        <a href="#">Login</a> 
    </div>
</div>
<div class="container-fluid">
    <span class="position-absolute trigger"></span>

    <nav class="navbar navbar-expand-lg navbar-light sticky-top">
        <a class="navbar-brand" href="#">Brand</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Link1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link3</a>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Link4</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="bgimg">
        <div class="flex-center content full-height">
            <div class="title">
                Lorem ipsum dolor sit amet
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suscipit adipiscing bibendum est ultricies integer quis auctor elit sed. Leo a diam sollicitudin tempor id eu. Tellus at urna condimentum mattis. Nunc mattis enim ut tellus. Feugiat vivamus at augue eget arcu dictum. Mi proin sed libero enim sed faucibus turpis in. Amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Mauris rhoncus aenean vel elit. Mi bibendum neque egestas congue quisque egestas diam. Convallis posuere morbi leo urna. Aliquam sem fringilla ut morbi tincidunt. Mattis molestie a iaculis at. Felis donec et odio pellentesque diam volutpat commodo sed.

A arcu cursus vitae congue mauris rhoncus aenean vel elit. Velit egestas dui id ornare arcu odio. Tincidunt nunc pulvinar sapien et. Sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Mauris rhoncus aenean vel elit scelerisque mauris. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor. Neque convallis a cras semper auctor neque. Quam id leo in vitae turpis massa sed elementum tempus. Sit amet purus gravida quis blandit turpis. Quisque id diam vel quam elementum pulvinar etiam non. Ultricies mi eget mauris pharetra et ultrices neque. Turpis in eu mi bibendum neque egestas congue quisque egestas. Ipsum consequat nisl vel pretium lectus quam id leo in. Massa placerat duis ultricies lacus sed turpis.</p>
        </div>
    </div>
</div>

Javascript：

(new IntersectionObserver(function(e,o){
    if (e[0].intersectionRatio > 0){
        document.documentElement.removeAttribute('class');
    } else {
        document.documentElement.setAttribute('class','stuck');
    }
})).observe(document.querySelector('.trigger'));

CSS：

        .flex-center {
    align-items: center;
    display: flex;
    justify-content: center;
}

.position-ref {
    position: relative;
}
        .top {
    background-color: #fff;
    height: 60px;
}
.sticky-top {
    transition: all 0.25s ease-in;
}

.stuck .sticky-top {
    background-color: #326f8d !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    margin-left: -1vw;
    margin-right: -1vw;
}
        .bgimg {
    text-align: center;
    background-image: url(https://placeimg.com/1000/480/animals);
    background-attachment: fixed;
    background-repeat-x: no-repeat;
    background-repeat-y: no-repeat;
    background-size: cover;
    margin-left: -1vw;
    margin-right: -1vw;
    /* height: calc(100% - 60px); */
}
        .top-right {
    position: absolute;
    right: 10px;
    top: 18px;
}
        .links > a {
    color: #433b3b;
    padding: 0 25px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1rem;
    text-decoration: none;
    text-transform: uppercase;
}
            .content {
        height: 280px;
        color: #fff;
    }

Answer 1

当您将position: sticky应用于元素时，它只会保持固定状态，直到到达其父元素内容的末尾为止。因此，当图像到达末尾时，您的资产净值会上升。在您的情况下，position: sticky适用于类sticky-top。使用position:fixed可以停止此操作，同时将导航放置在div中，可以衬托背景图像。

Bootstrap导航栏粘性

1 个答案: