jQuery固定顶部导航效果_使用Skrollr创建视差滚动效果页面
2014-11-09 14:52:27  By: dwtedx

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

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

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+