jquery - 滚动到某个点后如何显示浮动菜单？

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

有几点需要注意：

我将滑块宽度硬编码为 200 像素，起点为 100 像素。该stop()函数非常重要，它可以阻止 animate 函数被冗余调用。

这是一个带有匹配 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 可以设置为元素的高度（如图所示，例如主导航/横幅区域），也可以(window).height();用于“折叠”，也可以是静态 px 值。

那么当滚动值大于topHeight的时候，就会增加一个show类。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
    } 
});