如何更改页眉'的底部边框颜色取决于滚动位置

How can I change a header's bottom border color depending on the scroll location?

本文关键字：边框 底部 颜色 取决于 位置 滚动 何更改      更新时间：2024-06-09

我正在开发一个WordPress网站，想知道为什么我的jQuery代码不起作用。我的目标是使主标题的下边框相对于文档的滚动位置发生变化，特别是当某些锚标记在视图中时。

这是网站：

http://dev.celebrate-life.info

这是我试图模仿的底部边框颜色变化的实时模型：

http://clfmockup3.businesscatalyst.com/index.html

这是默认的CSS：

.x-navbar,
.x-navbar-fixed-top {
  border-bottom: 3px solid #f0b33e;
}

下面是我用来修改上面的CSS:的jQuery

$(document).ready(function() {
function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}
var myelement = $('#joinus'); // the element to act on if viewable
$(window).scroll(function() {
    if(isScrolledIntoView(myelement)) {
      $(".x-navbar, .x-navbar-fixed-top").css({
        'border-bottom': '3px solid #f0b33e',
      }); // change color of header bottom border
    } else {
        // do something when element is not viewable
    }
});

})；

我开始怀疑这是否是实现预期结果的好方法，但我甚至无法改变底部边界，这样我就可以看到它在生活环境中的外观/工作方式。如有任何帮助，我们将不胜感激。

请看一下这里，这是一个很好的例子https://css-tricks.com/scroll-fix-content/

相关文章：