Question

所以现在我正在构建我们的新网站，并且我使用javascript编写了一个漂亮的小粘性标题。这是我的Javascript。

http://dev.yoursparksource.com

<script>
jQuery(window).scroll(function() {
if ($(this).scrollTop() > 1){  
    $('.stickyheader1').addClass("sticky");
}
else{
    $('.stickyheader1').removeClass("sticky");
}
});
</script>

我的用于stickyheader的CSS和.sticky添加了类

.stickyheader1 {
position: fixed;
width: 100%;
-webkit-transition: background .3s ease-in-out;
-moz-transition: background .3s ease-in-out;
-ms-transition: background .3s ease-in-out;
-o-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
height: 85px;
}

.stickyheader1.sticky {
background: rgba(0,0,0,0.80);
-webkit-transition: background .4s ease-in-out;
-moz-transition: background .4s ease-in-out;
-ms-transition: background .4s ease-in-out;
-o-transition: background .4s ease-in-out;
transition: background .4s ease-in-out;
}

这完美无缺。我的问题是下拉菜单。我设计了一个小的CSS插入符号，当你向下滚动并且标题背景激活时，插入符号位于标题空间的顶部，你可以在半透明标题后面看到它。（EWW！Tacky ......）

我想知道的是，我如何定位这个元素，因为它是一个：伪类之后..这是插入符号的当前CSS（或者有人称之为顶部三角形。）

#nav ul ul:After {
content: '';
position: absolute;
border-style: solid;
border-width: 0 10px 10px;
border-color: rgba(0,0,0,0.40) transparent;
display: block;
width: 0;
z-index: 1;
top: -10px;
left: 20px;
}

我尝试使用与“#nav ul ul：After”相同的javascript，但经过研究，我学会了如何不能为伪类添加样式。呃，我知道，只是忘了。就这样。 ;-)当我滚动并且棒头的bg激活时，任何帮助让小插入消失？对我来说是一个救星。（另外，如果它可以像标题一样使用不透明度过渡进行动画处理，那就会摇滚。一旦我弄清楚如何定位它，我就可以添加css动画。

提前感谢百万！我喜欢StackOverflow。

Answer 1

在#nav ul ul:After类添加到{{display后，您需要使用JavaScript循环遍历样式表，找到none的规则并将其sticky属性设置为.stickyheader1 1}}。

jQuery(window).scroll(function() {
  if ($(this).scrollTop() > 1) {
    $('.stickyheader1').addClass("sticky");
    var ss = document.styleSheets;
    for (i = 0; i < ss.length; i++) {
      var rules = ss[i];
      for (j = 0; j < rules.cssRules.length; j++) {
        var r = rules.cssRules[j];
        if (r.selectorText == "#nav ul ul:After" || r.selectorText == "#nav ul ul::After") {
          r.style.display = 'none';
        }
      }
    }
  } else {
    $('.stickyheader1').removeClass("sticky");
  }
});

当存在粘性标题时隐藏下拉“插入符号”

1 个答案: