Question

我使用了stickjs脚本，似乎无法调用＆＃34;选项＆＃34;代码中的方法。我把它贴在下面。

我不确定是否需要先初始化＆＃34;选项＆＃34;即。 .sticky（options（{options_here，option_2}）;

我已经尝试了两种方式，但直到div不能调到另一个css类：

您可以看到我已完成2个选项：{topSpacing：0，className：＆＃34; #newheader＆＃34; - #newheader应该为每个CSS显示不同的颜色。

我错过了什么？谢谢！

<html>
<head>
  <title>Sticky Plugin</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.sticky.js"></script>
  <script>
    $(window).load(function(){
      $("#header").sticky({ topSpacing: 0, className: "#newheader" })
    });

  </script>


  <style>
    body {
      height: 10000px;
      padding: 0;
      margin: 0;
    }

    #header {
      background: #bada55;
      color: white;
      font-family: Droid Sans;
      font-size: 18px;
      line-height: 1.6em;
      font-weight: bold;
      text-align: center;
      padding: 10px;
      text-shadow: 0 1px 1px rgba(0,0,0,.2);
      width:100%;
      box-sizing:border-box;
    }

    #newheader {
    background: #FF0004;
      color:#0056F2;
      font-family: Droid Sans;
      font-size: 24px;
      line-height: 1.6em;
      font-weight: bold;
      text-align: center;
      padding: 10px;
      text-shadow: 0 1px 1px rgba(0,0,0,.2);
      width:100%;
      box-sizing:border-box;
    }
  </style>
</head>
<body>
  <p>This is test this is text this is text at the top.</p>
  <div id="header">
    <p>This is the sticky thingy that is really cool.</p>
  </div>
  <p>This is test this is text this is text at the bottom.</p>
</body>
</html>

Answer 1

ClassName属性为元素添加CLASS名称。所以它没有身份证!!尝试：

$("#header").sticky({ topSpacing: 0, className: "newheader" });

改变你的css：

 .newheader {
      background: #FF0004;
      .....
  }

更新：

阅读Sticky文档后很清楚......新类将被添加到父元素中。所以你必须改变你的css级联到：

.newheader #header {
   background: #FF0004;
   color:#0056F2;
   font-family: Droid Sans;
   font-size: 24px;
   line-height: 1.6em;
   font-weight: bold;
   text-align: center;
   padding: 10px;
   text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
   width:100%;
   box-sizing:border-box;
 }

这将节省你的一天！

在JavaScript中调用其他选项方法

1 个答案: