• 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

  • 相关阅读:
    Redis 为什么用跳表而不用平衡树
    常用的垂直细分引擎工具
    如何为Kafka集群选择合适的Partitions数量
    一图看懂深度学习框架对比----Caffe Torch Theano TensorFlow
    关于深度学习(deep learning)的常见疑问 --- 谷歌大脑科学家 Caffe缔造者 贾扬清
    神经网络CNN训练心得--调参经验
    数据归一化处理
    centos上tensorflow一键安装脚本
    深度学习---tensorflow简介
    kali linux之msf后渗透阶段
  • 原文地址:https://www.cnblogs.com/panie2015/p/5607791.html
Copyright © 2020-2023  润新知