题

我对聚合物中的自定义元素有一个问题。

我有acustom元素，它有一个嵌套在它的模板内部的样式，对于模板内的div，如此：

  <template>
    <style>    
       #navWrapper{
          height: auto;;
          color:red;
          position:fixed;
          background-color:black;
          width: 100%;
       }
    </style>
  <div id="navWrapper"><content></content></div>
</template>
.

现在，当我向下滚动页面时，我想更改NavWrapper的颜色。 我想用jquery来。 因此，我在自定义元素中有一个脚本，如此：

<script>
Polymer('responsive-nav',{ready: function() {
$(window).scroll (function () {
        var sT = $(this).scrollTop();
            if (sT >= 100) {    
                $(this.$.navWrapper).css({backgroundColor : 'rgba(0,0,0,0.0)' })
            }else {
                ...
            }
    })

     } });
</script>
.

现在可悲的是什么都不做。我在$（这个。$。invwrapper）之前给了一个警报（测试），了解我是否达到那个点。此外，当我想从其正常的HTML文件中居住的元素中更改背景颜色或其他内容时，它也是如此。例如$（“＃testdiv”）。CSS（{...}）更改。所以我的问题是：我如何正确访问我的元素的CSS？

有帮助吗？

解决方案

看起来你的jQuery CSS呼叫是错误的。

我认为应该是：

.css("background-color", "rgba(0,0,0,0.0)")
.

而不是

.css({backgroundColor : 'rgba(0,0,0,0.0)' })
.

交叉引用你用jQuery文档完成的内容，你肯定错过了' - 'out'backgroundColor'，还没有看到使用JSON对象的文档中的任何东西都在制作改变。

但是，您可以使用一系列属性名称和值（这就是我怀疑您可能一直在尝试执行）

更新（大约1小时）

因为今天的IVE在今天没有过于异常的问题（但涉及引导而不是jQuery）我已经在研究类似概念周围的事情。

因此，我拍摄了OP的原始代码并开始使用它。

我所示的是部分jQuery解决方案（我们仍然使用JQ的滚动检测）在其中我也想出了使用聚合物条件绑定语法改变样式的替代方式。

http://www.polymer-project.org/docs/polymer/表达式.html

本质上我所做的是在设置时间将用户数据对象传递到滚动事件中。

此用户对象包含反映当前聚合物对象的属性（这是必需的，使其在射击时JQ处理程序可以更新聚合物性质）

当窗口滚动事件发生时，处理程序提取此属性，然后使用它在聚合物元素内的局部变量中获取，从而使用当前滚动顶部值更新。

因为本地范围属性是实际聚合物对象的一部分，任何聚合物数据绑定都可以阅读它，此时只需创建几种样式的问题，然后使用表达式绑定来挑选正确的样式。

记住，款式级联，所以你可以轻松地为整个东西制作一个主流，然后是2个样式，只需改变背景颜色。

表达式绑定工作通过使用左侧的文本：仅当右侧的表达式评估为true，例如：

{{ {frogs: a == 1} }}
.

将替换与''如果属性'a'的表达式绑定不等于1，并将其设置为'frogs'如果属性'a'等于1.

然而，表达绑定在自然界中是奇异的，因此为了具有超过1个表达绑定，您需要通过聚合物过滤器之一，特别是 'tokenlist' < / strong>过滤器。

一旦执行此操作，您可以构建不同的检查的整个对象，因此在前面的示例中扩展：

{{ {frogs: a == 1, tadpoles: a == 2} | tokenList }}
.

现在将使结果等于''如果属性'a'不等于1且不等于2，同时将结果设置为'frogs'如果属性'a'等于1，并且如果属性'a'等于2，则将结果设置为'。等于2. < / p>

您可以根据需要将其扩展到尽可能多的检查，但您在中添加（我猜测无论如何 - IV'e未测试）所越多）可能是较慢的性能。

现在，下面的代码将完成您需要的内容，一旦您进行了一些更改，使其目标是您自己的元素并设置您自己的样式： - ）

<link rel="import" href="polymer.html">

<polymer-element name="x-mypolymercomponent">
  <template>
    <style>
      .under100
      {
        background-color: green;
      }

      .over100
      {
        background-color: red;
      }

    </style>


    <h1 class="{{ {under100: scroll_top <= 100, over100: scroll_top > 100} | tokenList }}">This header has a dynamic class</h1>


  </template>

  <script>
    Polymer('x-mypolymercomponent', {

      ready: function ()
      {
        $(window).scroll({scope: this}, function(event) {
          var sT = $(this).scrollTop();
          event.data.scope.scroll_top = sT;
        })
      },

      scroll_top: 0,

    });
  </script>
</polymer-element>
.

IV'e刚刚在.NET项目中测试了它我当前正在处理的，它在Chrome 36中工作正常，Firefox仍然存在问题，但我认为这可能是由于我最后发现的错误是可能的晚上所以我不会太担心它。

我也有jquery加载在页面级别，因此似乎组件可以从中拾取页面事件。

给它一个尝试看看你从这里去哪里，我即将为我的特定问题调整它，然后将其转换为一个打字模块： - ）

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top