Response title
This is preview!
Fixed div to fade in and out when footer appears
in Using jQuery
•
9 years ago
I have a query where i have a fixed div with contact details that i would like to be on show until the footer is in view then it will fadeout. When the footer is out of view when the user scrolls up, the fixed div then fadesIn. I have had a look at some examples and using my own div tags and styling and nothing happens. An example i have used is:
- $('#footer').appear();
- $('#footer').on('appear', function(){
- $('#fixed_div').fadeOut();
- });
- $('#footer').on('disappear', function(){
- $('#fixed_div').fadeIn();
- });
- HTML-BASIC
- <div id="footer">
- <div class="footer-wrapper">
- Footer details here
- </div>
- </div>
- <div id="fixed_div">
- <ul>
- <li><h1>details here</h1></li>
- <li><h1>details here</h2></li>
- </ul>
- </div>
I have also used an example from stackoverflow which works but not in firefox and fades in and out at a random point in my site (seems to be the last blog of my site -wordpress):
- var secondval = $('#footer').offset().top;
- $(window).scroll(function(){
- var firstval = $(document).scrollTop();
- if(firstval >= secondval)
- {
- $('#fixed_div').fadeOut();
- }else{
- $('#fixed_div').fadeIn();
- });
Anyone have any suggestions to where the problem may be on either of these examples? Thanks in advance!
1