질문드립니다.

매뉴얼 FAQ
그누보드5
데모
자료실
  • 다운로드
  • 매뉴얼
  • Q&A
    • 창작마당
  • 팁자료실
  • 스킨
  • 빌더
  • 테마
  • 플러그인
  • 사용후기
    • 영카트5
    데모
    자료실
    창작마당
    Q & A
    궁금한 게 있으신가요? 지금 질문해보세요!
    솔루션
    프로그래밍
    서버
    사이트운영
    컨텐츠몰
    나의 재능을 팔아보세요!
    부가서비스
    국내최저! 신용카드 결제수수료 2.85%
    제작의뢰
    커뮤니티
    커뮤니티
    소모임
    스터디
    강좌
    기타
    질문드립니다.

    QA

    질문드립니다.

    본문

    https://codepen.io/chriscoyier/pen/qyELzd

     

    이 기능을

     

    <div id="wrap">

    </div>

     

    안에 집어넣어서 모든 기능이 가능하게 하고 싶은데 

    아무리 해도 안되네여 ㅠ
    어떻게 해야될까요?ㅠㅠㅠ

    #그누보드5

    이 질문에 댓글 쓰기 :

    답변 4

    제이앤 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

    122.♡.♡.120

    혹시 이걸 원하시는 건지요?

     

    -제이쿼리를 사용

     

    - html

     

    <div id="wrap">
      <header>
        <h1>Website</h1>
      </header>

      <nav>
        <ul>
          <li><a href="#section-1">Section 1</a></li>
          <li><a href="#section-2">Section 2</a></li>
          <li><a href="#section-3">Section 3</a></li>
          <li><a href="#section-4">Section 4</a></li>
          <li><a href="#section-5">Section 5</a></li>
          <li><a href="#section-6">Section 6</a></li>
          <li><a href="#section-7">Section 7</a></li>
          <li><a href="#section-8">Section 8</a></li>
          <li><a href="#section-9">Section 9</a></li>
        </ul>
      </nav>

      <main>
        <section id="section-1">
          <h1>Section 1</h1>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis, blanditiis expedita? Earum eligendi pariatur quaerat quos expedita ab quibusdam ratione veniam in, mollitia fuga repudiandae?</p>
        </section>
        <section id="section-2">
          <h1>Section 2</h1>
          <p>Ratione nulla nam, ipsa dignissimos corrupti veniam nostrum, laudantium asperiores sequi numquam placeat velit voluptate in praesentium non labore unde incidunt laborum maxime quae magni.</p>
        </section>
        <section id="section-3">
          <h1>Section 3</h1>
          <p>Soluta quibusdam ad nostrum vel voluptate delectus sequi dolores quia quaerat officia corrupti, aperiam fugit facere debitis repudiandae praesentium sapiente inventore repellendus, nemo commodi alias!</p>
        </section>
        <section id="section-4">
          <h1>Section 4</h1>
          <p>Aliquid aliquam magnam ducimus similique obcaecati, unde exercitationem laborum incidunt, quas in ipsum inventore nostrum? Blanditiis optio cumque earum iste odio! Alias sint accusamus repudiandae.</p>
        </section>
        <section id="section-5">
          <h1>Section 5</h1>
          <p>Officia ipsum fugit iure eaque quisquam error tempore earum enim illum, delectus officiis incidunt corrupti aliquid nam quas perspiciatis eveniet doloremque quod labore? Doloremque, ipsum?</p>
        </section>
        <section id="section-6">
          <h1>Section 6</h1>
          <p>Aperiam repellat dignissimos fugiat possimus esse, suscipit neque nisi libero alias obcaecati ipsam, porro illo corrupti nostrum reprehenderit unde, illum in laudantium impedit. Modi, veniam.</p>
        </section>
        <section id="section-7">
          <h1>Section 7</h1>
          <p>Cum asperiores temporibus itaque consequatur quod inventore, quia quis explicabo dicta esse minus voluptatem reiciendis eveniet animi, necessitatibus illum dolorem doloremque repellat placeat, dolores eaque.</p>
        </section>
        <section id="section-8">
          <h1>Section 8</h1>
          <p>Optio qui, omnis itaque rerum iusto molestiae necessitatibus deleniti quod tenetur id perspiciatis voluptatum dolorum quisquam eius ipsum non architecto labore! Distinctio, tenetur. Officiis, necessitatibus?</p>
        </section>
        <section id="section-9">
          <h1>Section 9</h1>
          <p>Rem iste iure blanditiis excepturi esse nisi corrupti sequi, illo, laborum quo quis quaerat assumenda perspiciatis quod fuga vel laudantium doloribus architecto tempora omnis earum!</p>
        </section>
      </main>

      <footer>
        ©2018 Footer
      </footer>
    </div>

     

     

    - css 

     

    html {
      scroll-behavior: smooth;
    }
    body {
      margin: 0;
      display: grid;
      grid-template-columns: min-content 1fr;
      font-family: system-ui, sans-serif;
      
      /* this breaks position sticky in Firefox */
      /* overflow-x: hidden; */
    }
    #wrap {
      display: grid;
      grid-template-columns: min-content 1fr;
    }
    header {
      grid-column: 1 / 3;
      background: #455A64;
      color: white;
      padding: 4rem;
      text-align: center;
    }
    nav {
      white-space: nowrap;
      background: #37474F;
    }
    nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    /* Only stick if you can fit */
    @media (min-height: 300px) {
      nav ul {
        position: sticky;
        top: 0;
      }
    }
    nav ul li a {
      display: block;
      padding: 0.5rem 1rem;
      color: white;
      text-decoration: none;
    }
    nav ul li a.current {
      background: black;
    }
    main {
      padding-bottom: 40rem;
    }
    section {
      padding: 2rem;
      margin: 0 0 2rem 0;
    }
    footer {
      grid-column: 1 / 3;
      background: #607D8B;
      padding: 5rem 1rem;
    }

     

     

    -javascript(jquery)

     

    let mainNavLinks = document.querySelectorAll("#wrap nav ul li a");
    let mainSections = document.querySelectorAll("#wrap main section");

    let lastId;
    let cur = [];

    window.addEventListener("scroll", event => {
      let fromTop = window.scrollY;

      mainNavLinks.forEach(link => {
        let section = document.querySelector(link.hash);

        if (
          section.offsetTop <= fromTop &&
          section.offsetTop + section.offsetHeight > fromTop
        ) {
          link.classList.add("current");
        } else {
          link.classList.remove("current");
        }
      });
    });

     

     

     

     

    배르만 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

    221.♡.♡.6

    1. nav > ul > li > div#wrap

    
