首页新闻找找看学习计划

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>
zanetti的主页 zanetti | 初学一级 | 园豆:152
提问于:2014-09-30 11:20
< >
分享
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册