jQuery固定顶部导航效果_使用Skrollr创建视差滚动效果页面

利用jQuery做出做我博客这样的效果其实并不难、也就是说当用户把滚动条下滑到下方的时候、菜单栏会浮动在整个页面的上方、那么今天我就和大家分享一个例子、实现这个功能、当然不是我网站的源代码、是另外一个同样实现了这个功能的例子、效果也非常不错、先来看看整个运行效果吧

就像画面上显示的一样、当用户滑动到下方的时候会浮动在上方、当滑动到最上方的时候两个菜单栏会变高的呢

jQuery代码

<script src=´jquery.js´></script>
<script src=´skrollr.min.js´></script>
<script>        
	$(document).ready(function () {
		//@ sourceURL=pen.js
		skrollr.init({ smoothScrolling: true });
	}); 
</script>

HTML代码

<div data-128="height: 64px" data-0="height:192px" 
	id="toolbar" class="skrollable skrollable-after" 
	style="height: 64px;">
	<div id="actions">
	<div class="icon">
	<svg xmlns:xlink="http://www.w3.org/1999/xlink" 
		xmlns="http://www.w3.org/2000/svg" version="1.1" 
		y="0px" x="0px" viewBox="0 0 24 24">
		<g id="menu">
		<path d="M3,18h18v-2H3V18z M3,13h18v-2H3V13z M3,6v2h18V6H3z">
		</path>
		</g>
	</svg>
	</div>
	<div class="spacer">
	</div>
	<div class="icon">
	<svg xmlns:xlink="http://www.w3.org/1999/xlink" 
		xmlns="http://www.w3.org/2000/svg" version="1.1" 
		y="0px" x="0px" viewBox="0 0 24 24">
		<g id="search">
		<path d="M15.5,14h-0.8l-0.3-0.3c1-1.1,1.6-2.6,1.6-4.2C16,
			5.9,13.1,3,9.5,3C5.9,3,3,5.9,3,9.5S5.9,16,9.5,16c1.6,0,
			3.1-0.6,4.2-1.6l0.3,0.3v0.8l5,5l1.5-1.5L15.5,14z M9.5,14C7,
			14,5,12,5,9.5S7,5,9.5,5C12,5,14,7,14,9.5S12,14,9.5,14z">
		</path>
		</g>
	</svg>
	</div>
	<div class="icon">
	<svg xmlns:xlink="http://www.w3.org/1999/xlink" 
		xmlns="http://www.w3.org/2000/svg" version="1.1" 
		y="0px" x="0px" viewBox="0 0 24 24">
		<g id="more-vert">
		<path d="M12,8c1.1,0,2-0.9,2-2s-0.9-2-2-2c-1.1,0-2,0.9-2,2S10.9,
			8,12,8z M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S13.1,
			10,12,10z M12,16c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,
			2-0.9,2-2S13.1,16,12,16z">
		</path>
		</g>
	</svg>
	</div>
	</div>
	<div data-128="font-size: 18px; padding: 0 0 21px 60px;" 
		data-0="font-size: 48px; padding: 0 0 24px 12px;" id="title" 
		class="skrollable skrollable-after" style="font-size: 18px; 
		padding: 0px 0px 21px 60px;">
		Page Title
	</div>
</div>

这里贴出来的只是一部分代码、你可以下载源代码欣赏

源代码下载链接链接: http://dwtedx.com/download.html?bdkey=s/1qWoIyCW 密码: 1tfu