堆栈内存溢出
  简体   繁体   English

滚动底部隐藏的div

[英]Scroll bottom hidden div

 原文  2015-12-02 15:40:36  9   1    javascript/ jquery/ html/ css

问题描述

Sorry for my english. 对不起我的英语不好。 I am learning) So, my question: When i scroll bottom i need to hide div, but scroll did not work. 我正在学习）所以，我的问题：当我滚动底部我需要隐藏div，但滚动不起作用。 When my div is hide, scroll will work. 当我的div隐藏时，滚动将起作用。 I am trying do next: JS: 我正在尝试下一步：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: 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: 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>

But it's not than i want to get. 但这不是我想要的。

1 个解决方案

解决方案1
 0  2016-01-02 14:56:52

If I understand you right, you want to have an introduction pane which slides away when you press the button and reveals the content which wasn't accessible before. 如果我理解你的话，你想要一个介绍窗格，当你按下按钮并显示以前无法访问的内容时，它会滑开。 To achieve this, you can do something like this: 为此，您可以执行以下操作： 

 $("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>

What I did here is I set the intro pane (header) to display: none; 我在这里做的是我将介绍窗格（标题）设置为display: none; at page load and show it at runtime when pressing the button as well as sliding up the header. 在页面加载时，在按下按钮时向上显示它以及向上滑动标题。 Scrolling should therefore be disabled by default, as there is nothing to scroll there. 因此，默认情况下应禁用滚动，因为没有任何内容可以滚动。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 滚动到隐藏div的底部？ - Scroll to bottom of hidden div? 如何在页面底部自动显示和滚动隐藏的div？ - how to show and scroll automatically a hidden div at bottom of the page? 如果div被溢出隐藏，则滚动 - Scroll if div is hidden by overflow 更改隐藏div的滚动 - Change the scroll of an hidden div 滚动到动态Div的底部 - Scroll to the Bottom of Dynamic Div 自动滚动到div的底部 - Automatically scroll to bottom of div javascript：将div滚动到底部 - javascript: scroll a div to the bottom 滚动到div的底部 - Scroll to bottom of a div 滚动到扩展 div 的底部 - scroll to the bottom of an extended div Jquery滚动到div的底部 - Jquery scroll to bottom of div
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM