'How do I make my stuff scroll in this manner? [html/css]

enter image description here

Image in response to MrXQ

I need help to see if the following code is done correctly - all text and images as you see below are replacements of the in-computer original for privacy reasons

So what I want is the headers to scroll over the trollface which is 1 z-index below the headers, with the trollface remaining static - the headers are the first things visible on the screen, but as you scroll up, the "test" spam in the brown box will emerge from the bottom

I am not sure if I am doing it right; I have utilised and code monkeyed concepts such as parallax scrolling, positions fixed and relative, z-indexing the headers forward; I do not understand the proper word to describe scrolling the brown box up from the bottom; has it something to do with overlaying?

.parallax{
background-image: url("https://upload.wikimedia.org/wikipedia/en/thumb/9/9a/Trollface_non-free.png/220px-Trollface_non-free.png");
min-height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}


h1{
color: black;
font-family: 'Quicksand';
font-size: 50px;
text-align: center;
z-index: 1;
position: relative;
}

h2{
color: black;
font-family: 'Arial';
font-size: 25px;
text-align: center;
z-index: 1;
position: relative;
}

.textbody{
position: relative;
}

.textbodytext{
color: white;
font-family: 'Quicksand';
font-size: 50px;
text-align: center;
z-index: 2;
position: relative;
background: brown;
}
<DOCTYPE! html>

<html>
<head>
<title>TITLE</title>
</head>

<link href="maintenance1.css" rel="stylesheet" type="text/css">

<body>

<div>
<body class="parallax"></body>
</div>

<div>

<body  class="textbody">
<h1>This is a header</h1>
<h2>This is a smaller header</h2>
<p class="textbodytext">
Test test test test test Test test test test test Test test test test test Test test test test test Test test test test test Test test test test test Test test test test test Test test test test test Test test test test test Test test test test test Test test test test test Test test test test test Test test test test test Test test test test test Test test test test test Test test test test test Test test test test test Test test test test test Test test test test test Test test test test test Test test test test test Test test test test test Test test test test test Test test test test test Test test test test test Test test test test test Test test test test test
</p>
</body>
</div>

</body>
</html>

Relevant image in response to a poster, options mentioned in the comments

Update: So I tested the private actual code after changing the brown box's font-size to 50px, and it seems that while the background image is still, most of the brown box is uncovering the key parts of the image

So I have realised what I want to see is only the background at the beginning with the headers at the centre, and then when you scroll up the brown box will come from below the browser, invisible at first and visible when you scroll up

htmlcss


Solution 1:[1]

i think you want something like this. if not comment below what do you want to be changed .

    var didScroll;
        var lastScrollTop = 0;
        var delta = 5;
        var navbarHeight = $('#navi').outerHeight();
        $(window).scroll(function(event){
            didScroll = true;
        });

        setInterval(function() {
            if (didScroll) {
                hasScrolled();
                didScroll = false;
            }
        }, 250);

        function hasScrolled() {
            var st = $(this).scrollTop();
            
        
            if(Math.abs(lastScrollTop - st) <= delta)
                return;
            
        
            if (st > lastScrollTop && st > navbarHeight){
               
                $('#navi').css('top','-60px');
            } else {
               
                if(st + $(window).height() < $(document).height()) {
                    $('#navi').css('top','0');
                }
            }
            
            lastScrollTop = st;
        }
ul{
    list-style-type: none;
}
.header-box{
    position: relative;
    width: 100%;
    height:100vh;
    
    overflow: hidden;
    text-align: center;
    box-sizing: border-box;
    color: #ffffff;
    font-weight: 500;
    font-size: 2em;

    background-color: #4f4f4f;
}
.header-box .img{
    width:100%;
}
.header-box header{
    position: fixed;
    top: 0; 
    z-index: 999;
    width: 100%;
    height:60px; 
    text-align: center; 
    -webkit-transition: top 0.2s ease-in-out;
    transition: top 0.2s ease-in-out;
  background-color: #fff;
}

.header-box header ul{
    display: inline-block;
    padding: 0;
}
.header-box header ul li{
    float:left;
    font-size: 15px;
    list-style: none;
    margin: 0 15px;
}
.header-box header ul li a{
    color: #000000;
    text-decoration: none;
    font-weight: 500;
}
.header-box header ul li a:hover{
    color: #7d2516;
    text-decoration: none;
    font-weight: 500;
}

.header-box .header-text{
    position:absolute;
    top: 100px;
    z-index: 999;
    width:100%;
    height:300px; line-height: 50px;
    font-size: 1.3em;
    color: #eeeeee;
}
.header-box .header-text small{
    font-size: .5em;
    color: #ffffff;
    font-weight: lighter;
}

.body{
  width:100%;
  height:1000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="header-box" id="home">
        <header class='nav-down' id="navi">
            <ul>
                <li><a href="#">Header</a></li>
            </ul>           
        </header>
        <div class="header-text">
        <h4>Body</h4>   
        </div>
    </div>
  <div class="body">
  </div>
 
 </body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 rootShiv

Related Questions