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

Posted by Readiz
2014.06.30 22:09 반응형 티스토리/FastBoot

이 글은 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의 경우에 해당되는 내용들이기 때문에 위처럼 수정해주시면 이제 고정형 메뉴가 더이상 고정되지 않습니다.



결과화면


스크롤 전



스크롤 후



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



저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로
  1. 감사합니다!
    • 린르와르님이 요청했던거였나요.. 기억이 잘 안나네요 ㅎㅎ
  2. 올만에 새글을 보는거같네요
    잘보고갑니다 .^^
  3. 네 제가 요청했던 겁니다.
    잘 적용되네요!
  4. ㅎㅎ
    새로운 글 올렸네요
    요즘 마니 바쁘실텐데도
    짬을 냈나 보네요

    모쪼록 즐거운 직장 생활 보내길 빌께요^^
  5. 데스크톱에서는 화면이 넓어서 이 고정 상단바가 상관이 없지만 모바일에서는 화면 확대시에도 그러고 고정된 상단바는 조금 불편하더라고요..
    그래서 고정되지 않고 맨 위에만 나타나게 하고 싶은대 어떻게 해야 되나요?
  6. 고정하는법좀 알려주세요 ㅠㅠ
  7. 좋은 스킨 감사드립니다.
    변경하다가 궁금한점이 있어 글을 남겨봅니다.

    네이게이션바의 폰트를 변경하고 싶은데 따로 지정할 수도 있나요 ?
  8. 혹시 데스크탑 화면에서 스크롤시 왼쪽 옆에 고정되어 누르면 OffCanvas가 나오는 화살표도 고정되지 않게 할 수 있나요? 잘 모르지만 제 추측으로는 lnav로 시작하는 부분인 것 같은데 어떻게 조정하는지 모르겠어요..ㅠㅠ
  9. 안녕하세요! 어제 스킨 처음 받아 시험적으로 적용중입니다.
    다름이 아니라 데스크탑말고, 모바일에서만 상단바가 고정되지 않게 하려면 어떻게 해야하죠?

    불쑥 찾아와 질문만 툭 던지고 가는 것 같아 정말 죄송합니다..

티스토리 툴바