Question

我正在开发一个WordPress网站，我想知道为什么我的jQuery代码无效。我的目标是使主标题的底部边框相对于文档的滚动位置发生更改，特别是当某些锚标记在视图中时。

这是网站：

这是现场模型，其中包含我试图模仿的底部边框颜色变化：

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
    }
});

}）;

我开始怀疑这是否是实现理想结果的好方法，但我甚至无法改变底部边界，因此我可以看到它在现场环境中的外观/效果。任何帮助将不胜感激。

Answer 1

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

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

1 个答案: