作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 bootstrap 4 rollspy 和自定义的affix。问题是当第二个菜单出现时我需要删除第一个固定菜单。在这里检查 fiddle 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>
从上到下滚动都需要附加元素,反之亦然。提前致谢。
最佳答案
我肯定会选择 .sticky-top
而不是自定义后缀 javascript。 Bootstrap 的定位实用程序。据我了解您的问题,这涵盖了您想要的功能。这是一个工作示例:
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>
一直向下延伸到第二个菜单。这使得当第二个菜单滚动到 View 中时第一个菜单消失。
另外,请注意,为了让 Scrollspy 正常工作,请在第一个和第二个菜单中使用不同的 id(例如,两个菜单中都有 section1
)。
关于jquery - Bootstrap 4如何在第二个词缀出现时删除第一个词缀,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48018769/
我是一名优秀的程序员,十分优秀!