Add-remove class 到固定元素

Question

尝试添加和删除 class 到 jQuery 固定固定元素 h2.sly-scroll-title3 （标题 1） 当 #Label1在视口上。意味着仅当 #Label1 在视口上阻塞时才将 class .extraclass 添加到 h2.sly-scroll-title3 并在不在视口上时删除 class。

HTML:

<div id="Label1">

<div class="bottom-label-post1">

<h2 class="sly-scroll-title3" >Title 1</h2> <!-- Scroll Element -->

<div class="clear"></div>

<div class="list-label-widget-content">

Content 1

</div>

</div>

</div> <!-- End -->

请看这个fiddle：http://jsfiddle.net/8g20ha5y/2/

提前致谢。

Answer 1

尝试 sticky-end 事件。代码如下 -

$('h2.sly-scroll-title3').on('sticky-start', function() { $('h2.sly-scroll-title3').removeClass('extraclass'); });
$('h2.sly-scroll-title3').on('sticky-end', function() { $('h2.sly-scroll-title3').addClass('extraclass'); });

根据文档，下面给出了其他事件-

$('#sticker').on('sticky-start', function() { console.log("Started"); });
$('#sticker').on('sticky-end', function() { console.log("Ended"); });
$('#sticker').on('sticky-update', function() { console.log("Update"); });
$('#sticker').on('sticky-bottom-reached', function() { console.log("Bottom reached"); });
$('#sticker').on('sticky-bottom-unreached', function() { console.log("Bottom unreached"); });