• 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

  • 相关阅读:
    CCPC长春赛重现
    2016弱校联盟十一专场10.3,BNU52308,大模拟
    2016弱校联盟十一专场10.3,BNU52308,大模拟
    UVA12264 二分最大流,注意pdf的样例是错的
    UVA12264 二分最大流,注意pdf的样例是错的
    UVA1658海军上将,拆点费用流
    UVA1658海军上将,拆点费用流
    angular报错:Please add a @Pipe/@Directive/@Component annotation
    angular 自定义验证器
    ionic 学习笔记
  • 原文地址:https://www.cnblogs.com/panie2015/p/5607791.html
Copyright © 2020-2023  润新知