jQuery置頂導航滾動監聽代碼

jQuery仿芝麻信用左側下拉分類菜單和置頂導航，頁面滾動到相應的標題內容導航監聽效果代碼。

使用方法：

1、head引入css文件

<link rel="stylesheet" type="text/css" href="statics/css/style.css" />

2、head引入js文件

<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

3、body引入HTML代碼

<!--頂部導航-->
<div class="page-title-fixed">
	<div class="container">
		<h1 class="logo">
			<a href="#">
				<span class="logo-name">要講信用</span>
			</a>
		</h1>
		<ul class="page-menus">
			<li>
				<a href="javascript:;">開始開發</a>
			</li>
			<li>
				<a href="javascript:;" class="active">信用能力</a>
			</li>
			<li>
				<a href="javascript:;">基礎能力</a>
			</li>
			<li>
				<a href="javascript:;">API</a>
			</li>
			<li>
				<a href="javascript:;">資源與規范</a>
			</li>
		</ul>
	</div>
</div>
<!--內容-->
<div class="wrapper">
	<div class="container">
		<div class="sidebar-wrapper fixed">
			<div class="sidebar">
				<ul class="menu-group">
					<li class="menu-item menu-item-1 active">
						<a class=" sub-title" href="javascript:;">要講認證</a>
						<ul>
							<li class="menu-item menu-item-2">
								<a class=" active" href="javascript:;">產品介紹</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">快速接入</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">API列表</a>
							</li>
						</ul>
					</li>

					<li class="menu-item menu-item-1 collapse">
						<a class=" sub-title" href="javascript:;">要講信用企業認證</a>
						<ul>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">產品介紹</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">快速接入</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">API列表</a>
							</li>
						</ul>
					</li>

					<li class="menu-item menu-item-1 collapse">
						<a class=" sub-title" href="javascript:;">要講分</a>
						<ul>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">產品介紹</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">快速接入</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">數據反饋</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">API列表</a>
							</li>
						</ul>
					</li>
					<li class="menu-item menu-item-1 collapse">
						<a class=" sub-title" href="javascript:;">要講信用企業信用評分</a>
						<ul>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">產品介紹</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">快速接入</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">API列表</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">授權說明</a>
							</li>
						</ul>
					</li>
					<li class="menu-item menu-item-1 collapse">
						<a class=" sub-title" href="javascript:;">行業關注名單</a>
						<ul>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">產品介紹</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">快速接入</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">風險標簽對照表</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">數據反饋</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">API列表</a>
							</li>
						</ul>
					</li>
					<li class="menu-item menu-item-1 collapse">
						<a class=" sub-title" href="javascript:;">信用借還</a>
						<ul>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">產品介紹</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">快速接入</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">API列表</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">進階功能</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">FAQ</a>
							</li>
						</ul>
					</li>
					<li class="menu-item menu-item-1 collapse">
						<a class=" sub-title" href="javascript:;">要講分（普惠版）</a>
						<ul>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">產品介紹</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">快速接入</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">數據反饋</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">API列表</a>
							</li>
						</ul>
					</li>
					<li class="menu-item menu-item-1 collapse">
						<a class=" sub-title" href="javascript:;">行業關注名單（普惠版）</a>
						<ul>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">產品介紹</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">快速接入</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">數據反饋</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">API列表</a>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>

		<div class="main-container">

			<div class="breadcrumb">

				<div class="breadcrumb-anchor">

					<div class="anchor-toc">
						<div class="dropdown-toc">
							<div class="dropdown-trigger">
								<span class="toc-current">本頁導航</span>
								<span class="icon-down"></span>
							</div>
							<div class="dropdown-body">
								<ul>
									<li>
										<a href="javascript:;">產品特色</a>
									</li>
									<li>
										<a href="javascript:;">使用場景</a>
									</li>
									<li class="toc-item-2">
										<a href="javascript:;">產品出入參</a>
									</li>
									<li>
										<a href="javascript:;">申請條件</a>
									</li>
									<li>
										<a href="javascript:;">資費標準</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>

			</div>

			<div class="markdown">
				<h1>
					要講認證產品介紹<span class="metadata">更新時間：2018-03-14</span>
				</h1>
				<p>對個人進行實人認證，核驗方式包括人臉識別、眼紋識別、姓名和身份證號驗證等。要講認證主要解決線上實人開戶、帳號實名認證、帳號實人登錄等場景中個人身份的識別問題。與其他實人認證服務相比，要講認證在使用流程中甚至不需要用戶做動作就能快速得出認證結果，速度快、體驗好、通過率高，擁有業內獨有的眼紋人臉雙因子認證技術，安全水平已達金融級要求。</p>
				<h2><a  href="#mao1" class="maodian" id="mao1"></a> 產品特色</h2>
				<ul>
					<li>
						<strong>金融級安全防控：</strong> 10年金融行業實名認證積累使得本產品具有精準識別身份冒用等風險防控能力；
					</li>
					<li>
						<strong>工業級成熟能力：在</strong> 金融，直播，稅務，二手交易，酒店，出行，租房等各種成熟業務場景大規模使用；
					</li>
					<li>
						<strong>流暢刷臉體驗：</strong> 接入流程簡潔高效，提供不同驗證方式的智能組合接入，可以方便商戶快速接入。實人認證過程流暢自然，體驗良好，正常用戶通過率高。
					</li>
				</ul>
				<h2><a  href="#mao2" class="maodian" id="mao2"></a> 使用場景</h2>
				<p>
					<strong>1.標準認證方案實現快速實人認證</strong><br> 標準認證方案提供基于支付寶客戶端的實人認證能力，采用多因子認證技術快速得出認證結果，方案包含4種子產品，可支持不同細分場景的多種定制化認證需求。標準認證方案包含4種子產品，可支持不同細分場景的多種定制化認證需求，場景介紹請見下：
					<br>
					<img src="statics/images/1.png" class="align-center"></p>
				<h6>
					<a  href="#"></a> 
					2.<strong>全量認證方案實現全渠道實人認證</strong>
				</h6>
				<p>全量認證方案提供“標準認證方案”和“人臉認證SDK”相結合的綜合方案，能夠自動判斷用戶當前環境是否安裝支付寶客戶端，對于已安裝的用戶提供體驗更好安全性更高的“標準認證方案”，對于未安裝的用戶提供“人臉認證SDK”，幫助合作伙伴的APP實現對未安裝支付寶客戶端用戶的覆蓋。<br> 全量認證方案包含“標準認證方案”4種子產品以及“人臉認證SDK”。“標準認證方案”場景介紹請見“標準認證方案場景介紹”；“人臉認證SDK”場景介紹請見下表：
					<br>
					<img src="statics/images/2.png" class="align-center"></p>
				<h3><a  href="#mao3" class="maodian" id="mao3"></a> 產品出入參</h3>
				<div>
					<table>

						<tbody>
							<tr>
								<td>
									<div><strong>子產品</strong></div>
								</td>
								<td>
									<div><strong>輸入參數</strong></div>
								</td>
								<td>
									<div><strong>輸出參數</strong></div>
								</td>
							</tr>
							<tr>
								<td>
									<div>多因子人臉認證</div>
									<div>多因子證照和人臉認證</div>
									<div>多因子證照認證</div>
									<div>多因子快捷認證</div>
								</td>
								<td>
									<div>以下任意一種：</div>
									<div>（1）姓名+身份證號</div>
									<div>（2）支付寶賬號ID</div>
									<div>（3）要講實人ID</div>
									<div>（4）無入參（直接喚起支付寶客戶端）</div>
								</td>
								<td>
									<div>（1）根據是否認證通過，輸出“是”或“否”</div>
									<div>（2）如果認證通過，則同時輸出唯一身份標識</div>
									<div>（3）如果認證不通過，則同時輸出不通過的原因</div>
								</td>
							</tr>
							<tr>
								<td>
									<div>人臉認證SDK</div>
								</td>
								<td>
									<div>姓名+身份證號</div>
								</td>
								<td>
									<div>（1）根據是否認證通過，輸出“是”或“否”</div>
									<div>（2）如果認證不通過，則同時出不通過的原因<br></div>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<h2><a  href="#mao4" class="maodian" id="mao4"></a> 申請條件</h2>
				<p>1）合法成立的單位組織，擁有主體資格證明文件，需提供真實有效的營業執照，且認證賬戶名稱需與營業執照主體一致。<br> 2）須具備所屬行業的經營許可，擁有經營許可證明文件（若有）。<br> 3）須具備相應的安全技術系統和信息安全管理規范，確保用戶信息的數據安全。
				</p>
				<h2><a  href="#mao5" class="maodian" id="mao5"></a> 資費標準</h2>
				<p>注：2017年3月16日至2018年4月15日之間，“信用＋聯盟”商家調用本產品免費（人臉認證SDK除外）。
					<a href="#">查看詳情</a>
				</p>
				<h6><a  href="#"></a> 計費價格</h6>
				<ul>
					<li>多因子人臉認證通過<br>
						<em>0.40</em>元/次</li>
					<li>多因子證照和人臉認證通過<br>
						<em>0.40</em>元/次</li>
					<li>多因子證照認證通過<br>
						<em>0.40</em>元/次</li>
					<li>多因子快捷認證通過<br>
						<em>0.10</em>元/次</li>
					<li>人臉SDK認證通過<br>
						<em>1.00</em>元/次</li>
				</ul>
				<h3><a  href="#"></a> </h3>
				<p>
					<strong>本接口及文檔資料由要講信用提供。您使用本接口，需要遵守開放平臺相關協議及要講信用要求。</strong>
				</p>
			</div>
		</div>
	</div>
	
	<!--圖片彈窗-->
	<div class="imgtc">
		<img src=""/>
	</div>
	
