使用粘性页眉和页脚切换侧栏-ToggleSidebarwithstickyheaderandfooter

I would like to be able to have a side bar that can be toggled in and out on a button press. However, I'd want this sidebar to go with the main content of the page and fit between a sticky header and a sticky footer.

我希望能够有一个侧栏，可以按下按钮切换进出。但是，我希望这个侧边栏与页面的主要内容一起使用，并且适合粘性页眉和粘性页脚。

My problem is that when I scroll the sidebar stays fixed. I want the sidebar and page content to be able to scroll together and the header disappear. Then the page content will scroll while the header stays where it is. Then once the bottom of the page is reached the footer comes in which will shrink the bottom of the sidebar. If there is overflow in the side bar then the sidebar should be scrollable.

我的问题是当我滚动侧边栏时保持固定。我希望侧边栏和页面内容能够一起滚动，标题消失。然后页面内容将滚动，而标题保持原样。然后，一旦到达页面底部，页脚就会进入，这会缩小侧边栏的底部。如果侧栏中有溢出，则侧栏应该可滚动。

I have a nearly working example using bootstrap and simple-side bar template here: https://jsfiddle.net/co7080j6/. The only problem is that the side bar doesn't adjust it's position with the sticky header and footer.

我在这里使用bootstrap和简单的侧边栏模板有一个近乎工作的例子：https：//jsfiddle.net/co7080j6/。唯一的问题是侧栏不能用粘性页眉和页脚调整它的位置。

The html I'm using is here:

我正在使用的html在这里：

 



  

    
    

      

        

           Start Bootstrap
        
        

          Events
        
      
    
    

    
    

      

        

          

            
              Toggle Menu
            
          
        
      
    
    
  
  

And besides bootstrap and simple sidebar (I removed z-index on the sidebar) I'm also I'm also using:

除了bootstrap和简单的侧边栏（我在侧边栏上删除了z-index）我也是我也在使用：

/*MY CSS*/
.container-full {
  margin: 0 auto;
  width: 100%;
}

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #333;
}

*I'd also like it if the header came into view any time the window scrolled up, but I think I can get that myself once this is resolved.

*如果在窗口向上滚动的时候标题进入视图我也会喜欢它，但是我认为一旦解决了这个问题我就能自己解决。

1 个解决方案

#sidebar-wrapper {
    position: absolute;
    height: 90%;
}

.sidebar-nav {
    position: fixed;
    top: 55px;
    left: 30px;
}

$(document).ready(function() {
    $('#menu-toggle').click(function() {
       $('.sidebar-nav').fadeToggle(300); 
    });
});