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

Hiding Dropdown "caret" when sticky header is present

本文关键字：下拉列表 插入 符号 插入符号 隐藏 存在      更新时间：2023-09-26

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

http://dev.yoursparksource.com

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

以及我的 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 插入符号的样式，当您向下滚动并且标题背景激活时，插入符号位于标题空间的顶部，您可以在半透明标头后面看到它。(哇！俗气...

我

想知道的是，我如何定位这个元素，因为它是一个 ：after 伪类。这是插入符号(或某些人称之为顶部三角形(的当前 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;
}

我尝试只使用相同的javascript和"#nav ul ul：After"，但是经过研究，我了解到如何不能向伪类添加样式。 呃，我知道，只是忘记了。就这样。;-)当我滚动并且摇杆标题的 bg 激活时，有什么帮助可以让那个小插入符号消失吗？对我来说将是救命稻草。(此外，如果它可以像标题一样使用不透明度过渡进行动画处理，那将会摇摆不定。一旦我弄清楚如何定位它，我就可以添加 css 动画。

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

您将

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

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");
  }
});
相关文章：