滚动底部隐藏的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.