jQuery：在页面滚动中隐藏/显示Divs [英] jQuery: Hide/Show Divs on page scroll

问题描述

jsfiddle： http://jsfiddle.net/MFUw3/5/

jQuery：

  function showDiv（）{
 if（$（window ）.scrollTop（）> 610）{
 $（.a）.css（{position：fixed，top：10px}）; 
} else {
 $（。a）。css（{position：relative，top：0px}）; 
} 
} 
 $（window）.scroll（showDiv）; 
 showDiv（）; 
  

HTML：

 < DIV> 
< div class =a> 
 A 
< / div> 
< div class =b> 
 B 
< / div> 
< / div> 
  

我想在用户滚过 divB divA会淡入，并将其自身固定到浏览器的顶部。

当您向上滚动 divB时，我希望 divA淡出并重新定位到原来的位置。 / p>

我的代码目前只是这样做，除了它不会变淡。

我试过在周围乱搞 .is（：visible）， .is（：hidden）， .hide（）; 以便我可以使用 fadeIn（）; 和 fadeOut（）; ，但无论我尝试什么，我都弄不明白，而且我知道这首先是无效的。有可能通过某种方式来检测它是否通过了div而不是通过了某个坐标吗？

：

  function showDiv（）{
 if（$（window）.scrollTop（）> 610&& amp ; $（'。a'）。data（'located'）=='false'）{
 $（。a）。hide（）。css（{position：fixed， top：10px}）。fadeIn（）。data（'positioned'，'true'）; 
} else if（$（window）.scrollTop（）< = 610&& $（'.a'）。data（'located'）=='true'）{
 $ （.a）。fadeOut（function（）{
 $（this）.css（{position：relative，top：0px}）。show（）; $ b $数据（'定位'，'假'）; 
} 
} 
 $（window）.scroll（showDiv）; 
 $（'。a'）。data（'定位'，'假'）; 
  

以及工作示例的链接： http://jsfiddle.net/MFUw3/10/

编辑：我添加了代码改进建议由Sparky672和（最初省略）淡出。

jsfiddle: http://jsfiddle.net/MFUw3/5/

jQuery:

function showDiv() {
    if ($(window).scrollTop() > 610) {
        $(".a").css({"position": "fixed", "top": "10px"});
    } else {
        $(".a").css({"position": "relative", "top": "0px"});
    }
}
$(window).scroll(showDiv);
showDiv();

HTML:

<div>
    <div class="a">
        A
    </div>
    <div class="b">
        B
    </div>
</div>

I want to make it so when the user has scrolled past div "B" (A and B are out of sight), then div "A" will fade in and fix itself to the top of the browser.

When you scroll up and div "B" is back in sight, I want div "A" to fade out and reposition itself back to where it was originally.

My code currently does just this, EXCEPT it doesn't do fading.

I've tried messing around with .is(":visible"), .is(":hidden"), .hide(); so that I can use fadeIn(); and fadeOut();, but no matter what I try, I can't figure it out, and I know this isn't efficient in the first place. There's probably some way to detect if it's passed a div instead of passed a certain coordinate?

解决方案

Here's something that should suit your needs:

function showDiv() {
    if ($(window).scrollTop() > 610 && $('.a').data('positioned') == 'false') {
        $(".a").hide().css({"position": "fixed", "top": "10px"}).fadeIn().data('positioned', 'true');
    } else if ($(window).scrollTop() <= 610 && $('.a').data('positioned') == 'true') {
        $(".a").fadeOut(function() {
            $(this).css({"position": "relative", "top": "0px"}).show();
        }).data('positioned', 'false');
    }
}
$(window).scroll(showDiv);
$('.a').data('positioned', 'false');

And the link to the working example: http://jsfiddle.net/MFUw3/10/

Edit: I have added the code improvements suggested by Sparky672 and the (initially omitted) fadeout.

这篇关于jQuery：在页面滚动中隐藏/显示Divs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！