Question

抱歉我的英文。我在学习）所以，我的问题：当我滚动底部我需要隐藏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>

但这不是我想要的。

Answer 1

如果我理解你的话，你想要一个介绍窗格，当你按下按钮时它会滑开，并显示之前无法访问的内容。为此，您可以执行以下操作：

＆＃13;

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

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

我在这里做的是在页面加载时将介绍窗格（标题）设置为display: none;，并在按下按钮时向运行时显示它以及向上滑动标题。因此，默认情况下应禁用滚动，因为无法滚动。

滚动底部隐藏的div

1 个答案: