Problem with script making banner disappear when scrolled

I wrote javascript code making website banner disappear when scroll’s position is >0 or window’s width is less than 1400px and it works well but one of my subpages have very little content so on full HD resolution only small part of the content is not visible until scrolled. So when i scroll down to reveal that content the banner disappears making enough space for entire content of this subpage so the scroll itself disappears which is equal to scrolls position = 0 which makes banner appear again. How can i fixed it? Thank you in advance.

setInterval(pasek,25)
function pasek()
{
    var a = window.innerWidth;
    var b = window.pageYOffset
    if(a<1400||b>0)
    {
        document.getElementById("baner").style.display="none";
        document.getElementById("xxx").style.paddingTop="52px";

    }
    else
    {
        document.getElementById("baner").style.display="block";
        document.getElementById("xxx").style.paddingTop="218px";
    }

}
<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charSet="utf-8">
        <meta http-equiv="X-Ua-compatibility" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Kopysno</title>
        <link rel="stylesheet" href="bootbootstrap-4.5.0distcssbootstrap.min.css">
        <link rel="stylesheet" href="css.css">
        <script src="https://kit.fontawesome.com/yourcode.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        <script src="bootbootstrap-4.5.0distjsbootstrap.min.js"></script>
        <script src="script.js"></script>
    </head>
    <body id="1" style="background-color:white">
        <div class="start">
            <img id="baner" src="baner.jpg">
            <nav class="kolanko navbar navbar-expand navbar-light"> 
                <ul class="navbar-nav" >
                    <li id="Strona" class="nav-item">
                        <a class="nav-link" href="kopysno.html">Strona Główna</a>
                    </li>
                    <li id="Aktualnosci" class="nav-item">
                        <a class="nav-link" href="Aktualnosci.html">Aktualności</a>
                    </li>
                    <li id="Mapa" class="nav-item">
                        <a class="nav-link" href="mapaokolicy.html">Mapa Okolicy</a>
                    </li>
                    <li id="Filmy"class="nav-item">
                        <a class="nav-link" href="#">Filmy</a>
                    </li>
                    <li id="Dawni" class="nav-item">
                        <a class="nav-link" href="dawnimieszkancy.html">Dawni Mieszkańcy</a>
                    </li>
                    <li id="Artykuły"class="nav-item">
                        <a class="nav-link" href="#">Artykuły prasowe</a>
                    </li>
                    <li id="Kontakt"class="nav-item">
                        <a class="nav-link" href="kontakt.html">Kontakt</a>
                    </li>
                    <li class="nav-item">
                        <div class="dropdown">
                            <a class="dropdown-toggle" style="text-align:center;text-decoration:none" data-toggle="dropdown" href="#">Więcej</a>
                            <div style="background-color:dimgrey"class="dropdown-menu">
                                <a class="dropdown-item" href="Historia.html">Historia</a>
                                <a class="dropdown-item" href="#">Geografia</a>
                                <a class="dropdown-item" href="#">Środowisko</a>
                                <a class="dropdown-item" href="#">Kartografia Archiwalna</a>
                                <a class="dropdown-item" href="#">Galeria Fotografii</a>
                                <a id="a1"style="display:none"class="dropdown-item" href="kontakt.html">Kontakt</a>
                                <a id="a2"style="display:none"class="dropdown-item" href="#">Artykuły prasowe</a>
                                <a id="a3"style="display:none"class="dropdown-item" href="dawnimieszkancy.html">Dawni Mieszkańcy</a>
                                <a id="a4"style="display:none"class="dropdown-item" href="#">Filmy</a>
                                <a id="a5"style="display:none"class="dropdown-item" href="mapaokolicy.html">Mapa Okolicy</a>
                                <a id="a6"style="display:none"class="dropdown-item" href="Aktualnosci.html">Aktualnosci</a>
                                <a id="a7"style="display:none"class="dropdown-item" href="kopysno.html">Strona Główna</a>
                            </div>
                        </div>  
                    </li>   
                </ul>
                <form style="padding-right:10px;"class="form-inline" action="/action_page.php">
                    <input style="width:60%;margin:5px;float:right"class="form-control mr-sm-2" type="text" placeholder="Search">
                    <button style="float:right"class="btn btn-success" type="submit">Search</button>
                </form> 
                <button class="dark btn btn-dark"id="but"type="button" onclick="dark()">Dark</button>
            </nav>  
        </div>
        <div id="2" class="container-fluid"style="background-color:white;">
            <div class="row">
                <div id="xxx"class="col">
                    <ul class="list-group">
                        <li class="list-group-item" style="text-align:center;font-size:25px;background-color:#e6f2ff">
                            <span>
                                STRONA GŁÓWNA
                            </span>
                        </li>
                    </ul>       
                </div>
            </div>
            <div id="3"class="row" style="font-family:Verdana;letter-spacing:1px;font-size:16px;margin-bottom: 50px;">
                <div class="col"style="padding-right:50px;padding-left:50px;margin:auto;padding-top:40px" >
                &nbsp &nbsp KOPYSNO, znane także jako Kopyśno, Kopystno, to miejscowość istniejąca już w XIV wieku  i będąca zarazem gniazdem rodu Kopystyńskich. Wiele wieków później, w wyniku dramatycznych wydarzeń, które się rozegrały podczas drugiej wojny światowej oraz po jej zakończeniu, utraciła największy skarb swej ziemi - licznych mieszkańców, których zmuszono, by porzucili swoje domostwa i zagrody i udali się w nieznane, w świat stworzony im przez obcych.<br><br>

                &nbsp &nbsp Czy historię mieszkańców Kopysna można ocalić od zapomnienia? Dopóki choć jeden z nas będzie mógł wymówić słowo "Kopysno" ze zrozumieniem, dopóty miejscowość ta nie ujdzie z pamięci żyjących. Nadejdzie jednak czas gdy każdy, kto mieszkał w tym przepięknym miejscu, powróci tu i sprawi, że nasze serca zapłoną ... .<br><br>
            
                &nbsp &nbsp Strona internetowa Kopysna powstała dzięki staraniom dzieci i wnuków jej mieszkańców, którzy pamiętają niezwykłą atmosferę stworzoną im przez dziadków i rodziców. Zapisali oni w swym sercu ciszę przerywaną odgłosem wiatru i ryczących jeleni; zapamiętali zapach ziemi podczas wiosennej orki i smak orzeźwiającej wody wydobywającej się z licznych źródeł, a także śmierć bliskich, których odejście z roku na rok zwiastowało koniec niepowtarzalnych chwil.<br><br>

                &nbsp &nbsp Celem istnienia strony nie jest propagowanie żadnych ideologii, a zwłaszcza nacjonalistycznych czy politycznych. Podane na niej informacje mogą nie być ścisłe pod względem historycznym i niekiedy zbyt ogólnikowe, gdyż niewielu pozostało z tych, którzy mogliby uzupełnić to, co tak szybko nam umknęło.  Każdego, kto chciałby pomóc w uzupełnieniu naszej strony, prosimy o kontakt.
                </div>
                <div class="col-xxl"style="text-align:center;padding-right:50px;padding-left:50px;margin-bottom: 30px;padding-top:40px">
                    <div id="demo" class="carousel slide" data-ride="carousel">
                        <ul class="carousel-indicators" style="bottom:1%">
                            <li data-target="#demo" data-slide-to="0" class="active"></li>
                            <li data-target="#demo" data-slide-to="1"></li>
                            <li data-target="#demo" data-slide-to="2"></li>
                        </ul>
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <img style="width:100%;height:100%"src="1.png" alt="">
                            </div>
                            <div class="carousel-item">
                                <img style="width:100%;height:100%"src="2.jpg" alt="">
                            </div>
                            <div class="carousel-item">
                                <img style="width:100%;height:100%"src="3.jpg" alt="">
                            </div>
                        </div>   
                        <a class="carousel-control-prev" href="#demo" data-slide="prev">
                            <span class="carousel-control-prev-icon"></span>
                        </a>
                        <a class="carousel-control-next" href="#demo" data-slide="next">
                            <span class="carousel-control-next-icon"></span>
                        </a>    
                    </div>
                </div>
            </div>
        </div>
        <div style="text-align:center;background-color:lightgrey;position:fixed;bottom:5px;left:3%;width:94%">
            © Copyrights Dedio & Dedio 2003
        </div>  
    </body>
</html>

Answer

just add the mediaquery at your css, that will handle the issue (looks like a compatibility one)

more info at

https://developer.mozilla.org/pt-BR/docs/Web/CSS/@media

Leave a Reply

Your email address will not be published. Required fields are marked *