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

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

小云云

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

원래의

2404명이 탐색했습니다.

고정 스크롤은 사용자 경험이기도 한 편리한 웹사이트 페이지 검색 효과를 얻기 위해 스크롤 과정에서 탐색이 브라우저에 고정되는 것을 말합니다. 이 기사에서는 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
  });
});

로그인 후 복사

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

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