在 phone 上滚动不流畅,并且导航没有像预期的那样粘在屏幕上

Unsmooth scrolling on phone, and nav not sticking to screen as it is suppose to

我做了一个网站, bil2000.com

当你试图在 phone 上滚动它时,它真的很不舒服而且很奇怪。

此外,导航栏不会固定在顶部屏幕上。

谁能看出这是为什么?

更新页面中的 bootstrap cdn 链接,并更改代码: Html:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/png" href="/images/car-6-icon.png">
    <title>Bilar - Bil2000</title>



        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
        <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<meta name="x-stylesheet-fallback-test" content="" class="sr-only" /><script>!function(a,b,c,d){var e,f=document,g=f.getElementsByTagName("SCRIPT"),h=g[g.length-1].previousElementSibling,i=f.defaultView&&f.defaultView.getComputedStyle?f.defaultView.getComputedStyle(h):h.currentStyle;if(i&&i[a]!==b)for(e=0;e<c.length;e++)f.write('<link href="'+c[e]+'" '+d+"/>")}("position","absolute",["\/lib\/bootstrap\/dist\/css\/bootstrap.min.css"], "rel=\u0022stylesheet\u0022 ");</script>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
        <link rel="stylesheet" href="/css/site.css?v=8YH5DRO46y8qmhjWMSgtbxO5NejlA-SYPLAgu5PbTg8" />

</head>

和正文:

        <div>
        <div class="carousel fade-carousel slide" data-ride="carousel" data-interval="10000" id="bs-carousel">
            <!-- Overlay -->
            <div class="overlay"></div>
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
                <li data-target="#bs-carousel" data-slide-to="1"></li>
                <li data-target="#bs-carousel" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="item slides active">
                    <div class="slide-1"></div>
                    <div class="hero">
                        <hgroup>
                            <h1>Köper & säljer begagnade bilar!</h1>
                            <h3>Personbilar och skåpbilar</h3>
                        </hgroup>
                        <a href="cars" class="btn btn-hero btn-lg" role="button">Se bilar</a>
                    </div>
                </div>
                <div class="item slides">
                    <div class="slide-2"></div>
                    <div class="hero">
                        <hgroup>
                            <h1>Bil2000</h1>
                            <h2>Din lokala bilhandlare och bilverkstad</h2>
                        </hgroup>
                        <a href="#" class="btn btn-hero btn-lg" role="button" onmousedown="autoScrollTo('#Contact')">Kontakt</a>
                    </div>
                </div>
                <div class="item slides">
                    <div class="slide-3"></div>
                    <div class="hero">
                        <hgroup>
                            <h1>Verkstad & däckhotell</h1>
                            <h3>Vi har egen verkstad med däckhotell!</h3>
                        </hgroup>
                        <a href="#Contact" class="btn btn-hero btn-lg" role="button">Kontakt</a>
                    </div>
                </div>
            </div>
        </div>


    </div>

  <nav class="navbar navbar-inverse navbar-fixed-top fixed-top transparent">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/">Bil2000</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#Cars">Bilar</a></li>
                        <li><a href="#Contact">Kontakt</a></li>
                        <li><a href="#AboutUs">Om oss</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    <nav id="cookieConsent" class="navbar navbar-default navbar-fixed-top" role="alert">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#cookieConsent .navbar-collapse">
                    <span class="sr-only">Toggle cookie consent banner</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <span class="navbar-brand"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span></span>
            </div>
            <div class="collapse navbar-collapse">
                <p class="navbar-text">
                    Use this space to summarize your privacy and cookie use policy.
                </p>
                <div class="navbar-right">
                    <a class="btn btn-info navbar-btn" href="/Home/Privacy">Learn More</a>
                    <button type="button" class="btn btn-default navbar-btn" data-cookie-string=".AspNet.Consent=yes; expires=Thu, 14 Nov 2019 18:09:36 GMT; path=/; samesite=lax">Accept</button>
                </div>
            </div>
        </div>
    </nav>
    <script>
        (function () {
            document.querySelector("#cookieConsent button[data-cookie-string]").addEventListener("click", function (el) {
                document.cookie = el.target.dataset.cookieString;
                document.querySelector("#cookieConsent").classList.add("hidden");
            }, false);
        })();
    </script>


    <div class="">

<div class="container">
<div class="cars" id="Cars">
    <div class="normalOverlay">
        <div class="row text-center "><h3 style="color:white">Bilar vi har inne nu</h3></div>
        <div class="index-content">
            <div class="container carContent">
                        <h3 style="color:white">Inga bilar inne just nu.</h3>

            </div>
        </div>
    </div>
</div>
<div class="incCars " id="incCars">
        <img class="cover-image" style="margin:auto;" src="/images/5863444a-45aa-4b6b-bc1d-cccfaf6a2b33\DSCN0890[1].JPG" />

    <div class="overlay">
        <div class="row text-center "><h3 style="color:white" class="Dstyle">Inkommande bil</h3></div>
        <div class="row text-center "><h3 style="color:white" class="Dstyle">Ford - Transit 310 L3 Trend 2016</h3></div>
        <div class="forPhone">
            <h3 class="Pstyle">
                De bilar som är inkommande, finns ännu inte hos oss.
                Det betyder att vi ännu inte kan överge bilen till köparen.
                Bilen kan ej heller visas hos oss, då den inte står här förtillfället.
                Är du intresserad? <a href="#Contact">Kontakta oss.</a>
            </h3>
        </div>
    </div>
