헤더바(hd_wrapper)가 scroll up 안 되게 하고 싶습니다.
본문
그누보드(6.0.6) 실서비스 사용자입니다.
베이직 테마을 사용 중인데, 헤더바(hd_wrapper)가 scroll up 안 되게 하고 싶습니다.
base.html 의 소스 중 해당 부위 -
. . . . . . . . .
<div id="hd_wrapper">
<button type="button" id="opener_aside" class="opener">
<i class="fa fa-bars" aria-hidden="true"></i>
<span class="blind">열기</span>
</button>
<a href="https://glitter.kr/gate/" id="logo"><span class="blink_950">
<img src="/hwi/gimg/glitter_mark.png" alt="_ Glitter Photos"></span></a>
. . . . . . .
default.css 중 꼭 필요 할 것 같은 부위만 캡쳐 함
.
body
{ margin:0; padding:0; font-size:1.2rem;
font-family:'Malgun Gothic', dotum, sans-serif; background:var(--bodyBg) }
.
#hd_wrapper
{ max-width: 1200px; margin: 0 auto; position: relative; background: var(--primaryColor);
border-radius: 8px; height: 80px; display: flex; justify-content: space-between;
align-items: center; padding: 0px 20px; }
.
#wrapper
{ margin: 20px auto; }
.
- 감사합니다.
답변 3
스크롤바를 고정하고 싶다는 이야기 인가요 ?
질문 자체가 이해가 어렵네요
스크롤을 내렸을 때 상단의 메뉴를 고정하고자 한다면
#hd_wrapper{
margin-top: 70px;
}
코드 추가
#hd{
position: fixed;
width: 100%;
height: 60px;
z-index: 999;
위 코드 추가
주시면 원하시는데로 될 것 같지만, 그게 아니라면 조금 만 더 설명을 해주시면 감사하겠습니다.
안녕하세요. 감사합니다.
헤더바(https://policy.glitter.kr/qa_php/scroll%20up_down-1.png)가 scroll up/down 되어 ,
위로 올라가지(https://policy.glitter.kr/qa_php/scroll%20up_down-2.png) 않고 상단에 고정되게 하고 싶습니다.
<div id="hd_wrapper">은 고정되고 <div id="wrapper">만 scroll up/down됐으면 합니다.
현재는 <div id="hd_wrapper">이 <div id="wrapper">과 같이 scroll up/down되고 있습니다.
- - - -
말슴하신 코드 적용 후,
이(https://policy.glitter.kr/qa_php/scroll%20up_down-3.png)와 같이 되었습니다.
- - - -
아래의 코드를 한번 참고해 보시겠어요..
#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; /* 헤더 높이만큼 마진 추가 */
}
안녕하세요 ..
고정은 되었는데,
오른 쪽에 붙었습니다. ( https://policy.glitter.kr/qa_php/scroll%20up_down-4.png )
감사합니다.
알려주신 소스에
"left: 50%;"와 "transform: translateX(-50%);"를 추가 사용하여
중앙 정렬과 Head_wrapper 고정(https://m.glitter.kr)을 마첬습니다.
- - -
그런데 Head_wrapper의 아이템들이
중앙(https://policy.glitter.kr/qa_php/scroll%20up_down-5.png)에 몰려버렸습니다.
- - -