jQuery 滚动经过某个点后如何使浮动菜单出现？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16390885/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a floating menu appear after you scroll past a certain point?
提问by JonnyBravo
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.
我想在您滚动经过页面上的某个点（例如：1000px）后显示四个菜单选项卡。我希望它们出现时从左向右滑入。这就是我想要的，但在浏览器的左侧。任何输入表示赞赏。
回答by Graham Walters
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 scrollfunction, and a few others for the animating part.
首先，您要从跟踪页面的滚动开始。其次，您需要在需要时为从左到右的分界线设置动画。为此，您需要使用该scroll函数以及其他一些用于动画部分的函数。
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.
我已将滑块宽度硬编码为 200 像素，起点为 100 像素。该stop()函数非常重要，可以防止动画函数被重复调用。
Here's a working jsfiddlewith the matching CSS
这是一个带有匹配 CSS的工作jsfiddle
回答by ArleyM
This is a pretty general starting point:
这是一个非常普遍的起点：
$(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");
}
});
});
Assume the menu is called .floating-menu, and it has a default display:none;.
假设菜单被调用.floating-menu，并且它有一个默认值display:none;。
The variable topHeight can be set to be an element's height (as shown, for example the main navigation / banner area), or it could be (window).height();for "the fold", or it could be a static px value.
变量 topHeight 可以设置为元素的高度（如图所示，例如主导航/横幅区域），或者它可以(window).height();用于“折叠”，或者它可以是静态 px 值。
Then when the scroll value is greater than the topHeight, a class of show will be added. CSS it up with display:block;
那么当scroll值大于topHeight时，会增加一个show类。CSS 与display:block;
回答by Starx
You have to monitor the scroll position of the window as the user scrolls through the page.
当用户滚动页面时，您必须监视窗口的滚动位置。
Here is a basic explanation:
这是一个基本的解释：
$(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
}
});
