Javascript 滚动通过元素底部时触发事件?
所以在我的网站上,我在网站的顶部有一个静态标题——它不固定在视口的顶部。然而,我想做的是,一旦用户滚动到这个div的底部,就会出现一个固定的导航栏。我的代码几乎可以工作,但只在div的顶部偏移处触发,这是页面的最顶部。这是我的密码:Javascript 滚动通过元素底部时触发事件?,javascript,jquery,html,Javascript,Jquery,Html,所以在我的网站上,我在网站的顶部有一个静态标题——它不固定在视口的顶部。然而,我想做的是,一旦用户滚动到这个div的底部,就会出现一个固定的导航栏。我的代码几乎可以工作,但只在div的顶部偏移处触发,这是页面的最顶部。这是我的密码: $("#header-2").hide(); // hide the fixed navbar initially var topofDiv = $("#header-container").offset().top; //gets offset of heade
$("#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
的底部时,我需要触发显示固定导航栏,而不是像现在这样滚动到顶部。帮助?我认为,如果将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();
}
});
目标:动态表格上的响应式(打开.调整大小)粘性标题,一旦表格超出范围(通过窗口滚动),该标题也会隐藏 解决方案:
<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"> +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"> -1</i></span></td>
<td>Christain</td>
<td>McCaffrey</td>
<td>CAR</td>
<td>RB</td>
</tr>....
<!--Dynamic table//-->
</table>
</article>
<style>
#header-fixed {
position: fixed;
top: 50px;
display: none;
}
.ppr{position:relative;}
</style>
我知道这有点晚了,但我有一个非常好的片段,在页面中间的div/article中包装了一个动态表
您可以在中看到工作示例
我也有一个固定的标题/响应网站,所以我也必须适应菜单导航栏
一旦用户超出表,我就隐藏了固定的标题
以下是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"> +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"> -1</i></span></td>
<td>Christain</td>
<td>McCaffrey</td>
<td>CAR</td>
<td>RB</td>
</tr>....
<!--Dynamic table//-->
</table>
</article>
<style>
#header-fixed {
position: fixed;
top: 50px;
display: none;
}
.ppr{position:relative;}
</style>
PPR排名
注*
名字
姓
团队
销售时点情报系统
1 +3
萨昆
巴克利
纽约市
铷
2 -1
克里斯坦
麦卡弗里
汽车
铷
....
以下是CSS:
<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"> +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"> -1</i></span></td>
<td>Christain</td>
<td>McCaffrey</td>
<td>CAR</td>
<td>RB</td>
</tr>....
<!--Dynamic table//-->
</table>
</article>
<style>
#header-fixed {
position: fixed;
top: 50px;
display: none;
}
.ppr{position:relative;}
</style>
#收割台固定{
位置:固定;
顶部:50px;
显示:无;
}
.ppr{位置:相对;}
这是文档。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();
}
});
//粘性表头
var tableOffset=jQuery(“#table-1”).offset().top;
var header=jQuery(“#表-1”).clone();
var fixedHeader=jQuery(“#header fixed”).append(header.width(header.parent().width());
jQuery(window).on(“resize”,function()){
//调整粘性表格标题的全局表格偏移量
tableOffset=jQuery(“#table-1”).offset().top;
if(fixedHeader.not(“:hidden”)){
//调整粘性表格标题大小
jQuery(“#header fixed”).width(jQuery(“#header fixed”).parent().width();
}
$(窗口).trigger(“滚动”);
});
jQuery(窗口).on(“滚动”,函数(){
var offet=$(this.scrollTop();
var height=jQuery(“#ppr”).outerHeight()+tableOffset;
//log(“窗口偏移量:+offet+”ppr+表偏移量:+height+”窗口:+jQuery(this.scrollTop());
if(offet>=tableOffset&&fixedHeader.is(“:hidden”)&&offet(高度-80)){
fixedHeader.hide();
}
});
只需将元素的高度添加到其偏移量。要获得底部,只需将#标题容器的高度添加到topfoDiv。签出并