헤더바(hd_wrapper)가 scroll up 안 되게 하고 싶습니다.

헤더바(hd_wrapper)가 scroll up 안 되게 하고 싶습니다.

QA

헤더바(hd_wrapper)가 scroll up 안 되게 하고 싶습니다.

답변 3

본문

그누보드(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; /* 헤더 높이만큼 마진 추가 */
}
 

알려주신 소스에

"left: 50%;"와 "transform: translateX(-50%);"를 추가 사용하여

중앙 정렬과 Head_wrapper 고정(https://m.glitter.kr)을 마첬습니다.

- - -
그런데 Head_wrapper의 아이템들이
중앙(https://policy.glitter.kr/qa_php/scroll%20up_down-5.png)에 몰려버렸습니다.
- - -

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 17
© SIRSOFT
현재 페이지 제일 처음으로