Cộng đồng Hỏi & Đáp của Inflearn

tkddnjs10184031

câu hỏi đã được viết

Portfolio trang web phản hồi (Trang web giới thiệu chính thức của ứng dụng)

Công việc thay đổi layout di động (12) – Header (header) & Modal

반응형 fixed 안먹히는 문제

Viết

246

pc버전은 문제가 전혀 없는데

반응형이 되면 header에 준 position fixed가 이상해져요

그 아예 안되는 건 아니에요 반응형에서 아래로 내릴 때 만 fixed 가 안되고 스크롤을 위로 올리면 작동이 되는데 이문제를 어떻게 해결해야 할지 모르겠어요

이렇게 아래로 스크롤 하면 header 가 고정 되지 않고 사라져 버리고

스크롤을 위로 하면 나타나요

이게 원래 코드

이게 반응형 코드인데 뭐가 잘못 된 걸까요?

HTML/CSSjquery반응형-웹

Câu trả lời 2

codingworks

Người chia sẻ kiến thức

html css js 전체 코드를 올려주셔야 확인할 수 있습니다. 전체 코드를 올려주세요.

codingworks

Người chia sẻ kiến thức

질문 주실 때 코드를 캡쳐해서 올리시면 제가 텍스트에디터에서 바로 체크하기 어렵습니다. 그러니 html css js 전체 코드를 복사해서 올려주시고 브라우저 화면은 캡쳐해서 올려주세요.

tkddnjs1018

Người đặt câu hỏi

이게

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);
}

tkddnjs1018

Người đặt câu hỏi

이게 반응형 코드 입니다

@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);
  }

tkddnjs10184031

câu hỏi đã được viết

Đặt câu hỏi