<style>
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  display: grid;
  grid-template-columns: min-content 1fr;
  font-family: system-ui, sans-serif;
  
  /* this breaks position sticky in Firefox */
  /* overflow-x: hidden; */
}
header {
  grid-column: 1 / 3;
  background: #455A64;
  color: white;
  padding: 4rem;
  text-align: center;
}
nav {
  white-space: nowrap;
  background: #37474F;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Only stick if you can fit */
@media (min-height: 300px) {
  nav ul {
    position: sticky;
    top: 0;
  }
}
nav ul li a {
  display: block;
  padding: 0.5rem 1rem;
  color: white;
  text-decoration: none;
}
nav ul li a.current {
  background: black;
}
main {
  padding-bottom: 40rem;
}
section {
  padding: 2rem;
  margin: 0 0 2rem 0;
}
footer {
  grid-column: 1 / 3;
  background: #607D8B;
  padding: 5rem 1rem;
}
#wrap {
    height: 200px;
    background-color: #eee;
    overflow-y: auto;
}
</style>
<header>
  <h1>Website</h1>
</header>
<nav>
  <ul>
    <li><a href="#section-1">Section 1</a></li>
    <li><a href="#section-2">Section 2</a></li>
    <li><a href="#section-3">Section 3</a></li>
    <li><a href="#section-4">Section 4</a></li>
    <li><a href="#section-5">Section 5</a></li>
    <li><a href="#section-6">Section 6</a></li>
    <li><a href="#section-7">Section 7</a></li>
    <li><a href="#section-8">Section 8</a></li>
    <li><a href="#section-9">Section 9</a></li>
    <li>
        <div id="wrap">
            <br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br>
            <br><br><br><br><br><br><br><br><br><br><br><br><br>
        </div>
    </li>
  </ul>
