Menu
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.
367
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>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).
144
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
