시맨틱 UI 아코디언 오버랩 위치 고정 요소

Question

나는 초보자이므로 나와 함께하시기 바랍니다. 사이드 바 하단에 아코디언과 위치 고정 요소가 있습니다. 내 문제는 아코디언이 열렸을 때 고정 된 요소와 겹치는 부분입니다. 또한, 하단의 위치 고정 요소를지나 스크롤 할 수 없도록하고 싶습니다. 나는 divs의 포지셔닝을 시도해 왔지만 여전히 실패했다. 누군가 제게 깨달으십시오. 고맙습니다!

$(function() { 
 
\t $('.ui.accordion').accordion(); 
 
});

.ui.vertical.footer.segment { 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet"/> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 

 
<div class="ui sidebar vertical left menu overlay borderless visible"> 
 
       <div class="ui accordion"> 
 
        <a class="title item"> 
 
         <i class="fa fa-address-book" aria-hidden="true"></i> Menu <i class="dropdown icon"></i> 
 
        </a> 
 
        <div class="content"> 
 
         <a class="item active" href="#"> 
 
          <i class="fa fa-id-badge" aria-hidden="true"></i> Content 
 
         </a> 
 
         <a class="item active" href="#"> 
 
          <i class="fa fa-id-badge" aria-hidden="true"></i> Content 
 
         </a> 
 
         <a class="item active" href="#"> 
 
          <i class="fa fa-id-badge" aria-hidden="true"></i> Content 
 
         </a> 
 
         <a class="item active" href="#"> 
 
          <i class="fa fa-id-badge" aria-hidden="true"></i> Content 
 
         </a> 
 
         <a class="item active" href="#"> 
 
          <i class="fa fa-id-badge" aria-hidden="true"></i> Content 
 
         </a> 
 
         <a class="item active" href="#"> 
 
          <i class="fa fa-id-badge" aria-hidden="true"></i> Content 
 
         </a> 
 
         <a class="item active" href="#"> 
 
          <i class="fa fa-id-badge" aria-hidden="true"></i> Content 
 
         </a> 
 
        </div> 
 
       </div> 
 

 
       <div class="ui vertical footer segment" id="test"> 
 
        <i class="fa fa-search" aria-hidden="true"></i> Search 
 
        <button class="ui button"> 
 
         Go 
 
        </button> 
 
       </div> 
 
       </div> 
 
       
 
       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>

Answer 1

나는이 문제를 해결하기에 충분 깨끗한 어떤 방식의 CSS를 찾지 못했습니다. 그래서 jQuery 솔루션을 찾기로 결심했다. 시맨틱 UI에서 콜백을 사용하는 데 약간의 어려움이있었습니다. 짧게는 시간을 보냈다. 특히 코멘트 코드로 광범위하게 문서화 한 이후로, 나는 그것이 나에게 몇 가지 포인트를 줄 수 있기를 바란다.

$(function() { 
 

 
var oUser3233787 = {     // variables group name of User3233787 problem. 
 
    $mn : $('.ui.accordion'),   // jQuery Menu objet 
 
    mnC : $('.ui.accordion').height(), // height Menu close 
 
    mnO : 0,       // height Menu open (unknow for the moment) 
 
    Fmn : false,      // Flag menu open/close 
 
    foH : $('#test').outerHeight(),  // room size of footer height 
 
    mnX : $(window).height() - this.foH // room place max for the menu, deppending on window height 
 
}; 
 

 
oUser3233787.$mn.accordion({ 
 
    onOpen: function(v1, v2) {  // open menu event; (v1, v2 documented nowhere...?) 
 
     with (oUser3233787) { 
 
      if (mnO == 0)    // if menu open hight is unknow 
 
       mnO = $mn.height();  // get this one 
 

 
      $mn.height(mnO);   // set menu hight to open size 
 
      Fmn \t = true;     // set Flag = menu is open 
 

 
      if (mnO > mnX)    // if menu hight is out of room place 
 
       $mn.height(mnX);  // set the menu higt fit to it 
 
     } \t \t \t \t 
 
    }, 
 
    onClose: function(v1, v2) {  // close menu event 
 
     with (oUser3233787) { 
 
      $mn.height(mnC);   // set menu hight to closed size 
 
      Fmn \t = false;    // set Flag = menu is not open 
 
     } 
 
    } 
 
}); 
 

 
$(window).resize(function() { 
 
    with (oUser3233787) { 
 
     mnX = $(window).height() - foH; // keep this height for the oUser3233787 group 
 
     if (Fmn) {      // if menu is open 
 
      if (mnO > mnX)    // and if his open heigh is too big 
 
       $mn.height(mnX);   // reduce them at room height 
 
      if (mnO < mnX)    // but if there is enough room 
 
       $mn.height(mnO);   // restore his open high complete height 
 
     } 
 
    } 
 
}); 
 

 
}); // jQuery

.ui.vertical.footer.segment { 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
} 
 
.ui.accordion { 
 
\t overflow-y: auto; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet"/> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 

 
<div class="ui sidebar vertical left menu overlay borderless visible"> 
 
       <div class="ui accordion"> 
 
        <a class="title item"> 
 
         <i class="fa fa-address-book" aria-hidden="true"></i> Menu <i class="dropdown icon"></i> 
 
        </a> 
 
        <div class="content"> 
 
         <a class="item active" href="#"> 
 
          <i class="fa fa-id-badge" aria-hidden="true"></i> Content 
 
         </a> 
 
         <a class="item active" href="#"> 
 
          <i class="fa fa-id-badge" aria-hidden="true"></i> Content 
 
         </a> 
 
         <a class="item active" href="#"> 
 
          <i class="fa fa-id-badge" aria-hidden="true"></i> Content 
 
         </a> 
 
         <a class="item active" href="#"> 
 
          <i class="fa fa-id-badge" aria-hidden="true"></i> Content 
 
         </a> 
 
         <a class="item active" href="#"> 
 
          <i class="fa fa-id-badge" aria-hidden="true"></i> Content 
 
         </a> 
 
         <a class="item active" href="#"> 
 
          <i class="fa fa-id-badge" aria-hidden="true"></i> Content 
 
         </a> 
 
         <a class="item active" href="#"> 
 
          <i class="fa fa-id-badge" aria-hidden="true"></i> Content 
 
         </a> 
 
        </div> 
 
       </div> 
 

 
       <div class="ui vertical footer segment" id="test"> 
 
        <i class="fa fa-search" aria-hidden="true"></i> Search &nbsp; 
 
        <button class="ui button"> 
 
         Go 
 
        </button> 
 
       </div> 
 
       </div> 
 
       
 
       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>