滚动菜单上显示画布菜单

时间:2014-05-12 13:39:11

标签: scrolltop

我尝试过很多我在网上看过的不同的东西(教程和视频),但我似乎无法让它发挥作用。

我所拥有的是顶部的英雄横幅,宽度和高度均为100%。使用-webkit-transform:translate(0,-100%)隐藏了菜单;一旦用户向下滚动到英雄横幅的底部,菜单就会出现,使用-webkit-transform:translate(0,0);在addClass中。我已经习惯了它的动画。但是,我的javascript无效。

Here is a jsfiddle

$(document).ready(function(){

var nav = $(".slide-nav-container");
var banner = $(".hero");

$(window).scroll(function() {

    var windowpos = $(window).scrollTop();

    if (windowpos >= banner.outerHeight()) {
        nav.addClass("slide-menu");
    } else {
        nav.removeClass("slide-menu");
    }

});

});

1 个答案:

答案 0 :(得分:0)

您只是检查横幅的高度,您还需要将其添加到该位置。

windowpos >= banner.outerHeight()+banner.offset().top

banner.offset().top会返回您网站上横幅的位置,并将其高度添加到横幅的底部。