Question

我从头开始使用javascript，并想要求您就这些代码提出一些建议。我默认使用Gantry模板开发Joomla 3.2网站。我的任务是实现以下目标。当用户访问从父项128导出的子菜单（01,02,03等）并向下滚动＆＃34; rt-header＆＃34; ＆＃34;＆＃34; rt-block菜单块＆＃34;＆＃34;应该改变背景颜色。例如，访问菜单02，向下滚动，标题菜单变为黄色。

这是我的HTML：

<div id="rt-header">
<div class="rt-block logo-block">
<div class="rt-block menu-block">
<ul class="gf-menu l1">
    <li class="item128 parent">
        <a class="item" href"services">Services<span class="border-fixer"></span>::after</a>
        <div class="dropdown columns-1">
            <div class="column col1">
                <ul class="l2">
                    <li class ="item1"><a class="item" href="submenu-01">Submenu1</a></li>
                    <li class ="item2"><a class="item" href="submenu-02">Submenu2</a></li>
                    <li class ="item3"><a class="item" href="submenu-03">Submenu3</a></li>
                    <li class ="item4"><a class="item" href="submenu-04">Submenu1</a></li>
                    <li class ="item5"><a class="item" href="submenu-05">Submenu2</a></li>
                </ul>
            </div>
        </div>
    </li>
</ul>

这是CSS :(当子项激活时，标题和菜单块继承这些颜色）

.gf-menu.l1 li.item1.active.last {background-color:#abcf39;}
.gf-menu.l1 li.item2.active.last {background-color:#f39512;}
.gf-menu.l1 li.item3.active.last {background-color:#f16e68;}
.gf-menu.l1 li.item4.active.last {background-color:#7ecde9;}
.gf-menu.l1 li.item5.active.last {background-color:#878787;}

...和jQuery函数：（header-color.js）

    function changeColor(){
var t = jQuery('.item142').offset().top - 100;


jQuery(window).scroll(function () {
    var x = jQuery(this).scrollTop(),
        item141 = jQuery('.item141'),
        item142 = jQuery('.item142'),
        item143 = jQuery('.item143'),
        item144 = jQuery('.item144'),
        item152 = jQuery('.item152');

    if (x >= item141.offset().top && x < (item141.offset().top + item141.height())) {
        jQuery('rt-header').css("background-color", "#990");
    }
    if (x >= item142.offset().top && x < (item142.offset().top + item142.height())) {
        jQuery('rt-header').css("background-color", "#ccc");
    }
    if (x >= item143.offset().top && x < (item143.offset().top + item143.height())) {

        jQuery('rt-header').css("background-color", "#949494");
    }
    if (x >= item144.offset().top && x < (item144.offset().top + item144.height())) {
        jQuery('rt-header').css("background-color", "orange");
    }
    if (x >= item152.offset().top && x < (item152.offset().top + item152.height())) {
        jQuery('rt-header').css("background-color", "purple");
    }
});
}

我将.js文档加载到＆＃34; head＆＃34;部分： <?php $gantry->addScript("header-color.js");?>但在跟踪时，我收到以下消息：

＆＃34;未捕获的TypeError：无法读取属性＆＃39; top＆＃39;未定义＆＃34;这是我的功能写错了吗？

Answer 1

在我看来，你在课程和ID中都有混淆。你的jquery查找带有ID的项目，但你的html只提供一个类，但没有ID

item1 = jQuery('#item1'); // Looking for an item with ID "item1"

然后在你的HTML中，你有

<li class ="item1">...</li>

要解决此问题，您需要在两个位置都使用ID，或者在两个位置都使用类。

Answer 2

您正在item1 = jQuery('#item1')中使用id，而在您的html中，您已经提供了类名。

在你的js文件中试试这个

    item1 = jQuery('.item1'),
    item2 = jQuery('.item2'),
    item3 = jQuery('.item3'),
    item4 = jQuery('.item4'),
    item5 = jQuery('.item5');

滚动时更改标题和菜单颜色

2 个答案: