在JavaScript中调用其他选项方法_Javascript_Jquery_Html_Css

在JavaScript中调用其他选项方法

javascript jquery html css

在JavaScript中调用其他选项方法,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我使用的是stickjs脚本，似乎无法在代码中调用“options”方法。我把它贴在下面了我不确定是否需要首先初始化“options”（选项（{options_在这里，option_2}）我已经尝试了两种方法，但直到当div粘到顶部时才调用另一个css类：您可以看到我已经完成了两个选项：{topspace:0，className:“#newheader”}-#newheader应该为每个CSS显示不同的颜色我错过了什么？谢谢 <html> <head> <

我使用的是stickjs脚本，似乎无法在代码中调用“options”方法。我把它贴在下面了

我不确定是否需要首先初始化“options”（选项（{options_在这里，option_2}）

我已经尝试了两种方法，但直到当div粘到顶部时才调用另一个css类：

您可以看到我已经完成了两个选项：{topspace:0，className:“#newheader”}-#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>


粘性插件
$（窗口）。加载（函数（）{
$（“#头”）.sticky（{topSpacing:0，类名：“#newheader”}）
});
身体{
高度：10000px；
填充：0；
保证金：0；
}
#标题{
背景：#bada55；
颜色：白色；
字体系列：droidsans；
字号：18px；
线高：1.6em；
字体大小：粗体；
文本对齐：居中；
填充：10px；
文本阴影：0 1px 1px rgba（0,0,0,2）；
宽度：100%；
框大小：边框框；
}
#新标题{
背景：#FF0004；
颜色：#0056F2；
字体系列：droidsans；
字体大小：24px；
线高：1.6em；
字体大小：粗体；
文本对齐：居中；
填充：10px；
文本阴影：0 1px 1px rgba（0,0,0,2）；
宽度：100%；
框大小：边框框；
}
这是测试这是文本这是顶部的文本
这是一个非常酷的粘东西
这是测试这是文本这是底部的文本

ClassName属性将类名添加到元素中。因此它没有ID！！请尝试：

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

并更改您的css，如：

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

更新：

阅读粘性文档后，很明显…新类将添加到父元素。因此，您必须将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;
 }

这将节省您的时间！

对此表示抱歉。感谢您编辑@Zhuinden。我是说JavascriptI-see.Updated，现在我看到了我的更改，但现在它没有粘住…，但是您可以看到滚动条上的红色框，我已将其转储到JSFIDLE中