如何在滚动某个点后出现浮动菜单？ [英] How to make a floating menu appear after you scroll past a certain point?

问题描述

我想在滚动页面上某个点（例如：1000px）之后出现四个菜单选项卡。我希望他们在出现时从左向右滑动。这是我要做的，但在浏览器的左侧。任何输入赞赏。

解决方案

首先，您要开始追踪页面的滚动。其次，您需要在需要时从左到右对分割进行动画处理。为此，您需要使用滚动函数以及其他一些动画部分。

 函数slider（）{
 if（document。 body.scrollTop> 100）//向下滚动显示滑块100px 
 $（'＃slider'）。stop（）。animate（{margin-left：'0'}）; 
 else 
 $（'＃slider'）。stop（）。animate（{margin-left：'-200'}）; // 200匹配滑块的宽度
} 
  

现在你想要触发这个函数在用户滚动时使用：

  $（window）.scroll（function（）{
 slider（ ）; 
}）; 
  

最后，您还需要在用户第一次到达时调用该函数，让用户使用以下代码开始：

  $（document）.ready（function（）{
 slider（ ）; 
}）; 
  

注意：

我将滑块宽度硬编码为200px，起始点为100px。
stop（）函数非常重要，可以避免冗余调用动画函数。

以下是匹配的CSS jsfiddle

I want to make four menu tabs appear after you scroll past a certain point (ex: 1000px) on the page. I want them to slide in from left to right when they appear. This is what I'm going for, but on the left side of the browser. Any input is appreciated.

解决方案

First you're going to want to start by tracking the scrolling of the page. Second you're going to want to animate the divide from left to right when needed. To do this, you'll need to use the scroll function, and a few others for the animating part.

Here's a base to what you want, without the 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
}

Now you'll want to fire this function while the user scrolls, using:

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

And finally, you'll also want to call the function when the user first arrives, incase the user starts half way down the page, using:

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

A few things to note:

I've hard coded the sliders width to 200px, and the start point to 100px. The stop() function is very important and stops the animate function from being called redundantly.

Here's a working jsfiddle with the matching CSS

这篇关于如何在滚动某个点后出现浮动菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！