2

I have this problem which is probable very simple to solve, but I'm a newbie with JS/JQuery. I have this code (see fiddle here: https://jsfiddle.net/Tiph/6ep3hp4j/) where my div footer shows when the scroll gets at the bottom of the document, but I want it to show when the scroll gets at a certain height under my header and have a fixed position at the bottom of my window. I understand that I have to calculate something with window.height, and/of offsetTop, but nothing works. Someone can help me with it? Thank you so much! :-)

my code here: 

var footer = $('#footer'),
    extra = 10; 

footer.css({ opacity: '0', display: 'block' });

$(window).scroll(function() {

   var scrolledLength = ( $(window).height() + extra ) + $(window).scrollTop(),
       documentHeight = $(document).height();


    console.log( 'Scroll length: ' + scrolledLength + ' Document height: ' + documentHeight )


   if( scrolledLength >= documentHeight ) {

       footer
          .addClass('bottom')
          .stop().animate({ bottom: '0', opacity: '1' }, 300);

   }
   else if ( scrolledLength <= documentHeight && footer.hasClass('bottom') ) {           
        footer
           .removeClass('bottom')
           .stop().animate({ bottom: '-100', opacity: '0' }, 300);

   } 
});
Improve this question
1
  • the problem is that its hiding your content in the bottom?
    – Zamboney
    Commented Mar 14, 2016 at 8:03

4 Answers 4

Reset to default
1

I create new sample code for you to understand how its work

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
        $(window).scroll(function() {
        var count=700;
          var menuHeight = $('#footer').height()+count; 
          var top = $(this).scrollTop();
          var bottom = $(document).height() - $(this).height() - $(this).scrollTop(); 
        if (bottom < menuHeight) {

              $('#footer').removeClass( 'top' );
              $('#footer').addClass( 'bottom' );
              $('#footer').fadeIn( 'slow' );
          }
          else {
              $('#footer').fadeOut( 'slow' );
          } 
        });
});
</script>  
<meta charset="utf-8">  

</head>  
<body>  
<style>
#footer{
  width: 100%;
  height: 60px;
  background-color: #cccccc;
  vertical-align: middle;
  text-align: center;
  font-size:3em;
}

.bottom{
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  display:block;
}
</style>
<div style="height:2000px;"></div>
<div id="footer" style="display:none" > This is your footer</div>
<div style="height:700px"></div>

Try to change the number 700 to set where you want to footer to be shown

Improve this answer
0
0

Say you want the header to show when you have scrolled 100px from the top.

You can do something like:

$(window).on("scroll", function() {
  if(document.body.scrollTop >= 100) {
    $("#footer").fadeIn()
  } else {
    $("#footer").fadeOut()
  }
});

Say, you want to only show the header if a button with id, callToAction is above the viewport, you can do:

$(window).on("scroll", function() {
  if(document.getElementById('callToAction').getBoundingClientRect().top <= 0) {
    $("#footer").fadeIn()
  } else {
    $("#footer").fadeOut()
  }
});
Improve this answer
2
  • Thank you for the swift answer. But I think I din't explain well (my bad). I'm working on a homepage with a call to action button. My client wants that when the user scroll and the button is not visible anymore, then a sort of sticky footer shows at the bottom of the window, so the CTA buttons would always be visible.
    – TiphG
    Commented Mar 14, 2016 at 8:09
  • Just change the fixed height with the button offset. You can add the height to make sure its not visible at all
    – Aleksandar Trajkov
    Commented Mar 14, 2016 at 8:12
0

This code var y = $(this).scrollTop(); get your scroll height from top.

 $(window).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) { // scroll gets at a certain height 
    $('.bottomDiv').fadeIn();
  } else {
    $('.bottomDiv').fadeOut();
  }
});
Improve this answer
0

If I correctly understand your question you need to change documentHeight with value what you want.

Example: documentHeight = 150; not documentHeight = $(document).height();

It is good idea to rename documentHeight variable.

Improve this answer
1
  • I think it would be perfect but then, the value would be only good for a certain screen resolution and not for mobile devices ?
    – TiphG
    Commented Mar 14, 2016 at 8:29

Not the answer you're looking for? Browse other questions tagged or ask your own question.