簡體   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