Question

我想使用jQuery waypoint函数切换函数，如何组合这些代码来实现？（我也会对替代解决方案感到满意。）

我想结合这个......

$('#pageborder').waypoint(function(direction) {
  //do something here
}, { offset: 'bottom-in-view' });

有了这个......

.toggle(function(){
  $('.play', this).removeClass('pausing');
  $('.play', this).addClass('playing');
}, function(){
  $('.play', this).addClass('pausing');
  $('.play', this).removeClass('playing');
});

最终结果应该是在到达航路点时切换的功能。

有关JQuery Waypoint插件的更多信息：http://imakewebthings.com/jquery-waypoints/#doc-waypoint

Answer 1

以下是使用waypoint插件在到达航点时执行某些操作的示例。在我的示例中，我根据用户是向上还是向下滚动来显示和隐藏某些内容：

演示：http://jsfiddle.net/lucuma/pTjta/

$(document).ready(function () {
    $('.container div:eq(1)').waypoint(function (direction) {
        if (direction == 'down') $('.toggleme').show();
        else {
            $('.toggleme').hide();
        }
    }, {
        offset: $.waypoints('viewportHeight') / 2

    });
});

Answer 2

E.B.D。，我看到你有一些工作。

如果您想要稍微简洁的切换操作，那么您可以考虑以下内容：

var $next_btn_containers = $('.next_btn_container, .next_btn_container_static');
$('#pageborder').waypoint(function(dir) {
    $next_btn_containers
        .toggleClass('next_btn_container_static', dir == 'down')
        .toggleClass('next_btn_container', dir == 'up');
}, { offset: 'bottom-in-view' });

通过预先选择并记住这两个类的所有成员，执行速度会更快 - 特别是在大型DOM中。

原始选择器很可能会简化，具体取决于元素的初始化方式。

稍微考虑一下（并适当调整样式表指令），你可以通过切换单个“静态”类来进一步简化：

var $next_btn_containers = $('.next_btn_container');
$('#pageborder').waypoint(function(dir) {
    $next_btn_containers.toggleClass('static', dir == 'down')
}, { offset: 'bottom-in-view' });

因此，

.next_btn_container将保持可靠的选择器（用于其他目的），无论元素的statc /非静态状态如何。

注意：与第一个版本（以及您自己的代码）不同，如果您拥有的话，这将不会处理两组反相切换的元素。

Answer 3

我使用此代码使其工作，感谢lucuma指向我正确的方向！

$('#pageborder').waypoint(function(direction) {

    if (direction == 'down') $('.next_btn_container').removeClass('next_btn_container').addClass('next_btn_container_static');
    else {
        $('.next_btn_container_static').removeClass('next_btn_container_static').addClass('next_btn_container');
    }
}, { offset: 'bottom-in-view' });

如何使用jquery waypoint切换功能

3 个答案: