Question

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

我所拥有的是顶部的英雄横幅，宽度和高度均为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");
    }

});

}）;

Answer 1

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

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

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

滚动菜单上显示画布菜单

1 个答案: