화면 스크롤시 상단고정메뉴 고정되지 않게 하기

이 글은 FastBoot v1.6과 관련이 있습니다.

  관리가 요즘 쉽지가 않습니다만 질문은 쌓여만가고.. 우선 자주 들어오는 질문부터 포스팅 해야겠다 싶어서 포스팅 합니다. 질문받은 내용은 

상단고정바를 어떻게하면 고정하지 않을 수 있는가? 

입니다. 간단한 질문부터 우선 해소시켜드려야겠다는 생각에 급하게 포스팅합니다.

style.css 수정

	
body.navFixed {
  padding-top:177px;
}
@media screen and (max-width: 767px) {
  body.navFixed {
    padding-top:50px;
  }
}
#desktopNav.fixed {
  position: fixed;
  top: -40px;
  height: 90px;
  z-index: 100;
  width: 100%;
}
#desktopNav.fixed h3, #desktopNav.fixed a {
  -webkit-transition-duration: .3s;
  -moz-transition-duration: .3s;
  -o-transition-duration: .3s;
  transition-duration: .3s;
}
#desktopNav.fixed h3 {
  float: left;
  margin-top: 10px;
}
#desktopNav.fixed p.text-muted {display:none;}
#desktopNav.fixed p.rightMenus a {
  font-size: 15px;
  padding-left: 8px;
}
.navbar-inverse {
    border: none;
}
.navbar-inverse .nav li a {
  color:#fff;
}
.navbar-inverse .nav li a:hover {
  background-color:#000;
}
#secondNavWrap{background-color:#434A54;height:31.5px;margin-bottom:15px;}
#secondNavWrap.fixed {
  position: fixed;
  width: 100%;
  z-index: 1030;
  top: 50px;
} 
	

  고정 치환자에 해당되는 부분은 navFixed와 fixed 클래스입니다. 이 두가지를 제거해주시면 고정되는 속성이 없어지게 됩니다. 따라서 이것들이 붙어있는 것만 제거해주시면 되는데요, 제거하면 아래처럼 되겠죠.

	
.navbar-inverse {
    border: none;
}
.navbar-inverse .nav li a {
  color:#fff;
}
.navbar-inverse .nav li a:hover {
  background-color:#000;
}
#secondNavWrap{background-color:#434A54;height:31.5px;margin-bottom:15px;} 
	

  위의 CSS의 대부분이 fixed의 경우에 해당되는 내용들이기 때문에 위처럼 수정해주시면 이제 고정형 메뉴가 더이상 고정되지 않습니다.

결과화면

스크롤 전

스크롤 후

  위 그림처럼 더이상 상단 고정바가 고정되지 않는 것을 볼 수 있습니다.