부트스트랩4 navbar + 사이드바+푸터

1 개요

부트스트랩4 navbar + 사이드바+푸터

<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
<style>
.bd-navbar {
  z-index: 1071;
  min-height: 4rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.1);
}
.bd-sidebar {
  z-index: 1000;
  height: calc(100vh - 4rem);
  background: #eee;
  border-right: 1px solid rgba(0,0,0,.1);
  max-width: 220px;
  display: flex;
  padding: 0;
  overflow-y: hidden;
  flex-direction: column;
}
.bd-sidebar-body {
  height: 100%;
  overflow-y: auto;
  display: block;
}
.bd-sidebar-body .nav {
  display: block;
}
.bd-sidebar-body .nav>li>a {
  display: block;
  padding: .25rem 1.5rem;
  font-size: 90%;
}
.bd-sidebar-footer {
  padding: 1rem;
  background: #ddd;
}
.sidebar-full {
  position: fixed;
  top: 0;
  height: 100vh;
}
</style>

<header id='navbar' class="navbar navbar-expand navbar-dark bg-dark bd-navbar">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active"><a class="nav-link" href="#">홈</a></li>
      <li class="nav-item"><a class="nav-link" href="#">1번 메뉴</a></li>
      <li class="nav-item"><a class="nav-link" href="#">2번 메뉴</a></li>
    </ul>
  </div>
</header>

<div class="container-fluid">
  <div class="row flex-nowrap">
    <div id='sidebar' class="col-3 bd-sidebar">
      <div class="bd-sidebar-body">
        <ul class="nav">
          <li><a>Side 1</a></li>
          <li><a>Side 2</a></li>
          <li><a>Side 3</a></li>
          <li><a>Side 4</a></li>
          <li><a>Side 5</a></li>
          <li><a>Side 6</a></li>
          <li><a>Side 7</a></li>
          <li><a>Side 8</a></li>
        </ul>
        <br>
      </div>
      <div class='bd-sidebar-footer'>
        Sidebar Footer
      </div>
    </div>
    <main id='main' class="col-9 py-md-3 pl-md-5 bd-content" role="main">
      <h1>Main 1</h1>
      <h1>Main 2</h1>
      <h1>Main 3</h1>
      <h1>Main 4</h1>
      <h1>Main 5</h1>
      <h1>Main 6</h1>
      <h1>Main 7</h1>
      <h1>Main 8</h1>
    </main>
  </div>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<script>
const sidebar = document.getElementById('sidebar');
const sidebarWidth = sidebar.offsetWidth+'px';
const navbarHeight = document.getElementById('navbar').offsetHeight;
window.onscroll = function(){
	const y = window.pageYOffset;
  if( y < navbarHeight ) {
  	sidebar.classList.remove("sidebar-full");
  	sidebar.style.height = 'calc(100vh - '+(navbarHeight-y+'px)');
    main.style.marginLeft = '';
  }
  else {
    main.style.marginLeft = sidebarWidth;
  	sidebar.classList.add("sidebar-full");
  	sidebar.style.height = '';
  	sidebar.style.width = sidebarWidth;
  }
};
</script>

2 같이 보기

• 부트스트랩4 고정navbar + 사이드바+푸터