插件描述：底部和头部固定式HTML框架 固定框架 向下滚动切换顶部导航，底部和头部固定式HTML框架
Framework Fixed jQuery固定框架 向下滚动切换顶部导航，底部和头部固定式HTML框架
实现方法
创建HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!-- Fixed header --><div id="fixed-header-slide"> <div id="fixed-header-wrap"> <div id="fixed-header"> <div class="fixed-header-nav"> <ul class="main-menu"> <li>Contact Us</li> </ul> </div> </div> </div></div> |
向下滚动后所出现的顶部导航。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!-- Header --><div id="header-wrap"> <div id="header"> <h1 class="title_name">Framework Fixed Html with <span>CSS & jQuery</span><small>by Sunflowa Media</small> </h1> <div id="main-nav"> <ul class="main-menu"> <li>Contact Us</li> </ul> </div> </div></div> |
中间内容
1 2 3 4 5 6 | <!-- Main --><div id="main-wrap"> <div id="container"> 中间内容 </div><!-- #container --></div> |
底部固定内容
1 2 3 4 5 | <!-- Fixed Footer --><div id="fixed-footer-wrap"> <!-- Footer --> </div> |
js
引用jQuery1.4以上版本
1 | <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <script type="text/javascript"> // Category Dropdown jQuery(function($) { $("#toggle-cat").click(function() { $("#toggle-client").removeClass("active"); $("#client-filter-panel").hide(); $(this).toggleClass("active"); $("#cat-filter-panel").slideToggle(250); return false; }); $("#toggle-client").click(function() { $("#toggle-cat").removeClass("active"); $("#cat-filter-panel").hide(); $(this).toggleClass("active"); $("#client-filter-panel").slideToggle(250); return false; }); }); jQuery(function($) { $('#toggling').hide(); var footerHeight = $('#footer').outerHeight(true); $('#footer-toggle').click(function() { $('#toggling').animate({ 'height': 'toggle' }, 500); $(this).toggleClass('expanded'); return false; }); });</script> |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com