ブートストラップ4 2番目の接辞が表示されるときに最初の接辞を取り除く方法

私はブートストラップ4を使用していますscrollspyとカスタマイズされたaffix.Problemは、2番目のメニューが表示されるときに最初の固定メニューを削除する必要があります。フィドルを確認してくださいここでhttps://jsfiddle.net/raj_mutant/awknd20r/ HTML：ブートストラップ4 2番目の接辞が表示されるときに最初の接辞を取り除く方法

<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>

事前に下のスクロールや副versa.Thanksにトップの両方の要素を貼り付ける必要があります。

出典

2017-12-29 Raj

「セカンドメニュー」とはどういう意味ですか？正確に最初に貼り付けられたメニューが消えてしまいますか？ありがとう！ – dferenc

最初のメニューは「タブメニュー」クラスのメニューで、2番目のメニューは黒い背景「bg-dark」https://jsfiddle.net/raj_mutant/awknd20r/のnavbarです。 bg-darkメニューが表示されるときにタブメニューがまだ固定された場所にあります。ここでは、タブ - メニューとbg-darkメニューの両方に同じデータトグルを使用しています。 – Raj

カスタムの接尾辞javascriptの代わりに、私は間違いなくブートストラップの.sticky-top位置決めユーティリティと一緒に行くでしょう。あなたの質問を理解する限り、それはあなたが望む機能をカバーしています。ここでは実施例である：

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>

あなたが例に見るように、私は最初のメニューを少し移動し、2番目のメニューまでダウンまたがる<div>にそれを包みました。これにより、2番目のメニューがスクロールして表示されるときに最初のメニューが消えます。
また、Scrollspyを正しく動作させるには、1番目と2番目のメニューで異なるIDを使用してください（両方ともsection1）。

出典

2018-01-04 21:32:57 dferenc

こんにちは@Raj、これは実際にあなたのために働いたのですか？ – dferenc

ブートストラップ4 2番目の接辞が表示されるときに最初の接辞を取り除く方法

答えて

関連する問題