</nav>
<main>
  <section id="section-1">
    <h1>Section 1</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis, blanditiis expedita? Earum eligendi pariatur quaerat quos expedita ab quibusdam ratione veniam in, mollitia fuga repudiandae?</p>
  </section>
  <section id="section-2">
    <h1>Section 2</h1>
    <p>Ratione nulla nam, ipsa dignissimos corrupti veniam nostrum, laudantium asperiores sequi numquam placeat velit voluptate in praesentium non labore unde incidunt laborum maxime quae magni.</p>
  </section>
  <section id="section-3">
    <h1>Section 3</h1>
    <p>Soluta quibusdam ad nostrum vel voluptate delectus sequi dolores quia quaerat officia corrupti, aperiam fugit facere debitis repudiandae praesentium sapiente inventore repellendus, nemo commodi alias!</p>
  </section>
  <section id="section-4">
    <h1>Section 4</h1>
    <p>Aliquid aliquam magnam ducimus similique obcaecati, unde exercitationem laborum incidunt, quas in ipsum inventore nostrum? Blanditiis optio cumque earum iste odio! Alias sint accusamus repudiandae.</p>
  </section>
  <section id="section-5">
    <h1>Section 5</h1>
    <p>Officia ipsum fugit iure eaque quisquam error tempore earum enim illum, delectus officiis incidunt corrupti aliquid nam quas perspiciatis eveniet doloremque quod labore? Doloremque, ipsum?</p>
  </section>
  <section id="section-6">
    <h1>Section 6</h1>
    <p>Aperiam repellat dignissimos fugiat possimus esse, suscipit neque nisi libero alias obcaecati ipsam, porro illo corrupti nostrum reprehenderit unde, illum in laudantium impedit. Modi, veniam.</p>
  </section>
  <section id="section-7">
    <h1>Section 7</h1>
    <p>Cum asperiores temporibus itaque consequatur quod inventore, quia quis explicabo dicta esse minus voluptatem reiciendis eveniet animi, necessitatibus illum dolorem doloremque repellat placeat, dolores eaque.</p>
  </section>
  <section id="section-8">
    <h1>Section 8</h1>
    <p>Optio qui, omnis itaque rerum iusto molestiae necessitatibus deleniti quod tenetur id perspiciatis voluptatum dolorum quisquam eius ipsum non architecto labore! Distinctio, tenetur. Officiis, necessitatibus?</p>
  </section>
  <section id="section-9">
    <h1>Section 9</h1>
    <p>Rem iste iure blanditiis excepturi esse nisi corrupti sequi, illo, laborum quo quis quaerat assumenda perspiciatis quod fuga vel laudantium doloribus architecto tempora omnis earum!</p>
  </section>
</main>
<footer>
  ©2018 Footer
</footer>
<script>
let mainNavLinks = document.querySelectorAll("nav ul li a");
let mainSections = document.querySelectorAll("main section");
let wrap = document.querySelector('#wrap');
 
let lastId;
let cur = [];
 
// This should probably be throttled.
// Especially because it triggers during smooth scrolling.
// https://lodash.com/docs/4.17.10#throttle
// You could do like...
// window.addEventListener("scroll", () => {
//    _.throttle(doThatStuff, 100);
// });
// Only not doing it here to keep this Pen dependency-free.
 
// window.addEventListener("scroll", event => {
//   let fromTop = window.scrollY;
wrap.addEventListener("scroll", event => {
  let fromTop = wrap.scrollTop;
 
  mainNavLinks.forEach(link => {
    let section = document.querySelector(link.hash);
 
    if (
      section.offsetTop <= fromTop &&
      section.offsetTop + section.offsetHeight > fromTop
    ) {
      link.classList.add("current");
    } else {
      link.classList.remove("current");
    }
  });
});
</script>

     

    2. body > div#wrap

    
