繁体   English   中英

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

[英]Toggle div visibility according to scroll position and content height

我正在尝试在帖子的侧面实现简单的共享按钮,仅当帖子在视图内时才可见。 因此,如果用户在该帖子的上方或下方滚动,它们将被隐藏。

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

我在弄清楚最后一部分时遇到了麻烦:再次淡出。 理想情况下,再次向上滚动时它也应该起作用。 任何想法将不胜感激!

更新:

很抱歉,如果我不够清楚:我要寻找的效果基本上是一点,而没有使用绝对值。

从位于http://imakewebthings.com/jquery-waypoints/#docs的Waypoint文档中:

垂直航点也可以使用值“底部视图”。 这是常用功能的快捷方式,该功能可将航路点设置为在元素的底部碰到视口的底部时触发。

$('。thing')。waypoint({offset:'bottom-in-view'});

这可能会有所帮助。

我通过以下方式解决了问题,最终根本没有使用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();
    }
});

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM