Bootstrap 4如何在看到第二个词缀时删除第一个词缀 [英] Bootstrap 4 how to remove first affix when second affix comes to view
本文介绍了Bootstrap 4如何在看到第二个词缀时删除第一个词缀的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用bootstrap 4 scrollspy和自定义的词缀.问题是当第二个菜单出现时，我需要删除第一个固定菜单. 在此处检查小提琴 https://jsfiddle.net/raj_mutant/awknd20r/ html:
I am using bootstrap 4 scrollspy and customized affix.Problem is when second menu comes to view i need to remove the first fixed menu. Check the fiddle here 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>
上下滚动需要粘贴元素，反之亦然.谢谢！
Need affix element for both top to bottom scroll and vice versa.Thanks in advance.
推荐答案
Instead of a custom affix javascript, I would definitely go with the .sticky-top positioning utility of Bootstrap. As far as I understand your question, that covers the functionality you want. Here is a working example:
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;
}
<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>
如您在示例中所看到的，我将第一个菜单稍微移动了一点，并将其包装到一个<div>中，该范围一直向下延伸到第二个菜单.这样，仅当第二个菜单滚动到视图中时，第一个菜单才会消失.
另外，请注意，为了使Scrollspy正常工作，请在第一个菜单和第二个菜单中使用不同的ID(例如，您在两个菜单中均使用section1).
As you see in the example, I've moved the first menu a bit and wrapped it to a <div> that spans down until the second menu. This makes the first menu disappear just when the second menu scrolls into view.
Also, please note that in order to let the Scrollspy work correctly, use different ids in the first and the second menu (e.g. you had section1 in both).
这篇关于Bootstrap 4如何在看到第二个词缀时删除第一个词缀的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
