>

점프를 방지하고 위치를 상대에서 고정으로 변경하는 요소가 하나 인 컨텐츠를 부드럽게 전환하는 방법이 궁금합니다. 여기 에서 바이올린을 만들었습니다. 세 가지 요소를 만들었습니다 :

<div id="top-bar">
  <p>
    Top bar
  </p>
</div>
<div id="header">
  <p>
    Header
  </p>
</div>
<div id="content">
  <p>
    Content
  </p>
</div>

margin-top 를 추가해 보았습니다   height 의   top-bar 의 때 top-bar  사라지고 header  위치 fixed 를 가져옵니다   content 에  요소,하지만 도움이되지 않았습니다. 콘텐츠를 뛰어 넘지 않고 어떻게 부드럽게 만들 수 있습니까?


  • 답변 # 1

    당신은 단순히 margin-top 의 가치를 만들 수 있습니다   height 와 같은 값  삭제 한 항목을 추가해야하기 때문에헤더(100px) 및상단 바가 아닙니다.

    const header = document.querySelector('#header');
    const content = document.querySelector('#content');
    const rect = header.getBoundingClientRect();
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    const headerTop = rect.top + scrollTop;
    window.addEventListener('scroll', function() {
      if (window.scrollY > headerTop) {
        header.classList.add('fixed');
        content.classList.add('margin-top');
      } else {
        header.classList.remove('fixed');
        content.classList.remove('margin-top');
      }
    });
    
    
    body,html {
    margin:0;
    }
    #top-bar {
      height: 40px;
      background: red;
    }
    #header {
      height: 100px;
      background: black;
      position: relative;
      top: 0;
      width: 100%;
    }
    #content {
      height: 900px;
      background: blue;
      padding-top: 150px;
    }
    .fixed {
      position: fixed!important;
    }
    .margin-top {
      margin-top: 100px;
    }
    p {
      color: white;
    }
    #top-bar p,#header p {
    margin:0;
    }
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="top-bar">
      <p>
        Top bar
      </p>
    </div>
    <div id="header">
      <p>
        Header
      </p>
    </div>
    <div id="content">
      <p>
        Content
      </p>
      <p>
        Content
      </p>
      <p>
        Content
      </p>
      <p>
        Content
      </p>
      <p>
        Content
      </p>
      <p>
        Content
      </p>
      <p>
        Content
      </p>
      <p>
        Content
      </p>
      <p>
        Content
      </p>
      <p>
        Content
      </p>
      <p>
        Content
      </p>
      <p>
        Content
      </p>
      <p>
        Content
      </p>
      <p>
        Content
      </p>
      <p>
        Content
      </p>
      <p>
        Content
      </p>
    </div>
    
    

  • 답변 # 2

    여러분의 문제는 여백 최상위 클래스의 마진이 40px이고 헤더의 높이가 100px이기 때문입니다. 헤더 높이와 일치하도록 여백을 변경할 수도 있습니다.

    https://jsfiddle.net/8q6rbzj7/35/ 참조

    .margin-top {
      margin-top: 100px;
    }
    
    

    가장 간단한 접근 방식을 사용하려면 헤더와 동일한 높이의 래퍼로 헤더를 감싸십시오.

    https://jsfiddle.net/8q6rbzj7/33/

    <div class="header-container">
      <div id="header">
        <p>
          Header
        </p>
      </div>
    </div>
    
    

    CSS

    .header-container {
      height: 100px;
    }
    
    

    마진 최고가 필요하지 않기 때문에 JS가 줄었습니다

    window.addEventListener('scroll', function() {
      if (window.scrollY > headerTop) {
        header.classList.add('fixed');
      } else {
        header.classList.remove('fixed');
      }
    });
    
    

관련 자료

  • 이전 mysql - 값이 1 일 때 SQL 수
  • 다음 ggplot2 - r - 특수 문자가있는 변수 이름 참조