CODEWITHSUNDEEP
javascriptjqueryhtml
Tom Maxwell
Tom Maxwell

Reputation: 9573

Trigger event when scroll past bottom of element?

So on my website I have a static header at the very top of the site -- it's not fixed to the top of the viewport. However, what I'd like to do is once the user scrolls past the bottom of this div, for a fixed navbar to appear. My code almost works, but only triggers at the top offset of the div, which is the very top of the page. Here's my code: 

$("#header-2").hide(); // hide the fixed navbar initially

var topofDiv = $("#header-container").offset().top; //gets offset of header
$(window).scroll(function(){
    if($(window).scrollTop() > topofDiv){
       $("#header-2").show();
    }
    else{
       $("#header-2").hide();
    }
});

Again, I need to trigger showing the fixed navbar once the user scrolls past the bottom of #header-container, not the top like it does now. Help?

Upvotes: 18

Views: 29817

Answers (2)

yardpenalty.com
yardpenalty.com

Reputation: 1244

Objective: A responsive (on.resize) sticky Header on a dynamic table that also hides once the table is out of range (past the window scroll).

Solution:

I know this is a bit late but I have a real nice snippet where I have a dynamic table wrapped inside a div/article on the middle of the page.

You can see the working example at yardpenalty.com/ppr-rankings

I also have a fixed header/responsive website so I have to accomodate for the menu navbar as well.

Once the user goes beyond the table, I have the fixed header hidden.

Here is the HTML:

<article id="ppr" class="ppr">
<table id="table-1" class="header-table cheat no-margin-auto xs-small table table-condensed 
 table-hover">
<tbody>
<tr>
<td><b>PPR Ranking</b><br>
<em>Note*</em>
</td>
<td><b>First Name</b></td>
<td><b>Last Name</b></td>
<td><b>Team</b></td>
<td><b>Pos</b></td>
</tr>
</tbody>
</table>
<table id="header-fixed"></table>
<table id="1" class="first cheat no-margin-auto xs-small table table-condensed table-hover"><tbody>
<tr class="rb">
<td>1<span class="abrev"><i class="fa fa-arrow-up">&nbsp;+3</i></span></td>
<td>Saquon</td>
<td>Barkley</td>
<td>NYG</td>
<td>RB</td>
</tr>
<tr class="rb">
<td>2<span class="abrev"><i class="fa fa-arrow-down">&nbsp;-1</i></span></td>
<td>Christain</td>
<td>McCaffrey</td>
<td>CAR</td>
<td>RB</td>
</tr>....
 <!--Dynamic table//-->
</table>
</article>

Here is the CSS:

<style>
#header-fixed {
  position: fixed;
  top: 50px;
  display: none;
}
.ppr{position:relative;}
</style>

Here is the document.ready js/jQuery: 

//sticky table header
 var tableOffset = jQuery("#table-1").offset().top;
    var header = jQuery("#table-1").clone();
var fixedHeader = jQuery("#header-fixed").append(header).width(header.parent().width());

jQuery(window).on("resize",function(){
//adjust the global tableOffset for sticky table header
tableOffset = jQuery("#table-1").offset().top;

if(fixedHeader.not(":hidden")){
  //adjust sticky table header size
  jQuery("#header-fixed").width( jQuery("#header-fixed").parent().width());
}
   $(window).trigger("scroll");
});
jQuery(window).on("scroll", function() {
  var offet = $(this).scrollTop();
  var height = jQuery("#ppr").outerHeight() + tableOffset;
 // console.log("window offset:" + offet + "ppr + table offset:"+height+"window:"+jQuery(this).scrollTop());

  if (offet >= tableOffset && fixedHeader.is(":hidden") && offet < height) {
    fixedHeader.show();
  } 
  //lets hide header when reach last two records
  if (offet < tableOffset || offet > (height-80)) { 
    fixedHeader.hide();
  }
});

Upvotes: 0

Leo
Leo

Reputation: 14830

I think that if you add the height of the div to the top offset you'll get the behaviour you want

$("#header-2").hide(); // hide the fixed navbar initially

var topofDiv = $("#header-container").offset().top; //gets offset of header
var height = $("#header-container").outerHeight(); //gets height of header

$(window).scroll(function(){
    if($(window).scrollTop() > (topofDiv + height)){
       $("#header-2").show();
    }
    else{
       $("#header-2").hide();
    }
});

Upvotes: 38

Related Questions