如何根据滚动位置更改标题的底部边框颜色？答案

【问题标题】：How can I change a header's bottom border color depending on the scroll location?如何根据滚动位置更改标题的底部边框颜色？
【发布时间】：2015-02-26 20:25:50
【问题描述】：

我正在开发一个 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
    }
});

});

我开始怀疑这是否是实现预期结果的好方法，但我什至无法更改底部边框，因此我可以看到它在实时环境中的外观/工作方式。任何帮助将不胜感激。

【问题讨论】：

您可以使用数据属性将颜色存储在每个部分中，当该部分滚动到视图中时，获取其数据颜色并应用于边框
感谢您的提示。知道为什么这个问题被否决了吗？我想确保我遵守规则，而且我是新手，所以任何关于我如何提出问题的反馈都将不胜感激。再次感谢！
我不确定为什么这被否决了。可能这个人觉得你没有尝试过任何东西，并从你提到的网站上得到了代码。
无赖。绝对不是这种情况，因为样机站点使用了一种完全不同（对我来说很神秘）的技术。不管怎样，感谢您的参与。

标签： javascript jquery css wordpress

【解决方案1】：

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

【讨论】：