</div>

<script type="text/javascript">
	$(function() {
		//左側菜單
		var h = 0;
		$('.menu-item-1 .sub-title').click(function() {
			$(this).parent().toggleClass('active collapse');
			$('.menu-item-1').each(function() {
				h += $(this).height();
			})
			//給菜單賦值高度
			$('.sidebar').css({
				"height": h
			});
			h = 0;
		})
		//右上角鼠標懸浮觸發下拉
		$('.dropdown-toc').hover(function() {
			$('.dropdown-body').toggle();
		})
		//滾動監聽
		var leg = $('.maodian').length;
		$(window).scroll(function() {
			$('.imgtc').hide(); //滾動后圖片放大隱藏
			var sh = $(window).scrollTop()
			//右上懸浮
			sh > 86 ? $('.anchor-toc').addClass('fixed') : $('.anchor-toc').removeClass('fixed');
			//循環遍歷錨點
			for(i = 1; i <= leg; i++) {
				if($("#mao" + i).offset().top-140 <= sh) {
					$('.maodian').removeClass('active');
					$('#mao' + i).addClass("active");
					$('.toc-current').text($('#mao'+i).parent().text());
					$('.dropdown-body ul li').removeClass('active').eq(i-1).addClass('active');
				}
				
			}
			sh < 140?$('.toc-current').text("本頁導航"):"";
		})
		//右上角點擊
		$('.dropdown-body ul li').click(function(){
			var jt = $(this).index();
			$(window).scrollTop($('.maodian').eq(jt).offset().top-140);
		})
		//圖片放大
		$('img').click(function(){
			var img = $(this).attr('src');
			$('.imgtc').show().find('img').attr('src',img);
		})
		$('.imgtc').click(function(){
			$(this).toggle();
		})
	})
</script>

使用聲明

1. 本站所有素材（未指定商用），僅限學習交流。
2. 會員在本站下載的原創商用和VIP素材后，只擁有使用權，著作權歸原作者及17素材網所有。
3. 原創商用和VIP素材，未經合法授權，請勿用于商業用途，會員不得以任何形式發布、傳播、復制、轉售該素材，否則一律封號處理。
4. 本平臺織夢模板僅展示和個人非盈利用途，織夢系統商業用途請預先授權。

查看演示下載資源

0 17117 55

軟件 Dreamweaver
格式 HTML
作者迷茫
版權 ? 原創商用（獨家） i

版權聲明

此作品是由17素材網簽約用戶上傳，17素材網擁有版權；未經17素材網書面授權，請勿作他用。人物肖像，字體及音頻如需商用需第三方額外授權；

17素材網尊重知識產權，如知識產權權利人認為平臺內容涉嫌侵權，可通過郵件：3264130392@qq.com提出書面通知，我們將及時處理。

網站提供的黨政主題相關內容（國旗、國徽、黨徽...），目的在于配合國家政策宣傳，僅限個人學習分享使用，禁止用于任何廣告和商用目的。