那些遇到过的问题

Bootstrap 4当第二个词缀出现时如何删除第一个词缀

Raj*_*Raj 5 jquery twitter-bootstrap scrollspy bootstrap-4

我正在使用bootstrap 4 scrollspy和自定义affix.Problem是当第二个菜单来查看我需要删除第一个固定菜单.检查小提琴这里https://jsfiddle.net/raj_mutant/awknd20r/ html:

<body data-spy="scroll" data-target=".navbar" data-offset="50">
<header>
    <div class="container">

    </div>
</header>
<section id="intro">
    <div class="container">
        <div class="jumbotron">
            <div class="container">
                <h2>Test</h2>
                <h1>Lorem Ipsum</h1>
                <h4>Lorem Ipsum</h4>
            </div>
        </div>
    </div>
</section>
<section>
    <nav class="tab-menu navbar navbar-expand-sm" data-toggle="affix">
        <ul class="navbar-nav">
            <li class="nav-link nav-item" href="#section1">
<a href="#">test</a>
            </li>
            <li class="nav-link nav-item" href="#section2">
<a href="#">test</a>
            </li>
            <li class="nav-link nav-item" href="#section3">
<a href="#">test</a>
            </li>
        </ul>
    </nav>

    <div class="section" id="section1" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">

    </div>
    <div class="section" id="section2" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">

    </div>
<section>
Run Code Online (Sandbox Code Playgroud)

需要上下滚动的附加元素,反之亦然.谢谢.

dfe*_*enc 1

我肯定会使用.sticky-topBootstrap 的定位实用程序，而不是自定义后缀 javascript。据我了解您的问题，这涵盖了您想要的功能。这是一个工作示例：

section{
    padding: 2rem 0;
}
header .container{
    height:10vh;
    background:#dddddd;
}
.jumbotron {
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    text-align: center;
}

.tab-menu{
    height:30vh;
    background: #f0f0f0;
}
.tab-menu ul{
    width:100%;
    display: flex;
    justify-content: center;
}
.tab-menu ul li.nav-item{
    background:#dddddd;
    height:30vh;
    width: 30%;
    margin:0px 5px;
}
.tab-menu ul li.active{
    background:#f4821f;
}
.section{
    height:100vh;
}
.lorem{
    width: 100%;
    background: #dddddd;
}
Run Code Online (Sandbox Code Playgroud) 
<body data-spy="scroll" data-target=".navbar" data-offset="50">

<header>
    <div class="container">

    </div>
</header>
<section id="intro">
    <div class="container">
        <div class="jumbotron">
            <div class="container">
                <h2>Test</h2>
                <h1>Lorem Ipsum</h1>
                <h4>Lorem Ipsum</h4>
            </div>
        </div>
    </div>
</section>


<div id="first-menu-display">
    <!-- New place of first  menu within new `id="first-menu-display"` wrapper -->
    <nav class="tab-menu navbar navbar-expand sticky-top">
        <ul class="navbar-nav">
            <li class="nav-link nav-item" href="#sectionA1">
                <a href="#">test</a>
            </li>
            <li class="nav-link nav-item" href="#sectionA2">
                <a href="#">test</a>
            </li>
            <li class="nav-link nav-item" href="#sectionA3">
                <a href="#">test</a>
            </li>
        </ul>
    </nav>

    <section>
        <!-- Original place of first  menu -->
        <div class="section" id="sectionA1" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">
            <h1>Section 1</h1>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>
        <div class="section" id="sectionA2" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">
            <h1>Section 2</h1>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>
        <div class="section" id="sectionA3" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">
            <h1>Section 3</h1>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>
    </section>


    <section class="lorem">
        <div class="container">
            <div class="jumbotron">
                <div class="container">
                    <h2>Test</h2>
                    <h1>Lorem Ipsum</h1>
                    <h4>Lorem Ipsum</h4>
                </div>
            </div>
        </div>
    </section>

    <section class="">
        <div class="container">
            <div class="jumbotron">
                <div class="container">
                    <h2>Test</h2>
                    <h1>Lorem Ipsum</h1>
                    <h4>Lorem Ipsum</h4>
                </div>
            </div>
        </div>
    </section>

    <section class="">
        <div class="container">
            <div class="jumbotron">
                <div class="container">
                    <h2>Test</h2>
                    <h1>Lorem Ipsum</h1>
                    <h4>Lorem Ipsum</h4>
                </div>
            </div>
        </div>
    </section>

    <section class="">
        <div class="container">
            <div class="jumbotron">
                <div class="container">
                    <h2>Test</h2>
                    <h1>Lorem Ipsum</h1>
                    <h4>Lorem Ipsum</h4>
                </div>
            </div>
        </div>
    </section>

    <section class="">
        <div class="container">
            <div class="jumbotron">
                <div class="container">
                    <h2>Test</h2>
                    <h1>Lorem Ipsum</h1>
                    <h4>Lorem Ipsum</h4>
                </div>
            </div>
        </div>
    </section>
</div>


<section>
    <nav class="navbar navbar-expand bg-dark navbar-dark sticky-top">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#sectionB1">Section 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#sectionB2">Section 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#sectionB3">Section 3</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                    Section 4
                </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#sectionB41">Link 1</a>
                    <a class="dropdown-item" href="#sectionB42">Link 2</a>
                </div>
            </li>
        </ul>
    </nav>

    <div id="sectionB1" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">
        <h1>Section 1</h1>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    </div>
    <div id="sectionB2" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">
        <h1>Section 2</h1>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    </div>
    <div id="sectionB3" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">
        <h1>Section 3</h1>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    </div>
    <div id="sectionB41" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">
        <h1>Section 4 Submenu 1</h1>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    </div>
    <div id="sectionB42" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">
        <h1>Section 4 Submenu 2</h1>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    </div>
</section>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>

</body>
Run Code Online (Sandbox Code Playgroud)

正如您在示例中看到的，我稍微移动了第一个菜单并将其包装到<div>向下延伸直到第二个菜单的菜单。这使得当第二个菜单滚动到视图中时第一个菜单消失。
另外，请注意，为了让 Scrollspy 正常工作，请在第一个和第二个菜单中使用不同的 id（例如，您section1在两个菜单中都有）。

归档时间：

查看次数：

806 次

最近记录：

7 年，9 月 前
相关归档
jQuery Chosen插件动态添加选项 50
如何在渲染之前使用jQuery隐藏元素？ 44
使用animate-scrollTo时jQuery闪烁 30
我是否需要jQuery .ajax()的CSRF令牌？ 28
jQuery:append()vs appendTo() 28
手动编辑日期或清除日期时,bootstrap datepicker更改日期事件不会启动 24
如何定位bootstrap carousel的主动幻灯片？ 8
仅文字旋转木马 6
Bootstrap 弹出窗口，在动态内容上附加手动触发器 5
Twitter Bootstrap Tooltip数据选择器？ 4
难疑归档
如何修改现有的,未删除的提交？ 7669
运算符重载的基本规则和习惯用法是什么？ 2074
原子和非原子属性之间有什么区别？ 1828
使用jQuery中止Ajax请求 1775
最优雅的方法来检查Python中的字符串是否为空？ 1282
获取对象类型的名称 1159
使用Twitter Bootstrap 3将列居中 1109
如何初始化静态地图？ 1084
如何将命令行参数传递给rake任务 1065
自定义HTTP标头:命名约定 1051