수직 스크롤 고정 사업부 뒤에 숨겨진 (오버플로 : 자동 작동하지 않습니다) 나는 두 개의 고정 항목이

Question

: 상속 : .topfilter 및 을 내가 폭 위치 내 왼쪽 탐색 메뉴 .sidebar-탐색에 .bottomfilter 페이지 전체를 차지하지 않도록하십시오. 하지만 이제 스크롤바는 두 개의 고정 된 목록 항목 뒤에 숨어 있습니다.

내가 시도한 것 : 오버 플로우-Y를 : 자동; overflow-y : 초기; z- 색인 : 0; 운

내가 어떻게 해제 숨길 고정 목록 항목 아래에서 스크롤 막대를?

보너스 : 내가 않은 클릭이 아닌 고정 된 목록 항목은 다른 목록 항목과 같은 호버에 강조 표시 할 수있는 방법 **

https://jsfiddle.net/4fqapznu/3/

  <!-- Sidebar --> 
    <div id="sidebar-wrapper"> 


    <ul class="sidebar-nav"> 
    <li class="topfilter"> 
    <a class="filtertitle">Title</a> 
    </li> 
    <br /> <br /> 
     <li> 
     <a href="#/content"> 
     Content 
     </a> 
     </li> 
       <li> 
     <a href="#/topics"> 
     Topics 
     </a> 
     </li> 
       <li> 
     <a href="#"> 
     Groups 
     </a> 
     </li> 
       <li> 
     <a href="#"> 
     Premium 
     </a> 
     </li> 
     <li> 
     <a href="#">Dashboard</a> 
     </li> 
     <li> 
     <a href="#">Shortcuts</a> 
     </li> 
     <li> 
     <a href="#">Overview</a> 
     </li> 
     <li> 
     <a href="#">Events</a> 
     </li> 
     <li> 
     <a href="#">About</a> 
     </li> 
     <li> 
     <a href="#">Services</a> 
     </li> 
     <li> 
     <a href="#">Contact</a> 
     </li> 
     <br /> <br /> <br /> 
     <li class="bottomfilter"> 
    <a class="filtertitle">Footer</a> 
    </li> 

    </ul> 
    </div> 
    <!-- /#sidebar-wrapper --> 



    <div class="content" style="min-height:90%; background:white;" > 



    </div> 
    <div class="push"></div> 

<footer class="footer"> 


     </footer> 

CSS :

a {outline:none !important;} 

html, 
body, 
.wrap { 
    height: 100%; 
} 

.wrap { 
    box-sizing: border-box; 
} 

form { 
    height: 100% 
} 

.wrap { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin-bottom: -60px; 
    /* for sticky footer to not go below page */ 
    /* for sticky header to not overlap content */ 
} 

.push, 
.footer { 
    height: 60px; 
} 



.footer { 
    background-color: #ebebeb; 
    height: 60px; 
    width: 100%; 
    position: fixed; 
    bottom: 0; 
} 

.content { 
    position: absolute; 
    width: 100%; 
    top: 120px; 
    background-color: yellow; 
    z-index: 0; 
} 


#sidebar-wrapper { 
    z-index: 1000; 
    position: fixed; 
    left: 142px; 
    top: 0px; 
    margin-bottom: 60px; 
    width: 0; 
    height: 100%; 
    margin-left: -142px; 
    overflow-y: auto; overflow-x:hidden; 
    background: #eee; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
} 


.topfilter {border-bottom:solid #333 2px; width:100%; height:40px; position:fixed; display:block; text-align:left; background-color:blue; -moz-box-sizing: border-box: 
    box-sizing: border-box:} 

.filtertitle { position:relative; display:inline-block; color:#000; width:100%; } 

.topfilter {border-bottom:solid #333 2px; width:100%; height:40px; position:fixed; display:block; text-align:left; background-color:blue; -moz-box-sizing: border-box: 
    box-sizing: border-box:} 

.filtertitle { position:relative; display:inline-block; color:#000; width:100%; } 

.topfilter {border-bottom:solid #333 2px; width:inherit; z-index:1000; height:40px; position:fixed; display:block; text-align:left; background-color:blue; -moz-box-sizing: border-box; 
    box-sizing: border-box;} 


.bottomfilter {border-top: solid #333 2px; width:inherit; height:40px; position:fixed; display:block; text-align:left; background-color:red; -moz-box-sizing: border-box; box-sizing: border-box; bottom:0;} 


#wrapper.toggled #sidebar-wrapper { 
    width: 200px; 
} 

#page-content-wrapper { 
    width: 100%; 
    position: absolute; 
    padding: 15px; 
} 

    #wrapper.toggled #page-content-wrapper { 
    position: absolute; 
    margin-right: -200px; 
} 


/* Sidebar Styles */ 

.sidebar-nav { 
    position: absolute; 
    top: 0px; 
    width:inherit; min-width:100%; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

.sidebar-nav li { 
    text-indent: 20px; 
    line-height: 40px; 
} 

.sidebar-nav li a { 
    display: block; 
    text-decoration: none; 
    color: #999999; 
} 

.sidebar-nav li a:hover { 
    text-decoration: none; 
    color: #333; 
    background: rgba(255, 255, 255, 0.6); 
} 

.sidebar-nav li a:active, 
.sidebar-nav li a:focus { 
    text-decoration: none; 
} 

.sidebar-nav > .sidebar-brand { 
    height: 65px; 
    font-size: 18px; 
    line-height: 60px; 
} 

.sidebar-nav > .sidebar-brand a { 
    color: #999999; 
} 

.sidebar-nav > .sidebar-brand a:hover { 
    color: #fff; 
    background: none; 
} 

@media screen and (min-width:768px) { 
    #wrapper { 
    padding-left: 300px; 
    } 
    #wrapper.toggled { 
    padding-left: 0; 
    } 


    #wrapper.toggled #sidebar-wrapper { 
    width: 0; 
    } 
    #page-content-wrapper { 
    padding: 20px; 
    position: relative; 
    } 
    #wrapper.toggled #page-content-wrapper { 
    position: relative; 
    margin-right: 0; 
    } 
} 


@media screen and (max-width:1526px) { 

    .content, 
    .footer { 
    width: 82%; 
    right: 0; 
    } 
    .header {width:82%;} 

    #sidebar-wrapper { 
    width: 18%; 
    } 

} 


@media screen and (max-width:1059px) { 

    .content, 
    .footer { 
    width: 80%; 
    right: 0; 
    } 

    .header {width:80%;} 

    #sidebar-wrapper { 
    width: 20%; 
    } 
} 

    @media screen and (min-width:1527px) { 

    .content, 
    .footer { 
    width: 85%; 
    right: 0; 
    } 
    .header {width:85%;} 
    #sidebar-wrapper { 
    width: 15%; 
    } 


} 

     @media screen and (max-width:991px) { 
      .content, 
    .footer { 
    width: 100%; 
    right: 0; 
    } 

    #sidebar-wrapper { 
    width:0; 
    } 

Answer 1

right: 12px;을 .topfilter 및 .bottomfiltercss 코드