Событие триггера при прокрутке вниз элемента?

Итак, на моем сайте у меня есть статический заголовок на самой вершине сайта - он не фиксируется в верхней части окна просмотра. Однако то, что я хотел бы сделать, - это когда пользователь прокручивает нижнюю часть этого div, чтобы появился фиксированный навигатор. Мой код почти работает, но только триггеры на верхнем смещении div, который является самой верхней частью страницы. Здесь мой код:

$("#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();
    }
});

Опять же, мне нужно вызвать показ фиксированной навигационной панели, как только пользователь прокрутится мимо нижней части #header-container, а не сверху, как сейчас. Помощь?

Ответ 1

Я думаю, что если вы добавите высоту div в верхнее смещение, вы получите нужное поведение

$("#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();
    }
});

Ответ 2

Цель: Адаптивный (on.resize) липкий заголовок на динамической таблице, который также скрывается, когда таблица выходит за пределы диапазона (после прокрутки окна).

Решение:

Я знаю, что это немного поздно, но у меня есть действительно хороший фрагмент, где у меня есть динамическая таблица, завернутая в div/article в середине страницы.

Вы можете увидеть рабочий пример на yardpenalty.com/ppr-rankings

У меня также есть фиксированный заголовок/адаптивный веб-сайт, поэтому я должен также разместить в меню панель навигации.

Когда пользователь выходит за пределы таблицы, у меня скрытый фиксированный заголовок.

Вот 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>

Вот CSS:

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

Вот это 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();
  }
});