Question

我正在尝试在帖子的侧面实现简单的共享按钮，只有当帖子在视图中时才可见。因此，如果用户在该帖子的上方或下方滚动，则会隐藏它们。

jQuery waypoint这是我目前选择的武器。我的方法包括：

// first hiding the div
$('.post-sharing-side').hide();

// fading it in as soon as the headline reaches the top of the viewspace (that feels right in my use case)
$('.entry-title').waypoint(function(direction) {
    $('.post-sharing-side').fadeIn();
});

// fading it out again as soon as the upcoming div reaches the bottom of the viewspace
MISSING

我无法弄清楚最后一部分：再次淡出它。理想情况下，它应该在再次向上滚动时工作。任何想法都将受到高度赞赏！

更新

很抱歉，如果我不够清楚：我正在寻找的效果基本上是 this 位而不使用绝对值。

Answer 1

来自http://imakewebthings.com/jquery-waypoints/#docs的航点文档：

垂直航路点也可以使用“底部视图”值。这是一个   用于设置航点触发时间的常用函数的快捷方式   元素的底部击中视口的底部。

$（'。thing'）。waypoint（{offset：'bottom-in-view'}）;

这可能会有所帮助。

Answer 2

我通过以下方式解决了它，最后根本没有使用jQuery waypoint：

$('.post-sharing-side').hide();

var entryheight = $('.entry-content').height();

$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 350 && y < entryheight) {
         $('.post-sharing-side').fadeIn();
    } else {
        $('.post-sharing-side').fadeOut();
    }
});

根据滚动位置和内容高度切换div可见性

2 个答案: