在水平网站上更改活动菜单

时间:2014-05-21 00:36:14

标签: javascript jquery html css horizontal-scrolling

我正在制作这个横向网站,我想根据实际页面更改活动菜单。

我可以在点击时更改活动菜单,但不能滚动(页面位置)。

这是我的网站:http://www.finecolor.com.br/bandainky

提前致谢

1 个答案:

答案 0 :(得分:0)

你必须使用一些JavaScript。

添加(并调整)此:

window.onscroll = function(){
    switch (window.pageYOffset%window.innerWidth) {
        case 0:
            //in this case, the first item should be active
            //so add your class .menu-active to it 
            break;
        case 1:
            //in this case, the second item should be active
            //so add your class .menu-active to it 
            break;
        [...] //add as many cases as you want
        default:
            //whatever default behavior you want
            break;
    }
}

另外,基于我对您网站代码的快速浏览,您似乎使用了类作为ID。当你知道一个元素将是唯一一个承载某个类的元素时,它应该用一个ID来代替。您的所有menuli元素都有menu-bandamenu-agenda ...作为类。相反,制作这些ID:

id="menu-agenda" class="menuli"