滚动时脚本使横幅消失的问题

Question

我写了 javascript 代码，当滚动位置 >0 或 window 的宽度小于 1400px 时，网站横幅消失，效果很好，但我的一个子页面内容很少，所以在全高清分辨率下，只有一小部分内容在滚动之前是不可见的。因此，当我向下滚动以显示该内容时，横幅消失，为该子页面的全部内容提供足够的 space，因此滚动本身消失，这等于 scrolls position = 0，这使横幅再次出现。我该如何解决？提前谢谢你。

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="boot\bootstrap-4.5.0\dist\css\bootstrap.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="boot\bootstrap-4.5.0\dist\js\bootstrap.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 1

只需在 css 处添加媒体查询即可解决问题（看起来是兼容性问题）

更多信息请访问

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

滚动时脚本使横幅消失的问题

Problem with script making banner disappear when scrolled

html

javascript

css

debugging

scrollbar