반응형 fixed 안먹히는 문제
264
投稿した質問数 6
pc버전은 문제가 전혀 없는데
반응형이 되면 header에 준 position fixed가 이상해져요
그 아예 안되는 건 아니에요 반응형에서 아래로 내릴 때 만 fixed 가 안되고 스크롤을 위로 올리면 작동이 되는데 이문제를 어떻게 해결해야 할지 모르겠어요
이렇게 아래로 스크롤 하면 header 가 고정 되지 않고 사라져 버리고
스크롤을 위로 하면 나타나요
이게 원래 코드
이게 반응형 코드인데 뭐가 잘못 된 걸까요?
回答 2
0
질문 주실 때 코드를 캡쳐해서 올리시면 제가 텍스트에디터에서 바로 체크하기 어렵습니다. 그러니 html css js 전체 코드를 복사해서 올려주시고 브라우저 화면은 캡쳐해서 올려주세요.
0
이게
pc 코드
header {
position: fixed;
width: 100%;
z-index: 20;
background-color: transparent;
transition: 0.5s;
}
header .header-inner {
width: 1300px;
margin: auto;
overflow: hidden;
padding-top: 30px;
padding-bottom: 15px;
}
header .header-inner .logo {
float: left;
}
header .header-inner .logo a img {
margin-top: -7px;
}
header .header-inner .gnb {
float: right;
margin-right: 10px;
}
header .header-inner .gnb a {
margin: 10px;
font-size: 16px;
}
header .header-inner .trigger {
display: none;
}
header.active {
background: #fff;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
}0
이게 반응형 코드 입니다
@media (max-width: 768px) {
/* ####################### Header #######################*/
header {
width: 368px;
top: 0;
left: 0;
}
header .header-inner {
width: inherit;
padding-top: 15px;
padding-bottom: 20px;
height: 80px;
}
header .header-inner .logo {
float: right;
margin-right: 20px;
z-index: -10;
}
header .header-inner .logo a img {
z-index: -20;
width: 150px;
margin-top: 10px;
}
header .header-inner .trigger {
display: block;
width: 40px;
cursor: pointer;
float: left;
margin-left: 20px;
margin-top: 10px;
z-index: 100;
}
header .header-inner .trigger::before {
content: "\e91c";
font-family: "xeicon";
font-size: 30px;
}
header .header-inner .trigger.active::before {
content: "\e9af";
}
header .header-inner .gnb {
z-index: -3;
width: inherit;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
width: 260px;
float: none;
margin: 0;
margin-top: -20px;
padding-top: 80px;
padding-left: 20px;
position: fixed;
background-color: #fff;
height: 662px;
transition: 0.5s;
transform: translate(-280px);
}
header .header-inner .gnb a {
display: block;
}
header .header-inner .gnb.active {
transform: translate(0);
}하드코딩으로 이미지맵(image map) 만들기
1
79
2
슬릭 슬라이더
1
148
2
position: fixed; 가 안먹혀요..뭐가 문제일까요?
1
168
1
선생님
2
155
1
.news-thum .date 위치가 안맞아요
1
245
2
TypeIt - Welcome 부분이 적용이 안됩니다..
1
369
2
Scroll Reveal Animation 적용이 안되요
1
362
1
완성 후 각 섹션 display:none 주석 시 문제
1
384
3
브라우저를 줄일 때 화면 깨짐
1
633
2
welcome-heading 부분이 왜 저렇게 위치되는지 모르겠습니다.
1
341
1
제이쿼리 탭메뉴 클릭 질문
1
236
1
질문있습니다
1
549
1
질문있습니다.
2
646
2
슬릭슬라이더가 왜 안되는지 모르겠습니다
1
623
1
slick slider와 .ceo-content영역 겹침
1
720
1
span .badge 부분 참고하실분 하세요
2
333
1
플렉스를 안주고 그냥 패딩을 줘도 되지 않나요
1
331
1
창을 줄이면 위치가 이동되는 백그라운드 이미지
1
532
1
크롬창을 줄어들면 이미지가 작아짐
1
743
1
scroll behavior 오류
1
267
1
선생님 코딩좀 봐주세요..
1
402
3
왜 전 선생님과 화면이 다를까요?
1
368
3
따라했는데 이상합니ㅏㄷ..ㅠ
1
295
2
flex로 된 부분을 좌우로 애니매이션 할때 발생하는 문제점.
1
212
1