jQuery置頂導(dǎo)航滾動(dòng)監(jiān)聽(tīng)代碼

jQuery仿芝麻信用左側(cè)下拉分類菜單和置頂導(dǎo)航，頁(yè)面滾動(dòng)到相應(yīng)的標(biāo)題內(nèi)容導(dǎo)航監(jiān)聽(tīng)效果代碼。

使用方法：

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代碼

<!--頂部導(dǎo)航-->
<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:;">開(kāi)始開(kāi)發(fā)</a>
			</li>
			<li>
				<a href="javascript:;" class="active">信用能力</a>
			</li>
			<li>
				<a href="javascript:;">基礎(chǔ)能力</a>
			</li>
			<li>
				<a href="javascript:;">API</a>
			</li>
			<li>
				<a href="javascript:;">資源與規(guī)范</a>
			</li>
		</ul>
	</div>
</div>
<!--內(nèi)容-->
<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:;">要講認(rèn)證</a>
						<ul>
							<li class="menu-item menu-item-2">
								<a class=" active" href="javascript:;">產(chǎn)品介紹</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:;">要講信用企業(yè)認(rèn)證</a>
						<ul>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">產(chǎn)品介紹</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:;">產(chǎn)品介紹</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">快速接入</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">數(shù)據(jù)反饋</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:;">要講信用企業(yè)信用評(píng)分</a>
						<ul>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">產(chǎn)品介紹</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:;">授權(quán)說(shuō)明</a>
							</li>
						</ul>
					</li>
					<li class="menu-item menu-item-1 collapse">
						<a class=" sub-title" href="javascript:;">行業(yè)關(guān)注名單</a>
						<ul>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">產(chǎn)品介紹</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">快速接入</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">風(fēng)險(xiǎn)標(biāo)簽對(duì)照表</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">數(shù)據(jù)反饋</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:;">產(chǎn)品介紹</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:;">進(jìn)階功能</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:;">產(chǎn)品介紹</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">快速接入</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">數(shù)據(jù)反饋</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:;">行業(yè)關(guān)注名單（普惠版）</a>
						<ul>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">產(chǎn)品介紹</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">快速接入</a>
							</li>
							<li class="menu-item menu-item-2">
								<a href="javascript:;">數(shù)據(jù)反饋</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">本頁(yè)導(dǎo)航</span>
								<span class="icon-down"></span>
							</div>
							<div class="dropdown-body">
								<ul>
									<li>
										<a href="javascript:;">產(chǎn)品特色</a>
									</li>
									<li>
										<a href="javascript:;">使用場(chǎng)景</a>
									</li>
									<li class="toc-item-2">
										<a href="javascript:;">產(chǎn)品出入?yún)?lt;/a>
									</li>
									<li>
										<a href="javascript:;">申請(qǐng)條件</a>
									</li>
									<li>
										<a href="javascript:;">資費(fèi)標(biāo)準(zhǔn)</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>

			</div>

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

						<tbody>
							<tr>
								<td>
									<div><strong>子產(chǎn)品</strong></div>
								</td>
								<td>
									<div><strong>輸入?yún)?shù)</strong></div>
								</td>
								<td>
									<div><strong>輸出參數(shù)</strong></div>
								</td>
							</tr>
							<tr>
								<td>
									<div>多因子人臉認(rèn)證</div>
									<div>多因子證照和人臉認(rèn)證</div>
									<div>多因子證照認(rèn)證</div>
									<div>多因子快捷認(rèn)證</div>
								</td>
								<td>
									<div>以下任意一種：</div>
									<div>（1）姓名+身份證號(hào)</div>
									<div>（2）支付寶賬號(hào)ID</div>
									<div>（3）要講實(shí)人ID</div>
									<div>（4）無(wú)入?yún)ⅲㄖ苯訂酒鹬Ц秾毧蛻舳耍?lt;/div>
								</td>
								<td>
									<div>（1）根據(jù)是否認(rèn)證通過(guò)，輸出“是”或“否”</div>
									<div>（2）如果認(rèn)證通過(guò)，則同時(shí)輸出唯一身份標(biāo)識(shí)</div>
									<div>（3）如果認(rèn)證不通過(guò)，則同時(shí)輸出不通過(guò)的原因</div>
								</td>
							</tr>
							<tr>
								<td>
									<div>人臉認(rèn)證SDK</div>
								</td>
								<td>
									<div>姓名+身份證號(hào)</div>
								</td>
								<td>
									<div>（1）根據(jù)是否認(rèn)證通過(guò)，輸出“是”或“否”</div>
									<div>（2）如果認(rèn)證不通過(guò)，則同時(shí)出不通過(guò)的原因<br></div>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<h2><a  href="#mao4" class="maodian" id="mao4"></a> 申請(qǐng)條件</h2>
				<p>1）合法成立的單位組織，擁有主體資格證明文件，需提供真實(shí)有效的營(yíng)業(yè)執(zhí)照，且認(rèn)證賬戶名稱需與營(yíng)業(yè)執(zhí)照主體一致。<br> 2）須具備所屬行業(yè)的經(jīng)營(yíng)許可，擁有經(jīng)營(yíng)許可證明文件（若有）。<br> 3）須具備相應(yīng)的安全技術(shù)系統(tǒng)和信息安全管理規(guī)范，確保用戶信息的數(shù)據(jù)安全。
				</p>
				<h2><a  href="#mao5" class="maodian" id="mao5"></a> 資費(fèi)標(biāo)準(zhǔn)</h2>
				<p>注：2017年3月16日至2018年4月15日之間，“信用＋聯(lián)盟”商家調(diào)用本產(chǎn)品免費(fèi)（人臉認(rèn)證SDK除外）。
					<a href="#">查看詳情</a>
				</p>
				<h6><a  href="#"></a> 計(jì)費(fèi)價(jià)格</h6>
				<ul>
					<li>多因子人臉認(rèn)證通過(guò)<br>
						<em>0.40</em>元/次</li>
					<li>多因子證照和人臉認(rèn)證通過(guò)<br>
						<em>0.40</em>元/次</li>
					<li>多因子證照認(rèn)證通過(guò)<br>
						<em>0.40</em>元/次</li>
					<li>多因子快捷認(rèn)證通過(guò)<br>
						<em>0.10</em>元/次</li>
					<li>人臉SDK認(rèn)證通過(guò)<br>
						<em>1.00</em>元/次</li>
				</ul>
				<h3><a  href="#"></a> </h3>
				<p>
					<strong>本接口及文檔資料由要講信用提供。您使用本接口，需要遵守開(kāi)放平臺(tái)相關(guān)協(xié)議及要講信用要求。</strong>
				</p>
			</div>
		</div>
	</div>
	
	<!--圖片彈窗-->
	<div class="imgtc">
		<img src=""/>
	</div>
	
