滾動底部隱藏分區

對不起，我的英語。我正在學習）所以，我的問題：當我滾動底部我需要隱藏div，但滾動不起作用。當我的div被隱藏時，滾動將起作用。我想下一步： JS：滾動底部隱藏分區

$(document).ready(function() { 
    var n = 0; 
    var deleteBlocks; 
    $('.trigger').on('click', function(event) { 
     $('header').addClass('trans'); 
     $('header').addClass('hidden'); 
     n=1; 
    }); 
    var h = $(window).height(); 
    $(window).scroll(function(){ 
     if ($(this).scrollTop()==0) { 
      if ($("header").hasClass("hidden")) { 
       $("header").removeClass("hidden"); 
       n=0; 
       deleteBlocks = new TweenMax('',0,{delay: 1, onComplete:function() {     
        $('.text,.trigger').removeClass('disnone');; 
       }}); 
      } 
     } else { 
      $('header').addClass('hidden'); 
      $('header').addClass('trans'); 
      $('.text,.trigger').addClass('disnone'); 
      if (n==0) { 
       $('html,body').animate({scrollTop: '1px'}, 0); 
       n=1; 
      } 
     } 
    }); 
});

CSS：

section { 
    width: 100%; 
    height: auto; 
    background: #; 
    text-align: center; 
} 
header { 
    background: url(../img/slide1.jpg); 
    background-size: cover; 
    height: 100vh; 
    width: 100vw; 
    position: absolute; 
} 
.wrapper { 
    width: 80%; 
    height: 100%; 
    margin: 0 auto; 
} 
.text { 
    width: 100%; 
    text-align: center; 
    padding-top: 30%; 
} 
.trigger { 
    margin-top: 20%; 
    margin-left: 45%; 
} 
.trans { 
    -webkit-transition:1s; 
    transition:1s; 
} 
.disnone { 
    display: none; 
} 

.hidden { 
    color: red; 
    height: 0; 
    opacity: 0; 
}

HTML：

<!DOCTYPE html> 
<head class="no-js" lang="en"> 
    <meta charset="utf-8"> 
    <title>Исчезающая шапка</title> 
    <link rel="stylesheet" href="css/style.css" /> 
    <script type="text/javascript" src="js/jquery.min.js"></script> 
    <script type="text/javascript" src="js/TweenMax.min.js"></script> 
    <script type="text/javascript" src="js/main.js"></script> 
</head> 
<body> 
    <header class='header'> 
     <div class="wrapper"> 
      <div class="text tr"> 
       Пробная версия 1.0 
      </div> 
      <button class='trigger tr'>CLICK FOR HIDDEN</button> 
     </div>  
    </header> 
    <section> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
     adadasdasdasdasd<br> 
    </section> 
</body> 
</html>

但它並不比我想。

來源

2015-12-02 Daxik

你可以加html嗎？ –

您可以嘗試在JSFiddle中重現問題嗎？ –

我的代碼在JSFiddle上不起作用。但是，如果您在您的計算機上創建3個文件並複製我的代碼，那就行了。 https://jsfiddle.net/43tqhkfv/ – Daxik

如果我理解你是正確的，你希望有一個介紹窗格，當你按下按鈕並顯示之前無法訪問的內容時，它會滑動。要做到這一點，你可以做這樣的事情：

$("button.trigger").on("click", function() { 
 
    $("section").show(); 
 
    $("header").slideUp(); 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
} 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
section { 
 
    width: 100%; 
 
    background: #; 
 
    text-align: center; 
 
} 
 
header { 
 
    background: #fff; 
 
    background-size: cover; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    position: absolute; 
 
} 
 
.wrapper { 
 
    width: 80%; 
 
    height: 100%; 
 
    margin: 0 auto; 
 
} 
 
.text { 
 
    width: 100%; 
 
    text-align: center; 
 
    padding-top: 30%; 
 
} 
 
.trigger { 
 
    margin-top: 20%; 
 
    margin-left: 45%; 
 
} 
 
.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header class='header'> 
 
    <div class="wrapper"> 
 
    <div class="text tr"> 
 
     Пробная версия 1.0 
 
    </div> 
 
    <button class='trigger tr'>CLICK FOR HIDDEN</button> 
 
    </div> 
 
</header> 
 
<section class="hidden"> 
 
    First Line 
 
    <br> 
 
    <span style="height: 1500px; display: block;">spacing</span> 
 
    Last Line 
 
</section>

我在這裏做是我的前奏窗格（頭），設置爲display: none;在頁面加載和運行時顯示其按下時按鈕以及滑動標題。因此，應該禁用滾動默認，因爲沒有什麼可以滾動。

來源

2016-01-02 14:56:52

滾動底部隱藏分區

回答

相關問題