CSS, javascript로 스크롤할 때 고정된 상단 탐색 모음을 만드는 방법

이 기사에서는 사용자 편의성을 높이기 위해 스크롤할 때 고정된 상단을 만드는 방법에 대한 간단한 팁을 공유하고 싶습니다. 일반적으로 웹사이트는 단조로운 형태의 헤더, 사이드바, 푸터로 구성됩니다. 하지만 지금은 다양한 디자인 스타일로 더 매력적인 외관을 가진 많은 웹사이트가 있습니다.


단순히 매력적으로 보이는 것만으로는 충분하지 않으므로 사용자 친화적인 웹 사이트를 만드는 것이 중요하므로 방문자가 웹 사이트의 콘텐츠를 더 쉽게 탐색할 수 있도록 스크롤할 때 navbar를 고정하여 웹 사이트를 개선합니다.




페이지 스크롤 시 고정 막대를 고정하는 방법은 여러 가지가 있으며 그 중 하나는 다음과 같이 간단한 CSS 속성을 사용하는 것입니다.

.sticky{
  position:sticky;
  top:0;
}

또는 자바 스크립트로. 이렇게 하면 자바스크립트로 스크롤한 후 상단 탐색바를 만드는 것이 위의 CSS보다 조금 더 길다.


자바 스크립트로 스크롤 할 때 고정 상단 탐색 모음을 만드는 방법

Navbar는 스크롤 후 javascript로 다른 기능들을 보다 자유롭게 관리할 수 있기 때문에 자바스크립트를 배우면 이해가 더 쉬울 것입니다.


1단계 - 확장자가 .html인 파일을 만든 다음 아래에 병합한 html, css 및 javascript 소스 코드를 복사합니다.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hardifal.com</title>
<!-- css start -->
    <style type="text/css">
      #navbar{
        background: green;
        padding: 10px;
      }
      #navbar a{
        color:white;
        padding: inherit;
      }
      .sticky{
        position: fixed;
        top: 0;
        width: 100%;
      }
    </style>
    <!-- css end -->
  </head>
  <body>
<!-- content -->
    <h1>Contoh membuat navbar fixed top ketika di scroll</h1>
    <nav id="navbar">
      <a href="#" class="active">home</a>
      <a href="#">menu 1</a>
      <a href="#">menu 2</a>
    </nav>
    <br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br><br>lorem ipsum <br>
<!-- content -->
<!-- javascript -->
  <script>
    window.onscroll = function() {myFunction()};
    var widget = document.getElementById('navbar');
    var sticky = widget.offsetTop;
    function myFunction(){
      if (window.pageYOffset >= sticky){
        widget.classList.add("sticky")
      } else{
        widget.classList.remove("sticky");
      }
    }
  </script>
  <!-- javascript end -->
  </body>
</html>

결과:

CSS, javascript로 스크롤할 때 고정된 상단 탐색 모음을 만드는 방법

위의 데모는 css 및 javascript로 스크롤할 때 고정된 상단 탐색 모음을 만드는 방법에 대한 이 기사의 핵심이자 마무리의 예입니다. 따라서 위의 각 소스 코드에서 배우십시오. 도움이 되기를 바랍니다.


html, css 및 javascript를 사용한 웹 개발자 디자인에 대한 요청이 있으면 의견란에 제출하십시오.

none:

Related Articles