1. 홈
  2. 질의 응답
  3. 부트 스트랩 4 두 번째 접미어를 볼 때 첫 번째 접미사를 제거하는 방법

부트 스트랩 4 두 번째 접미어를 볼 때 첫 번째 접미사를 제거하는 방법

2017-12-29 2 views
4

부트 스트랩 4 scrollspy와 사용자 정의 접미어를 사용하고 있습니다. 두 번째 메뉴가 표시되면 첫 번째 고정 메뉴를 제거해야합니다. 바이올린을 여기 https://jsfiddle.net/raj_mutant/awknd20r/ HTML을 확인 :부트 스트랩 4 두 번째 접미어를 볼 때 첫 번째 접미사를 제거하는 방법

<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

+0

"두 번째 메뉴"란 무엇입니까? 정확히 처음 부착 된 메뉴가 사라져야합니까? 감사! – dferenc

+0

첫 번째 메뉴는 "탭 메뉴"클래스의 메뉴이고 두 번째 메뉴는 검정 배경 "bg-dark"https://jsfiddle.net/raj_mutant/awknd20r/이있는 navbar입니다. bg-dark 메뉴가 표시 될 때 탭 메뉴가 여전히 고정 된 위치에 있습니다. 여기에서 IMA는 탭 - 메뉴와 bg-dark 메뉴 모두에 동일한 데이터 토글 부착을 사용합니다. – Raj

답변

0

사용자 정의 접미사 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>
, 나는 첫 번째 메뉴를 조금 이동하고 두 번째 메뉴 때까지 걸쳐있는 <div>로 포장 한 다음은 작업 예입니다. 그러면 첫 번째 메뉴가 두 번째 메뉴가보기로 스크롤 될 때 사라집니다.
또한 Scrollspy가 올바르게 작동하도록하려면 첫 번째와 두 번째 메뉴에서 다른 ID를 사용하십시오 (예 : 둘 다 section1).

출처

2018-01-04 21:32:57 dferenc

+0

안녕하세요 @Raj,이 기능이 실제로 작동 했습니까? – dferenc

관련 문제

 관련 문제