<style>
html {
  scroll-behavior: smooth;
}
body {
  margin: 0; padding: 0;
}
#wrap {
  margin: 0;
  display: grid;
  grid-template-columns: min-content 1fr;
  font-family: system-ui, sans-serif;
 
  width: 100%;
  height: 100%;
  overflow-y: auto;
  
  /* this breaks position sticky in Firefox */
  /* overflow-x: hidden; */
}
header {
  grid-column: 1 / 3;
  background: #455A64;
  color: white;
  padding: 4rem;
  text-align: center;
}
nav {
  white-space: nowrap;
  background: #37474F;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Only stick if you can fit */
@media (min-height: 300px) {
  nav ul {
    position: sticky;
    top: 0;
  }
}
nav ul li a {
  display: block;
  padding: 0.5rem 1rem;
  color: white;
  text-decoration: none;
}
nav ul li a.current {
  background: black;
}
main {
  padding-bottom: 40rem;
}
section {
  padding: 2rem;
  margin: 0 0 2rem 0;
}
footer {
  grid-column: 1 / 3;
  background: #607D8B;
  padding: 5rem 1rem;
}
</style>
 
<body>
<div id="wrap">

<header>
  <h1>Website</h1>
</header>
<nav>
  <ul>
    <li><a href="#section-1">Section 1</a></li>
    <li><a href="#section-2">Section 2</a></li>
    <li><a href="#section-3">Section 3</a></li>
    <li><a href="#section-4">Section 4</a></li>
    <li><a href="#section-5">Section 5</a></li>
    <li><a href="#section-6">Section 6</a></li>
    <li><a href="#section-7">Section 7</a></li>
    <li><a href="#section-8">Section 8</a></li>
    <li><a href="#section-9">Section 9</a></li>
  </ul>
</nav>
<main>
  <section id="section-1">
    <h1>Section 1</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis, blanditiis expedita? Earum eligendi pariatur quaerat quos expedita ab quibusdam ratione veniam in, mollitia fuga repudiandae?</p>
  </section>
  <section id="section-2">
    <h1>Section 2</h1>
    <p>Ratione nulla nam, ipsa dignissimos corrupti veniam nostrum, laudantium asperiores sequi numquam placeat velit voluptate in praesentium non labore unde incidunt laborum maxime quae magni.</p>
  </section>
  <section id="section-3">
    <h1>Section 3</h1>
    <p>Soluta quibusdam ad nostrum vel voluptate delectus sequi dolores quia quaerat officia corrupti, aperiam fugit facere debitis repudiandae praesentium sapiente inventore repellendus, nemo commodi alias!</p>
  </section>
  <section id="section-4">
    <h1>Section 4</h1>
    <p>Aliquid aliquam magnam ducimus similique obcaecati, unde exercitationem laborum incidunt, quas in ipsum inventore nostrum? Blanditiis optio cumque earum iste odio! Alias sint accusamus repudiandae.</p>
  </section>
  <section id="section-5">
    <h1>Section 5</h1>
    <p>Officia ipsum fugit iure eaque quisquam error tempore earum enim illum, delectus officiis incidunt corrupti aliquid nam quas perspiciatis eveniet doloremque quod labore? Doloremque, ipsum?</p>
  </section>
  <section id="section-6">
    <h1>Section 6</h1>
    <p>Aperiam repellat dignissimos fugiat possimus esse, suscipit neque nisi libero alias obcaecati ipsam, porro illo corrupti nostrum reprehenderit unde, illum in laudantium impedit. Modi, veniam.</p>
  </section>
  <section id="section-7">
    <h1>Section 7</h1>
    <p>Cum asperiores temporibus itaque consequatur quod inventore, quia quis explicabo dicta esse minus voluptatem reiciendis eveniet animi, necessitatibus illum dolorem doloremque repellat placeat, dolores eaque.</p>
  </section>
  <section id="section-8">
    <h1>Section 8</h1>
    <p>Optio qui, omnis itaque rerum iusto molestiae necessitatibus deleniti quod tenetur id perspiciatis voluptatum dolorum quisquam eius ipsum non architecto labore! Distinctio, tenetur. Officiis, necessitatibus?</p>
  </section>
  <section id="section-9">
    <h1>Section 9</h1>
    <p>Rem iste iure blanditiis excepturi esse nisi corrupti sequi, illo, laborum quo quis quaerat assumenda perspiciatis quod fuga vel laudantium doloribus architecto tempora omnis earum!</p>
  </section>
</main>
<footer>
  ©2018 Footer
</footer>
</div>
 
<script>
let mainNavLinks = document.querySelectorAll("nav ul li a");
let mainSections = document.querySelectorAll("main section");
let wrap = document.querySelector('#wrap');
let lastId;
let cur = [];
// This should probably be throttled.
// Especially because it triggers during smooth scrolling.
// https://lodash.com/docs/4.17.10#throttle
// You could do like...
// window.addEventListener("scroll", () => {
//    _.throttle(doThatStuff, 100);
// });
// Only not doing it here to keep this Pen dependency-free.
 
// window.addEventListener("scroll", event => {
//   let fromTop = window.scrollY;
wrap.addEventListener("scroll", event => {
  let fromTop = wrap.scrollTop;
 
  mainNavLinks.forEach(link => {
    let section = document.querySelector(link.hash);
 
    if (
      section.offsetTop <= fromTop &&
      section.offsetTop + section.offsetHeight > fromTop
    ) {
      link.classList.add("current");
    } else {
      link.classList.remove("current");
    }
  });
});
</script>
 
</body>
    답변을 작성하시기 전에 로그인 해주세요.
    전체 804
    QA 내용 검색

    회원로그인

    인기태그
    #그누보드5(61020) #영카트5(17076) #php(15355) #그누보드4(10639) #게시판(3216) #javascript(2657) #그누보드(2422) #css(2083) #mysql(1540) #모바일(1284) #영카트(1282) #그누커머스(1178) #html(1120) #jquery(1019) #최신글(950) #자바스크립트(944) #DB(836) #로그인(804) #이미지(773) #여분필드(764)
    (주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
    사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
    © SIRSOFT