ブートストラップの崩壊navbarがオーバーフローしていないか確認する

Question

折りたたまれたときにnavbar（灰色のdiv）にオーバーフロー（スクロールバー）がある場合、jQueryを使ってチェックするにはどうすればよいですか？私の例を見ると、1つのサブメニューを展開すると、divのコンテンツがオーバーフローしているため、navbarのスクロールが有効になります。私は、より多くのコンテンツがあり、下にスクロールすることができることをユーザに知らせるために、navbarの下部にdivというラベルを付けたいと思う。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<nav class="website-nav navbar navbar-default navbar-fixed-top"> 
 
    <div class="navbar-inner"> 
 
     <div class="nav-center"> 
 

 
<!-- <img src="{{ S_WEB_PATH }}images/brand.png" /> --> 
 
      <div class="nav-brand"></div> 
 
     </div> 
 
    </div> 
 
    <div class="alt-nav navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false" aria-controls="navbar"> 
 
      <span class="sr-only">Toogle Navigation</span> 
 
      <span class="icon-bar top-bar"></span> 
 
      <span class="icon-bar middle-bar"></span> 
 
      <span class="icon-bar bottom-bar"></span> 
 
     </button> 
 
\t  <a class="navbar-brand" href="https://www.example.com/">LOGO</a>   
 
    </div> 
 
<!-- Navigation header --> 
 
    <div class="collapse navbar-collapse" id="collapse"> 
 
     
 
     <ul class="nav navbar-nav"> 
 
      <li {{ INDEX_ACTIVE }}><a href="https://www.example.com/"><span></span> Menu1 <span class="sr-only">(current)</span></a></li> 
 
       
 
      <li class="visible-xs "><a href="https://www.example.com/?secao=meuPainel"><span></span> Menu2</a></li> 
 
\t    
 
      <li class="dropdown"> 
 
        <a href="?secao=minhaConta" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span></span> Menu3<span class="caret"></span></a> 
 
        <ul class="dropdown-menu"> 
 

 
       <li class="hidden-xs "><a href="https://www.example.com/?secao=meuPainel"><span ></span> Submenu3.1</a></li>        
 

 
\t \t \t \t <li class=""><a href="https://www.example.com/?secao=meusPedidos"><span></span> Submenu3.2</a></li> 
 

 
       <li class="visible-xs "><a href="https://www.example.com/?secao=meusPedidos" style="display:none;"><span></span> Token</a></li> 
 
       <li role="separator" class="divider visible-sm visible-xs"></li> 
 
       <li ><a href="https://www.example.com/?secao=minhaConta"><span></span>Submenu3.3</a></li> 
 
       <li><a href="https://www.example.com/?secao=interesses"><span></span> Submenu3.4</a></li> \t \t \t \t 
 
       <li><a href="https://www.example.com/?secao=alterarSenha"><span></span> Submenu3.5</a></li> 
 
       <li><a href="https://www.example.com/?secao=alterarEmail"><span></span> Submenu3.6</a></li> 
 
       <li role="separator" class="divider"></li> 
 
       <li><a href="https://www.example.com/?acao=sair"><span></span>Submenu3.7</a></li> 
 
       </ul> 
 
\t \t \t <li class="visible-md "><a href="https://www.example.com/?secao=meusPedidos"><span></span> Menu4</a></li>    
 
       </li> 
 
      <li {{ REMOTE_ACTIVE }} ><a href="https://www.example.com/?secao=meuCarrinho"><span></span> Menu5      
 
      </a></li> 
 

 
      
 
\t \t \t \t 
 
     
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right">  
 
     
 
      <li ><a href="https://www.example.com/?secao=notificacoes"><span></span> Menu6 </a></li> 
 
     
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span></span> Menu7<span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      \t <li><a href="https://www.example.com/en/"> Submenu 7.1</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="https://www.example.com/es/"> Submenu 7.2</a> 
 
</li> 
 
      <li role="separator" class="divider"></li>    
 
      <li><a href="https://www.example.com/"> Submenu 7.3</a> 
 
      </li> 
 

 
      </ul> 
 
     </li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span></span> Menu8<span class="caret"></span>&nbsp;</a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="https://www.example.com/sac">Submenu 8.1</a></li> 
 
      <li><a href="https://www.example.com/sac">Submenu 8.2</a><a href="https://www.example.com/?secao=FAQ"></a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="https://www.example.com/sac">Submenu 8.3</a></li> 
 
<li style="display:none;"><a href="https://www.example.com/?secao=carreiras">Trabalhe conosco</a></li>    
 
      <li style="display:none;"><a href="https://www.example.com/?secao=comercial">Seja um parceiro</a></li>    
 
      <li id="navbar-bottom" name="navbar-bottom"></li> 
 
      </ul> 
 
     </li>   
 
     </ul> 
 
    </div> 
 
</nav> 
 
<div style="height:1000px; background-color:yellow"> some content</div>

Answer 1

いくつかのIDを持つナビゲーションバーのdiv要素に名前を付けてください。次に、スクロール幅を確認して、divがオーバーフローしているかどうかを確認することができます。

if ($("#navBarDiv").prop('scrollWidth') > $("#navBarDiv").width()) { 
    alert("this element is overflowing !!"); 
} 
else { 
    alert("this element is not overflowing!!"); 
}