如何使一个浮动菜单出现在你滚过一定的阶段后？ [重复](How to make a floati

这个问题已经在这里有一个答案：

• 让过去滚动页面的某个点时，一个div出现 3个回答

我想要让你滚过一定的阶段后（例如：1000像素）四个菜单选项卡显示在页面上。 我希望他们出现时，他们从左边滑动到右侧。 这就是我要的，但在浏览器的左侧。 任何输入被理解。

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();
});

有几件事情需要注意 ：

我硬编码的滑块宽度200像素，并且起点为100px。 将stop()函数是非常重要的，被称为冗余停止动画功能。

这里有一个工作的jsfiddle与匹配CSS

Answer 2:

这是一个相当普遍的起点：

$(function() {
    $(window).scroll(function() {  
        var topHeight = $('#element').height(); 
            var scroll = $(window).scrollTop();  

            if (scroll >= topHeight) {
                $(".floating-menu").addClass("show");
            }
            if (scroll < topHeight) {
                $(".floating-menu").removeClass("show");
            }

    });
});

假设菜单被称为.floating-menu ，它有一个默认display:none; 。

可变topHeight可以被设置为元素的高度（如图所示，例如在主导航/横幅区域），或者它可以是(window).height(); 对于“折”，也可能是一个静态像素值。

然后，当滚动值大于topHeight时，一类节目的将被添加。 CSS它与display:block;

Answer 3:

你必须监视窗口，通过该页面用户滚动的滚动位置。

下面是一个基本的解释：

$(window).scroll(function() {
    //This gives the scroll position
    var scrollTop = $(window).scrollTop();
    if(scrollTop >= 1000) {
         //If user has scrolled about 1000 px below then

         // .... Your code to bring the links from left to right
    } 
});

文章来源: How to make a floating menu appear after you scroll past a certain point? [duplicate]