問題隱藏在頁面上的文本之前，它出現在滾動

晚上好，我有一個問題隱藏在頁面上的文本加載時，它應該出現後，我向下滾動頁面。但是它很明顯，當我達到設定點時，它消失並立即再次出現。當我再次滾動到頂部時，它終於消失。當我試圖用display: none;或visibility: hidden;隱藏它時，它甚至不會出現。我應該在代碼中更改什麼？感謝您的幫助！問題隱藏在頁面上的文本之前，它出現在滾動

JS：

$(window).scroll(function() { 
    var pxFromBottom = 350; 

    if ($(window).scrollTop() + $(window).height() > $(document).height() - pxFromBottom) { 
    $('.scroll-btn').fadeIn('slow') 
    } else { 
    $('.scroll-btn').fadeOut('slow');  
    } 

});

CSS：

html { height:2000px; background-color: #666; }

HTML：

<div style="position:absolute; top: 120%;" class="scroll-btn"> my content to show </div>

來源

2016-01-12 H Sturma

@H Sturma它更容易幫助你與一個jsfiddle –

第一次當你的代碼第一次隱藏div時，它不會「淡入淡出」，然後「淡出」。只是淡出。修復此，

添加到div風格

display:none;

這種方式，您將無法看到DIV scorlling下來的時候。

但是這個東西只解決了一個問題。

您的div位於視口高度的120％處。所以如果視口高度是1080px，那麼div的頂部會有1296px。

但在你的js代碼，你檢查

if $(window).scrolltop + $(window).height > $(document).height() - pxFromBottom)

所以由DIV得到顯示你不能看到它，因爲它已經由滾動的時間。但它仍然得到淡入，所以當你向後滾動時，你可以在它得到淡出之前看到它。

您應將如果stament改成這樣：

if (($(window).scrollTop()) > ($(window).height() - pxFromBottom))

這樣你檢查，如果當前的滾動，是更大的視口的高度 - pxFromBottom。一旦你向下滾動，你會在div淡入

小提琴 - https://fiddle.jshell.net/jgthb6m2/5/

來源

2016-01-12 17:44:27 BinaryGhost

謝謝，完美的作品！ –

很高興幫助:) – BinaryGhost

我不完全相信你的問題是什麼，但如果文本需要被隱藏在負載上，可能做到以下幾點：

$(document).ready(function() { 
     $('.scroll-btn').hide(); 
    });

來源

2016-01-12 17:18:57

與計算的問題。當滾動頂部到達文本時，下面的代碼顯示文本。我認爲，當你滾動到文本應該出現，當你再次滾動到頂部時，文本應該消失。

if ($(window).scrollTop() > $('.scroll-btn').position('top')) { 
    $('.scroll-btn').fadeIn('slow'); 
    console.log('fade in'); 
    } else { 
    $('.scroll-btn').fadeOut('slow'); 
    console.log('fade out'); 
    }

來源

2016-01-12 17:55:55

問題隱藏在頁面上的文本之前，它出現在滾動

回答

相關問題