'Header-down show on scroll-up : JavaScript HTML

I tried to make a header-down from certain models found on the internet, after some modification, my first model was functional (first example), when we scroll up it reappears directly.

After adding it to the code of a page on my website, it just didn't work anymore. In this menu-header, I added my logo, some links and a menu-wrapper, I have the impression that these additions must be integrated into the JavaScript code, but I don't know how to do ...

Example 1:

/*------------------ Header scroll --------------------------*/

$(function(){ 

var didScroll;
var lastScrollTop = 0;
var delta = 100;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

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


function hasScrolled() {
    var st = $(this).scrollTop();
    
    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;
    
    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('header').removeClass('header_down').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('header_down');
        }
    }
    lastScrollTop = st;
};

});

/* ------loader------ */
#contenant{
width:auto;
}

.header_down{
    position: fixed;
    display: inline;
    width: calc(100% - 100px);
    height: 90px;
    background: #F5F5F5;
    top: 0;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 30px;
    z-index: 104;
    font-size: 15px;
    line-height: 19px;
    transition: all 300ms ease-in-out;
}

/*----------------------- PAGE TRAVAUX --------------------*/

.grille{
position:relative;
margin-top: 120px;
z-index: 97;
width: 100%;
height: 1800px;
background: #000;
}

<html>
  <body>

       <div id="contenant">
        <header class="header_down"> 
          </header>
        

        <div class="grille">

  </div>
      <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</body>
</html>

Example 2:

/*------------------ Header scroll --------------------------*/

$(function(){ 

var didScroll;
var lastScrollTop = 0;
var delta = 100;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

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


function hasScrolled() {
    var st = $(this).scrollTop();
    
    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;
    
    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('header').removeClass('header_down').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('header_down');
        }
    }
    lastScrollTop = st;
};

});

h1 { 
color: #fcfcfc;
font-size: 28px;
font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
}

.header_down{
    height: 120px;
    position: absolute;
    width: 100%;
    background: #000;
    top: 0;
    z-index: 104;
    transition: all 300ms ease-in-out;
}
}
.hide_header #header{
opacity:0;
}
.grille{
position:relative;
width: 100%;
z-index: 40;
height: 1800px;
background: #f0f0f0;
}

.menubar{
position: absolute;
right:4%;
top: 40%;
cursor: pointer;
opacity: .8;
transition: all .4s ease;
}
.menubar span{
position: relative;
background-color:transparent;
height:3px;
width: 20px;
display: block;
margin:6px;
border-radius: 20px;
}
.menubar .first-span{
width:35px;
}
.menubar .first-span::before{
content: "";
position: absolute;
height: 120%;
width: 100%;
top:0;
right:0;
background-color: #fff;
transition: all .5s ease;
}
.menubar .second-span{
width:35px;
}
.menubar .second-span::before{
content: "";
position: absolute;
height: 120%;
width: 100%;
top:0;
right:0;
background-color:#fff;
transition: all .3s ease;
}
.menubar .third-span{
width:35px;
}
.menubar .third-span::before{
content: "";
position: absolute;
height: 120%;
width: 100%;
top:0;
right:0;
background-color:#fff;
transition: all .3s ease;
}
.menubar:hover .second-span::before , .menubar:hover .first-span::before , .menubar:hover .third-span::before {
height: 100%;
}
.menubar:hover{
opacity: 1;
}

.header_down .logoInit{ /* lookitsgraphic fermé */
position: absolute;
top: 35%;
left: 2.5%;
opacity: .8;
transition: all .4s ease;
cursor : none;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
border: 5px solid #fcfcfc;
}
.header_down .logoInit:hover{
opacity: 1;
}
.social-media-links{
width: 100%;
left: 0;
top: 23px;
position: absolute;
padding: 10px;
height: auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.social-media{
color: white;
width:  30px;
opacity: .8;
margin: 15px;
transition: all .4s ease;
}
.social-media:hover{
opacity: 1;
transform: scale(1.5);
}
.navigation-links{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-family:poppins;
}
.navigation-links a{
padding:10px;
text-decoration: none;
color: white;
font-size: 40px;
opacity: .7;
color: rgba(252, 252, 252, 0);
-webkit-text-stroke: 1px #fcfcfc;
transition: all .4s ease;
}
.navigation-links a:hover{
opacity: 1;
color: rgba(252, 252, 252, 1);
-webkit-text-stroke: 0px;
}
.navigation-links a::before{
content: "";
position: absolute;
top:50%;
left: 50%;
display: flex;
justify-content: center;
transform: translate(-50%,-50%);
align-items: center;
font-size: 9vw;
font-weight: 400;
font-family: monoton;
color:rgb(255, 255, 255,.1);
z-index: 1;
pointer-events: none;
opacity: 0;
letter-spacing: 100px;
transition: all .4s ease;
}
.navigation-links a:hover::before{
content: attr(data-text);
opacity: 1;
letter-spacing: 10px;
}

.colors{
color: #fff;
}

.html{
display: inline-block;
position: absolute;
left: 5%;
top:30%;

<body>
        <div id="all">      

         <header class="header_down"> 
                <h1><a class="logoInit" alt="logo">lookitsgraphic</a>
                </h1>
                                <div class="social-media-links">
                    <a href="#" target="_blank">
                        <img src="https://lookitsgraphic.com/src/picto/Instagram.png" class="social-media" alt="instagram-logo">
                    </a>
                    <a href="#">
                        <img src="https://lookitsgraphic.com/src/picto/Phone.png" class="social-media" alt="phone-logo">
                    </a>
                    <a href="#" target="_top">
                        <img src="https://lookitsgraphic.com/src/picto/Mail.png" class="social-media" alt="mail-logo">
                    </a>
                    <a href="#">
                        <img src="https://lookitsgraphic.com/src/picto/Eye.png" class="social-media" alt="eye-logo">
                    </a>
                </div>
                <div class="menubar">
                    <span class="first-span"></span>
                    <span class="second-span"></span>
                    <span class="third-span"></span>
                </div>

          </header>
          
         <div class="grille">
         
          
            </div>

        </div>

    </body>
</html>

If any one understand where to fix this problem.

Thank you for your consideration in this matter.

Solution 1:^[1]

I think this a simple answer of what you need , you are doing too much work.

maybe if you implement it simply it will work.

window.onscroll = function (e) {
// print "false" if direction is down and "true" if up
if (this.oldScroll > this.scrollY) {
    document.querySelector("header").style.transform = "translateY(0px)"; 
} else {
    document.querySelector("header").style.transform = "translateY(-130px)";
}
this.oldScroll = this.scrollY; 
}

header { 
background-color: red;
text-align:center;
margin-bottom:100px;
position: fixed;
width: 100%;
transition: 0.5s; 
}

p { 
height: 250vh;
}

<header>
    <h1>Hello</h1>
</header>

<p></p>

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

'Header-down show on scroll-up : JavaScript HTML

Example 1:

Example 2:

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]