Негладкая прокрутка на телефоне, и навигация не прилипает к экрану, как предполагается - PullRequest
Новая
       34

Негладкая прокрутка на телефоне, и навигация не прилипает к экрану, как предполагается

0 голосов
/ 14 ноября 2018

Я создал веб-сайт, bil2000.com

Когда вы пытаетесь прокрутить его на телефоне, это действительно неудобно и странно.

Кроме того, навигационная панель не останется закрепленной сверхуscreen.

Кто-нибудь может понять, почему это так?

1 Ответ

0 голосов
/ 14 ноября 2018

Обновите ссылки на загрузочную 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%);
}

Вот рабочий плункер: http://plnkr.co/edit/9ihC3bXJ5feLsaZLynd4?p=preview

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...