jQuery 滚动位置时显示 Div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9097501/
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
Show Div when scroll position
提问by idbranding
First of all i would like to refer to this website: http://annasafroncik.it/I love the way the animations come into view. Is it hard to create a similar function in jquery? Are there any plugins to create such an effect?
首先，我想参考这个网站：http: //annasafroncik.it/我喜欢动画出现的方式。在 jquery 中创建类似的函数很难吗？有没有插件可以创建这样的效果？
Hope someone will help me out.
希望有人能帮助我。
回答by Timothy Aaron
Basically, you want to add a "hideme" class to every element you want hidden (then you set that class to "opacity:0";
基本上，您想为要隐藏的每个元素添加一个“hideme”类（然后将该类设置为“opacity:0”；
Then, using jQuery you set a $(window).scroll() event to check the location of the bottom of every "hideme" element against the bottom edge of your visible window.
然后，使用 jQuery 设置一个 $(window).scroll() 事件来检查每个“hideme”元素底部相对于可见窗口底部边缘的位置。
Here's the meat of it ...
这是它的肉...
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.hideme').each( function(i){
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it in */
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},500);
}
});
});
Here's a full jsfiddle: http://jsfiddle.net/tcloninger/e5qaD/
这是一个完整的 jsfiddle：http: //jsfiddle.net/tcloninger/e5qaD/
回答by Chris Kempen
Plugins? Maybe, but you could definitely build any animation combinations you could imagine with jQuery by yourself. If you have a firm grasp on selectors and CSS, the sky's the limit! I'd suggest starting on the jQuery websiteand checking out some examples.
插件？也许吧，但您绝对可以自己用 jQuery 构建您可以想象的任何动画组合。如果您牢牢掌握了选择器和 CSS，则无所不能！我建议从jQuery 网站开始并查看一些示例。
To help get the ball rolling, and maybe give you some ideas if you're already familiar with jQuery, you could try the following...figure out how far down the page your divis, listen for scroll events, and when the divcomes into focus (i.e.: the page has been scrolled past the div's position you worked out), run an animation. Something like:
为了帮助让球滚动，也许给你一些想法，如果你已经很熟悉的jQuery，你可以尝试以下...找出你多远下来的页面div就是监听滚动事件，而当div进入焦点（即：页面已滚动到div您确定的位置），运行动画。就像是：
<div id="my_div">Some content</div>
<script type="text/javascript">
$(document).ready(function() {
var my_div = $("#my_div");
var div_top = my_div.offset().top;
$(document).scroll(function() {
if (div_top <= $(document).scrollTop()) {
// do some cool animations...
}
});
});
</script>
I hope I haven't messed up my syntax!
我希望我没有搞砸我的语法！
回答by Shuhad zaman
Try this . It worked for me
尝试这个 。它对我有用
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 400) {
$("body").addClass("allowshow");
} else {
$("body").removeClass("allowshow");
}
});
and the css for this is
和这个的CSS是
.showmydiv{display:block}