</div>

<script type="text/javascript">
	$(function() {
		//左側(cè)菜單
		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;
		})
		//右上角鼠標(biāo)懸浮觸發(fā)下拉
		$('.dropdown-toc').hover(function() {
			$('.dropdown-body').toggle();
		})
		//滾動(dòng)監(jiān)聽(tīng)
		var leg = $('.maodian').length;
		$(window).scroll(function() {
			$('.imgtc').hide(); //滾動(dòng)后圖片放大隱藏
			var sh = $(window).scrollTop()
			//右上懸浮
			sh > 86 ? $('.anchor-toc').addClass('fixed') : $('.anchor-toc').removeClass('fixed');
			//循環(huán)遍歷錨點(diǎn)
			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("本頁(yè)導(dǎo)航"):"";
		})
		//右上角點(diǎn)擊
		$('.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. 本站所有素材（未指定商用），僅限學(xué)習(xí)交流。
2. 會(huì)員在本站下載的原創(chuàng)商用和VIP素材后，只擁有使用權(quán)，著作權(quán)歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材，未經(jīng)合法授權(quán)，請(qǐng)勿用于商業(yè)用途，會(huì)員不得以任何形式發(fā)布、傳播、復(fù)制、轉(zhuǎn)售該素材，否則一律封號(hào)處理。
4. 本平臺(tái)織夢(mèng)模板僅展示和個(gè)人非盈利用途，織夢(mèng)系統(tǒng)商業(yè)用途請(qǐng)預(yù)先授權(quán)。

查看演示下載資源

0 16643 55

軟件 Dreamweaver
格式 HTML
作者迷茫
版權(quán) ? 原創(chuàng)商用（獨(dú)家） i

版權(quán)聲明

此作品是由17素材網(wǎng)簽約用戶上傳，17素材網(wǎng)擁有版權(quán)；未經(jīng)17素材網(wǎng)書(shū)面授權(quán)，請(qǐng)勿作他用。人物肖像，字體及音頻如需商用需第三方額外授權(quán)；

17素材網(wǎng)尊重知識(shí)產(chǎn)權(quán)，如知識(shí)產(chǎn)權(quán)權(quán)利人認(rèn)為平臺(tái)內(nèi)容涉嫌侵權(quán)，可通過(guò)郵件：3264130392@qq.com提出書(shū)面通知，我們將及時(shí)處理。

網(wǎng)站提供的黨政主題相關(guān)內(nèi)容（國(guó)旗、國(guó)徽、黨徽...），目的在于配合國(guó)家政策宣傳，僅限個(gè)人學(xué)習(xí)分享使用，禁止用于任何廣告和商用目的。