헤더바(hd_wrapper)가 scroll up 안 되게 하고 싶습니다. 채택완료
그누보드(6.0.6) 실서비스 사용자입니다.
베이직 테마을 사용 중인데, 헤더바(hd_wrapper)가 scroll up 안 되게 하고 싶습니다.
base.html 의 소스 중 해당 부위 -
</p>
<p> . . . . . . . . . </p>
<p> <span style="color:#000000;"> <span style="background-color:#f39c12;"> <div id="hd_wrapper"></span></span></p>
<p> </p>
<p> <button type="button" id="opener_aside" class="opener"></p>
<p> <i class="fa fa-bars" aria-hidden="true"></i></p>
<p> <span class="blind">열기</span></p>
<p> </button></p>
<p> </p>
<p> <a href="<a href="https://glitter.kr/gate/"" target="_blank" rel="noopener noreferrer">https://glitter.kr/gate/"</a> id="logo"><span class="blink_950"></p>
<p><img src="/hwi/gimg/glitter_mark.png" alt="_ Glitter Photos"></span></a></p>
<p>. . . . . . . </p>
<p>
default.css 중 꼭 필요 할 것 같은 부위만 캡쳐 함
</p>
<p>.</p>
<p>body</p>
<p> { margin:0; padding:0; font-size:1.2rem;</p>
<p>font-family:'Malgun Gothic', dotum, sans-serif; background:var(--bodyBg) }</p>
<p>.</p>
<p>#hd_wrapper</p>
<p>{ max-width: 1200px; margin: 0 auto; position: relative; background: var(--primaryColor);</p>
<p>border-radius: 8px; height: 80px; display: flex; justify-content: space-between;</p>
<p>align-items: center; padding: 0px 20px; }</p>
<p>.</p>
<p>#wrapper</p>
<p>{ margin: 20px auto; }</p>
<p>.
- 감사합니다.
답변 2개
스크롤바를 고정하고 싶다는 이야기 인가요 ?
질문 자체가 이해가 어렵네요
스크롤을 내렸을 때 상단의 메뉴를 고정하고자 한다면
</p>
<p>#hd_wrapper{</p>
<p>margin-top: 70px; </p>
<p>} </p>
<p>코드 추가</p>
<p>#hd{</p>
<p>position: fixed;</p>
<p>width: 100%;</p>
<p>height: 60px;</p>
<p>z-index: 999;</p>
<p>위 코드 추가</p>
<p>주시면 원하시는데로 될 것 같지만, 그게 아니라면 조금 만 더 설명을 해주시면 감사하겠습니다.
댓글을 작성하려면 로그인이 필요합니다.
아래의 코드를 한번 참고해 보시겠어요..
#hd_wrapper {
max-width: 1200px;
margin: 0 auto;
position: fixed; /* 화면 상단에 고정 */
top: 0; /* 화면 상단에 붙이기 */
left: 0;
right: 0;
background: var(--primaryColor);
border-radius: 8px;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px 20px;
z-index: 1000; /* 다른 요소 위에 나타나도록 설정 */
}
/* 상단에 고정된 헤더로 인해 본문 내용이 가려지지 않도록 본문 내용을 아래로 내립니다 */
#wrapper {
margin: 100px auto 20px; /* 헤더 높이만큼 마진 추가 */
}
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인