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

  • 相关阅读:
    排序算法之——冒泡排序优化
    Linux程序在预处理、编译、汇编、链接、运行步骤的作用
    理解可变参数的原理
    对虚函数、虚表的认识
    成员函数的重载、覆盖、隐藏
    centOS7-mariadb的安装
    centOS7-本地源配置
    vmware中桥接、NET、仅主机模式详解
    XXX系统项目目标文档课堂讨论
    做生活的有心人——xxx系统第一阶段总结
  • 原文地址:https://www.cnblogs.com/panie2015/p/5607791.html
Copyright © 2011-2022 走看看