kissy gallery组件里的sticky在火狐中失效
0
悬赏园豆：10
[已关闭问题]
关闭于 2015-08-27 10:17
我看了 kissy gallery 的 sticky 组件，它的样例在各个浏览器都没问题。但是在我自己写的页面中，在火狐里 sticky 没有生效。我对照了它的文件，没有发现什么不同之处。谁能看明白他是通过什么方法支持火狐的？我的代码哪里有错误？
<!doctype html> <html> <head> <meta charset="utf-8"> <title>position:sticky</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <script type="text/javascript" src="http://g.tbcdn.cn/kissy/k/1.3.0/kissy-min.js"></script> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <script src="js/respond.js"></script> <![endif]--> <style type="text/css"> html { font-size: 12px; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */ } html, button, input, select, textarea { font-family: tahoma, \5FAE\8F6F\96C5\9ED1, sans-serif; /* 1 */ } body { margin: 0; /* 1 */ color: #333333; background-color: #ffffff; /* 2 */ line-height: 1.5; /* 3 */ height: 4000px; } a { color: #0088cc; text-decoration: none; /* * Improves readability when focused and also mouse hovered in all browsers. * people.opera.com/patrickl/experiments/keyboard/test */ } a:focus { outline: thin dotted; } a:active, a:hover { outline: 0; } a:hover { color: #005580; } menu, ol, ul, dd { margin: 0; padding: 0; list-style: none; } .header-gray { height: 80px; background: #e7e7e7; } .header-gray h1 { font-size: 30px; } .header-gray h1 a.sticky-hl { font-size: 16px; } .header-s { position: absolute; z-index: 1000; left: 0; top: 0; width: 100%; } .layout, .main-wrap, .col-sub, .col-extra { *zoom: 1; } .layout:before, .main-wrap:before, .col-sub:before, .col-extra:before, .layout:after, .main-wrap:after, .col-sub:after, .col-extra:after { display: table; content: ""; } .layout:after, .main-wrap:after, .col-sub:after, .col-extra:after { clear: both; } .blank-80 { height: 80px; font-size: 0; } .grid-s5m0 .col-sub { width: 190px; margin-left: -100%; } .col-main { float: left; width: 100%; min-height: 1px; } .col-sub, .col-extra { float: left; } .mt-100 { margin-top: 100px; } .sticky-navwr { background-color: #333; z-index: 900; width: 190px; } .sticky-nav { padding: 10px 0; text-shadow: 1px 1px 0 #4e4e4e; font: bold 14px microsoft yahei; } .sticky-nav li a:link, .sticky-nav li a:visited { display: block; padding: 10px; color: #f9f9f9; _width: 170px; } .sticky-nav li a:hover { background: #66f; } </style> <script type="text/javascript"> KISSY.ready(function(){ var S = KISSY; if (S.Config.debug) { var srcPath = '../../../'; S.config({ packages:[ { name:'gallery', path:srcPath, charset:'utf-8', ignorePackageNameInUri:true } ] }); } S.use('node, gallery/sticky/1.1/index', function (S, Node, Sticky) { var sticky1 = new Sticky({ el: '#stick1', top: 80, target: 'body', callback: function(status) { if (status) { S.log("stick"); } else { S.log("unstick"); } } }); Sticky.fixed('#fixed'); }); }); </script> </head> <body> <header class="header-gray header-s" id="fixed"> <div class="layout"> <h1>position:sticky <a class="sticky-hl" target="_blank" href="http://gallery.kissyui.com/sticky/doc/guide/index.html">http://gallery.kissyui.com/sticky/doc/guide/index.html</a></h1> </div> </header> <div class="blank-80"></div> <div class="layout grid-s5m0"> <div class="col-main"> </div> <div class="col-sub mt-100"> <nav class="sticky-navwr" id="stick1"> <ul class="sticky-nav"> <li><a href="#1">综述</a></li> <li><a href="#2">组件demo和本地调试</a></li> <li><a href="#3">API说明</a></li> </ul> </nav> </div> </div> </body> </html>
