zoukankan      html  css  js  c++  java
  • jquery实现导航栏跟随窗口滚动

    最近在制作一个模版的时候用到的一个jquery插件,当网站导航滚动到当前可见页面顶部时,固定在顶部并随窗口滚动,有很多的网站前台模版有有类似的效果。

    smohan.fixednav.js

    /*
     * 随滚动条固定导航到顶部插件
     * autho:Smohan
     * http://www.smohan.net
     */
    ;
    (function ($) {
    	$.fn.smohanfixednav = function (mtop, zindex) {
    		var nav = $(this),
    		isIE6 = 'undefined' == typeof(document.body.style.maxHeight),
    		mtop = mtop,
    		zindex = zindex,
    		dftop = nav.offset().top - $(window).scrollTop(),
    		dfleft = nav.offset().left - $(window).scrollLeft(),
    		dfcss = new Array;
    		dfcss[0] = nav.css("position"),
    		dfcss[1] = nav.css("top"),
    		dfcss[2] = nav.css("left"),
    		dfcss[3] = nav.css("zindex"),
    		$(window).scroll(function (e) {
    			$(this).scrollTop() > dftop ? isIE6 ? nav.css({
    				position : "absolute",
    				top : eval(document.documentElement.scrollTop),
    				left : dfleft,
    				"z-index" : zindex
    			}) : nav.css({
    				position : "fixed",
    				top : mtop + "px",
    				left : dfleft,
    				"z-index" : zindex
    			}) : nav.css({
    				position : dfcss[0],
    				top : dfcss[1],
    				left : dfcss[2],
    				"z-index" : dfcss[3]
    			})
    		})
    	}
    })(jQuery)
    

     注: 由于jquery的1.9 以上的版本,不再支持 $.browser 方法。所以将原有插件中判断是否是IE6 的语句 $.browser.msie&&$.browser.version=="6.0" 改为 'undefined' == typeof(document.body.style.maxHeight)

    使用方法:

    <script type="text/javascript" src="/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="smohan.fixednav.js"></script>
    <script type="text/javascript">
    $(document).ready(function(e) {
    $('.mainavi').smohanfixednav(0,999);
    });
    </script>
    

      

    1、(0,999)两个数值,第一个一个是设置在滚动时导航栏与顶部的距离,第二个是导航栏的zindex

    2、mainavi 为导航栏的class

  • 相关阅读:
    让你彻底明白什么叫游戏引擎(1)
    今后几年将有多于28部游戏电影面世
    Symbian系统体系结构
    让你彻底明白什么叫游戏引擎(2)
    网易程序笔试题
    [转贴]暴雪的霸王条款是否合理?
    CPU GPU设计工作原理《转》
    求伯君:向暴雪学习 金山不求一夜暴富
    我的职业规划
    网络游戏程序员新手入门 [转]
  • 原文地址:https://www.cnblogs.com/panie2015/p/5607791.html
Copyright © 2011-2022 走看看