当页面在jquery中向下滚动时隐藏内容 [英] Hide contents when page is scrolling down in jquery

问题描述

这是HTML和CSS，看起来像这样：

 < div class =footer-fix> 
< p>这是它的内容......< / p> 
< / div> 
 
 .footer-fix {
 background：rgba（255,255,255，0.6）; 
 display：block; 
位置：固定; 
 bottom：0; 
 z-index：999; 
宽度：100％; 
 padding：12px; 
 border-top：1px solid #fff; 
 box-shadow：0px 0px 10px rgba（0,0,0，.3）; 
} 
  

我的问题是现在我需要在页面向下滚动时隐藏这个固定条到底部或靠近页面底部。

这是我在jquery中试过的：

<$ p $（$。$）$（$）$（$）$（$）$（$）$（$） ）{
if（$（window）.scrollTop（）+ $（window）.height（）> $（document）.height（）-100）& footer.is（'：visible' ））{
footer.stop（）。fadeOut（300）;
}
else if（$（window）.scrollTop（）< $（document）.height（） - 100 && footer.is（'：hidden'））{
footer.stop（）。fadeIn（300）;
}
}）;
}）;

但这不适合我。有人可以告诉这是什么问题吗？

希望有人能帮助我。

解决方案

缺少（， ）（$（window）.scrollTop（）+ $（window）.height（）> $（document）.height（） - 100） at if conditions



$（document）.ready（function（） {var footer = $（'。footer-fix'）; $（window）.scroll（function（）{if（（$（window）.scrollTop（）+ $（window）.height（）> $ ）.height（） - 100）&& footer.is（'：visible'））{footer.stop（）。fadeOut（300）;} else if（（$（window）.scrollTop（）< $ （document）.height（） - 100）&& footer.is（'：hidden'））{footer.stop（）。fadeIn（300）;}}）;}）;

body {height：520px;}。footer-fix {background：rgba（255，255 ，255，0.6）;显示：块;位置：固定;底部：0; z-index：999;宽度：100％;填充：12px; border-top：1px solid #fff; box-shadow：0px 0px 10px rgba（0，0，0，.3）;}

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script>< div类=页脚修复> < p>这是它的内容......< / p>< / div>  

I have a contents DIV which is positioned to fixed at bottom of the page.

It's HTML and CSS looks like this:

<div class="footer-fix">
    <p>This is its contents......</p>
</div>

.footer-fix {
    background: rgba(255,255,255, 0.6);
    display: block;
    position: fixed;
    bottom: 0;
    z-index: 999;
    width: 100%;
    padding: 12px;
    border-top: 1px solid #fff;
    box-shadow: 0px 0px 10px rgba(0,0,0,.3);
}

My question is now I need to hide this fixed bar when page is scrolling down to the bottom or near the bottom of the page.

This is how I tried it in jquery:

$(document).ready(function() {
    var footer = $('.footer-fix');
    $(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() > $(document).height() - 100) && footer.is(':visible')){
            footer.stop().fadeOut(300);
        }
        else if($(window).scrollTop() < $(document).height() - 100 && footer.is(':hidden')){
            footer.stop().fadeIn(300);
        }
    });
});

But this is not working for me. Can anybody tell what is the wrong with this.

Hope somebody may help me out. Thank you.

解决方案

Missing ( , ) around ($(window).scrollTop() + $(window).height() > $(document).height() - 100) at if conditions

$(document).ready(function() {
  var footer = $('.footer-fix');
  $(window).scroll(function() {
    if (($(window).scrollTop() + $(window).height() > $(document).height() - 100) 
        && footer.is(':visible')) {
      footer.stop().fadeOut(300);
    } else if (($(window).scrollTop() < $(document).height() - 100) 
               && footer.is(':hidden')) {
      footer.stop().fadeIn(300);
    }
  });
});

body {
  height: 520px;
}
.footer-fix {
  background: rgba(255, 255, 255, 0.6);
  display: block;
  position: fixed;
  bottom: 0;
  z-index: 999;
  width: 100%;
  padding: 12px;
  border-top: 1px solid #fff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="footer-fix">
  <p>This is its contents......</p>
</div>

这篇关于当页面在jquery中向下滚动时隐藏内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！