</div>

<div class="Contact" id="Contact">
    <div class="normalOverlay">
        <div class="container-fluid">
            <h1 class="text-center footertext">Kontakt information</h1>
            <hr>
            <div class="row" style="padding-bottom: 40px">
                <div class="mapouter"><div class="gmap_canvas">
                    <iframe width="100%" 
                        height="400" 
                        id="gmap_canvas" 
                        src="https://maps.google.com/maps?q=h%C3%B6vdingagatan%2039&t=&z=15&ie=UTF8&iwloc=&output=embed" 
                        frameborder="0" 
                        scrolling="no"
                        marginheight="0" 
                        marginwidth="0">
                    </iframe><a href="https://www.crocothemes.net">crocothemes.net</a></div>
                    <style>
                    .mapouter {
                        text-align: right;
                        height: 400px;
                        width: 100%;
                    }

                    .gmap_canvas {
                        overflow: hidden;
                        background: none !important;
                        height: 400px;
                        width: 100%;
                    }
                    </style>
                </div>
            </div>
            <div class="row text-center">
                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 box1 pt-4">
                    <a href="tel:08-19 55 92">
                        <i class="fas fa-phone fa-3x"></i>
                        <h3 class="d-none d-lg-block d-xl-block">Telefon</h3>
                        <p class="d-none d-lg-block d-xl-block">08-19 55 92</p>
                    </a>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 box2 pt-4">
                    <a href="">
                        <i class="fas fa-home fa-3x"></i>
                        <h3 class="d-none d-lg-block d-xl-block">Adress</h3>
                        <p class="d-none d-lg-block d-xl-block">
                            Hövdingagatan 39
                            126 52 HÄGERSTEN
                        </p>
                    </a>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 box3 pt-4">
                    <a href="mailto:bil2000@comhem.se">
                        <i class="fas fa-envelope fa-3x"></i>
                        <h3 class="d-none d-lg-block d-xl-block">E-mail</h3>
                        <p class="d-none d-lg-block d-xl-block">
                            bil2000@comhem.se
                        </p>
                    </a>
                </div>
            </div>
            <div class="row text-center">
                <h5>Öppettider:</h5>
                <p class="footertext">
                    Mån-tor 09.00-17.00
                </p>
            </div>
        </div>
    </div>
</div>

<div class="AboutUs" id="AboutUs">
    <div class="normalOverlay">
    </div>
    <div class="row getCenter">
        <div>
            <div class="col-lg-6 col-sm-12 text-center">
                <div class="croper" id="emp2">
                </div>

                <h2>Mikael Schulz<br><span>Ägare / Bilhandlare</span></h2>
                <p>
                    Det är ofta mig ni kommer att prata med när ni skall handla en bil hos oss.
                    Välkommen in att träffa mig!
                </p>
            </div>

            <div class="col-lg-6 col-sm-12 text-center">
                <div class="croper" id="emp1">
                </div>

                <h2>Rolf Hendler-Landy<br><span>Allt i allo</span></h2>
                <p class="forPC">
                    Jag gör lite av varje här i verkstaden.
                    Mig kommer ni förmodligen träffa direkt när ni besöker oss!
                </p>
            </div>

        </div>
    </div>
</div>
</div>

        <hr />
        <footer id="footern">
            <div class="container-fluid">
                <div class="row">
                    <br>
                    <div class="col-md-4">
                        <center>
                            <a href="https://www.facebook.com/Bil2000-%C3%96rnsberg-HB-1466032353685460/"><i class="fa-4x fab fa-facebook-square"></i></a>
                            <br>
                            <h4 class="footertext">Facebook</h4>
                            <p class="footertext">Kolla in oss på Facebook!<br>
                        </center>
                    </div>
                    <div class="col-md-4">
                        <center>
                            <a><i class="fa-4x fas fa-bold"></i></a>
                            <br>
                            <h4 class="footertext">Blocket</h4>
                            <p class="footertext">Du kan kolla in oss på blocket också!<br>
                        </center>
                    </div>
                    <div class="col-md-4">
                        <center>
                            <a href="http://instagram.com/_u/bil2000.ornsberg/"><i class="fa-4x fab fa-instagram"></i></a>
                            <br>
                            <h4 class="footertext">Instagram</h4>
                            <p class="footertext">Följ oss på Instagram för att få notiser när nya bilar kommer in!<br>
                        </center>
                    </div>
                </div>
                <div class="row text-center">
                    <a href="#">Kontakt</a> <p class="footertext">Copyright 2018</p>


    <ul class="nav navbar-nav navbar-right">
        <li><a href="/Identity/Account/Login">Login</a></li>
    </ul>

                </div>
            </div>
        </footer>
    </div>

风格:

.transparent {
      border-width: 0px;
    -webkit-box-shadow: 0px 0px;
    box-shadow: 0px 0px;
    background-color: rgba(0,0,0,0.0);
    background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
    background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
    background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
}

这是正在工作的 plunker:http://plnkr.co/edit/9ihC3bXJ5feLsaZLynd4?p=preview