滚动经过某个点后如何显示浮动菜单？

Question

滚动浏览页面上的某个点(例如:1000px)后,我想显示四个菜单选项卡.我希望它们出现时从左向右滑动.这就是我想要的,但在浏览器的左侧.任何输入都表示赞赏.

Answer 1

首先,您将要开始跟踪页面的滚动.其次,你需要在需要时从左到右制作分界线.为此,您需要使用该scroll功能,还需要使用其他一些功能来制作动画部分.

这里是你想要的基础,没有滚动.

function slider() {
    if (document.body.scrollTop > 100) //Show the slider after scrolling down 100px
        $('#slider').stop().animate({"margin-left": '0'});
    else
        $('#slider').stop().animate({"margin-left": '-200'}); //200 matches the width of the slider
}

现在,您将要在用户滚动时触发此功能,使用:

$(window).scroll(function () {
    slider();
});

最后,您还需要在用户第一次到达时调用该函数,使用户在页面的一半开始,使用:

$(document).ready(function () {
    slider();
});

有几点需要注意:

我已经将滑块宽度硬编码为200px,起点为100px.该stop()函数非常重要,可以阻止动态函数被冗余调用.

这是一个有匹配CSS 的工作jsfiddle