滾動100vh之後的滾動滾動頂部

我有一個頂部有100vh div的主頁，我想在此div之後向下滾動時隱藏它。或者在滾動這個100vh div後禁用向上滾動的可能性。當你到達網站時，這個div應該只出現一次。滾動100vh之後的滾動滾動頂部

這裏的鏈接：http://tmp.thomasdesnoyers.com/ 經過大彩色背景div你shloudn't能夠向上滾動。

我嘗試添加「顯示：無」滾動窗口的高度後proprety到這個div但它把所有的內容... 如果有人對此有任何線索的作用...

這股利來隱藏：

<div id="home-background" class="monobg"> 


<?php $images_toomany = array("/wp-content/img/toomany.svg", "/wp- 
content/img/toomany_2.svg", "/wp-content/img/toomany_3.svg", "/wp- 
content/img/toomany_4.svg", "/wp-content/img/toomany_5.svg");?> 
<?php echo '<img src="'.$images_toomany[array_rand($images_toomany)].'" 
class="toomany" />';?> 

<?php $images_pictures = array("/wp-content/img/pictures.svg", "/wp- 
content/img/pictures_2.svg", "/wp-content/img/pictures_3.svg", "/wp- 
content/img/pictures_4.svg", "/wp-content/img/pictures_5.svg",);?> 
<?php echo '<img src="'.$images_pictures[array_rand($images_pictures)].'" 
class="pictures" />';?> 


</div>

謝謝。

Thomas

來源

2017-04-26 tomdes

請發表您的代碼，感謝 – sol

*「（爲什麼不是這個代碼工作「？）求調試幫助問題」必須包括所期望的行爲，一個特定的問題或錯誤**和在問題本身中重現它所需的最短代碼**。沒有明確問題陳述的問題對其他讀者無用「* - [我可以詢問什麼主題關於堆棧溢出？]（https：// stackoverflow .com/help/on-topic） – Santi

只需使用div的代碼編輯我的帖子即可隱藏 – tomdes

是的。超級簡單。當您想要防止滾動到當前視口之外時，只需將overflow：hidden添加到您的body元素。你可以通過JS或jQuery動態地做到這一點。

來源

2017-04-26 20:24:41 Korgrue

它允許通過箭頭鍵進行滾動，例如。 – NikxDa

不知道我跟着你。溢出：隱藏在身體上將防止通過鍵盤和鼠標滾動。 – Korgrue

感謝您的回答。只需將其添加到身體，它會做相反的事情。它只顯示我想要隱藏並隱藏頁面其餘部分的主頁背景div。 – tomdes

試試這個

$(window).scroll(function() { 

    var div_height = $('#home-background').height();  
    var page_scroll = $(window).scrollTop(); 

    if(page_scroll > div_height) { 
     $('#home-background').css('display', 'none'); 
    } 
});

來源

2017-04-26 20:31:46 user3160178

謝謝你的答案。這個技術的唯一問題是它把所有的內容都拿出來，因爲頂部的大div不再存在。 – tomdes

這裏我用溢出TECHNIC代碼。我認爲這是一個良好的開端：

jQuery(function($) { 

var $nav = $('body'); 
var $win = $(window); 
var winH = $win.height(); // Get the window height. 

$win.on("scroll", function() { 
    if ($(this).scrollTop() > winH) { 
     $nav.addClass("hide"); 
    } 
}).on("resize", function(){ // If the user resizes the window 
    winH = $(this).height(); // you'll need the new height value 
}); 

});

來源

2017-04-26 20:38:05 tomdes

滾動100vh之後的滾動滾動頂部

回答

相關問題