本文介绍了当页面在jquery中向下滚动时隐藏内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是HTML和CSS，看起来像这样：
缺少（， ）（$（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中向下滚动时隐藏内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！