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

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

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可以设置为元素的高度（如图所示，例如主导航/横幅区域），或者可以设置为“{fold”的(window).height();，或者它可以是静态px值。

然后当滚动值大于topHeight时，将添加一个show类。使用display:block;

进行CSS

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