滾動底部隱藏的div
[英]Scroll bottom hidden div
問題描述
對不起我的英語不好。 我正在學習）所以，我的問題：當我滾動底部我需要隱藏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: #012345;
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>
但這不是我想要的。
1 個解決方案
解決方案1
0 2016-01-02 14:56:52
如果我理解你的話，你想要一個介紹窗格，當你按下按鈕並顯示以前無法訪問的內容時，它會滑開。 為此，您可以執行以下操作：
$("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: #012345; 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; 在頁面加載時，在按下按鈕時向上顯示它以及向上滑動標題。 因此，默認情況下應禁用滾動，因為沒有任何內容可以滾動。
滾動到隱藏div的底部？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.