简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

jQuery를 사용하여 고정 탐색 모음 효과 얻기

一个新手
풀어 주다： 2017-09-18 09:08:43
원래의
2195명이 탐색했습니다.

jQuery는 고정 탐색 모음 효과를 구현합니다. 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>固定导航栏效果</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
text-align: center;
}
.fixed{
top: 0;
left: 0;
position: fixed;
}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script>
$(document).ready(function(){
//
 
入口函数
$(window).scroll(function(){
//
 
添加滚动事件
if($(window).scrollTop() >= $(".top").height()){
//
 
判断窗口的滚动如果大于top的高度就为nav添加fixed
$(".nav").addClass("fixed");
}else{
//
 
否则就为nav移除fixed
$(".nav").removeClass("fixed");
}
});
});
</script>
</head>
<body>
<p class="top">
<img src="img/top.png"/>
</p>
<p class="nav">
<img src="img/nav.png"/>
</p>
<p class="main">
<img src="img/main.png"/>
</p>
</body>
</html>
로그인 후 복사


위 내용은 jQuery를 사용하여 고정 탐색 모음 효과 얻기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
jquery 导航 效果
원천：php.cn
이전 기사：JS 인증코드 기능 설명 다음 기사：jquery ajax가 배열을 배경으로 전달하지 못했습니다.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Nuxt.js에 jQuery를 설치하는 단계 프로젝트에 jQuery를 추가하려고 하는데 정의되지 않았다는 오류가 발생합니다. 플러그인:[{src:'~/plugins/js/svgSprite.js',mode:'...
에서 2023-11-06 16:41:50
0
1
225
데이터 속성을 가져올 때 jQuery가 잘못된 값을 얻음 데이터 속성이 <divclass='p1'data-location='1'></div> 인 div가 있습니다. 다음과 같은 스크립트가 있습니다 ...
에서 2023-11-01 23:01:19
0
1
209
jQuery의 전송 인코딩 지원: 청크 저는 웹 개발자입니다. 내 스크립트에서는 "Transfer-Encoding:chunked"를 설정하기 위해 header()를 사용합니다. 웹페이...
에서 2023-10-25 23:44:37
0
1
230
JavaScript 또는 jQuery를 사용하여 이미지의 자연스러운 크기를 얻는 방법은 무엇입니까? 지금까지 다음 코드가 있습니다. varimg=document.getElementById('draggable'); varwidth=img.clientWidth; v...
에서 2023-10-21 13:53:08
0
2
275
텍스트 영역 자동 확장 간단한 자동 확장 텍스트 영역을 만들려고 합니다. 이것은 내 코드입니다: textarea.onkeyup=function(){textarea.style.height...
에서 2023-10-21 08:49:23
0
2
225
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！