jQuery로 구현된 고정 스크롤 탐색 모음 효과-JS 튜토리얼-php.cn

jQuery로 구현된 고정 스크롤 탐색 모음 효과

小云云

풀어 주다： 2018-01-09 10:26:09

원래의

2473명이 탐색했습니다.

고정 스크롤은 사용자 경험이기도 한 편리한 웹사이트 페이지 검색 효과를 얻기 위해 스크롤 과정에서 탐색이 브라우저에 고정되는 것을 말합니다. 이 기사에서는 jQuery 플러그와 관련하여 jQuery로 구현된 고정 스크롤 탐색 모음 효과를 주로 소개합니다. -in smint 독자들이 다운로드하여 참조할 수 있는 완전한 예제 소스 코드와 함께 관련 사용 팁이 제공됩니다. 모든 사람에게 도움이 되기를 바랍니다.

구현 방법을 살펴보겠습니다.

jQuery의 smint 플러그인도 탐색 메뉴 고정 플러그인입니다. 페이지가 스크롤되면 탐색 메뉴가 상단에 고정되고, 메뉴를 클릭하면 페이지가 해당 영역으로 원활하게 스크롤됩니다.

호환성

smint는 position:fixed를 사용하기 때문에 IE6와 호환되지 않습니다. 적용 가능한 브라우저: IE8, 360, FireFox, Chrome, Safari, Opera, Maxthon, Sogou, Window of the World.

파일 소개

<link href="css/demo.css" rel="external nofollow" rel="stylesheet" type="text/css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.smint.js"></script>

로그인 후 복사

HTML

<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);">
<p class="wrap">
  <p class="subMenu">
    <p class="inner">
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="sTop" class="subNavBtn">Home</a>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="s1" class="subNavBtn">Section 1</a>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="s2" class="subNavBtn">Section 2</a>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="s3" class="subNavBtn">Section 3</a>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="s4" class="subNavBtn">Section 4</a>
      <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="s5" class="subNavBtn end">Section 5</a>
    </p>
  </p>
  <p class="section sTop">
    <p class="inner"></p><br class="clear">
  </p>
  <p class="section s1">
    <p class="inner"><h1>Section 1</h1></p>
  </p>
  <p class="section s2">
    <p class="inner"><h1>Section 2</h1></p>
  </p>
  <p class="section s3">
    <p class="inner"><h1>Section 3</h1></p>
  </p>
  <p class="section s4">
    <p class="inner"><h1>Section 4</h1></p>
  </p>
  <p class="section s5">
    <p class="inner"><h1>Section 5</h1></p>
  </p>
</p>
</body>

로그인 후 복사

참고: 메뉴의 외부 컨테이너(예: 메뉴의 하위 메뉴) 위 예시) position:absolute 스타일이 필요하며, 각 메뉴의 라벨은 id로 설정되어야 하며, id 값은 아래 해당 영역의 클래스 값과 일치해야 합니다.

JavaScript

$(function() {
  $('.subMenu').smint({
    scrollSpeed : 1000
  });
});

로그인 후 복사