滚动到页面末尾的联系人部分(id =“ contact”)。该页面无法滚动,可以看到故障。
除Chrome(移动视图)之外,其他任何地方都可以正常工作。在桌面上正常工作。
@import "http://fonts.googleapis.com/css?family=Lato:400,300,100,700,900&subset=latin,latin-ext";
.preloader {
position: fixed;
width: 100%;
height: 100%;
background: #fff;
z-index: 99999
}
.preloader .item {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -130px;
margin-top: -130px
}
html,
body {
font-family: product sans, lato, sans-serif;
font-size: 20px;
-webkit-font-smoothing: subpixel-antialiased!important;
color: #000;
font-weight: 400;
height: 100%
}
a {
text-decoration: none;
outline: none;
font-size: 14px
}
h1 {
font-size: 34px;
color: #fff;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 6px;
line-height: 1.2
}
p {
font-size: 14px;
color: #fff;
font-weight: 300;
letter-spacing: 1px;
margin-top: 40px
}
h1 span {
color: #2fa68e
}
::selection {
background: #2b388f;
color: #fff
}
::-moz-selection {
background: #2b388f;
color: #fff
}
.container {
position: absolute;
width: 100%;
height: 100%
}
.start-page {
position: relative;
width: 100%;
height: 100%;
z-index: 10;
background: url(../img/background/start-page.jpg) silver bottom center fixed no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}
.start-page hr {
color: #fff;
margin-top: 30px;
background-color: #fff;
height: 1px;
width: 106px;
border: 0
}
.start-page .opacity {
position: absolute;
width: 100%;
height: 100%
}
.start-page .content {
position: relative;
width: 700px;
margin: 0 auto;
height: 100%
}
.start-page .content .text {
position: absolute;
text-align: center;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 700px;
height: 520px;
margin-top: 20px
}
.start-page .content .text .logo {
width: 197px;
height: 123px;
margin: 0 auto 50px
}
.start-page .content .text .read-more {
width: 183px;
height: 47px;
margin: 50px auto;
line-height: 47px;
border: 1px solid #fff;
border-radius: 100px;
text-transform: uppercase;
color: #fff;
display: block;
cursor: pointer;
font-size: 14px;
letter-spacing: 1px;
background: 0 0;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in
}
.start-page .content .text .read-more:hover {
color: #fff;
background: #2b388f;
border: 1px solid #2b388f
}
.start-page .content .arrow-down {
position: absolute;
bottom: 110px;
left: 50%;
margin-left: -10px;
width: 21px;
height: 29px;
background: url(../img/arrow-down.png) no-repeat center center;
display: block;
-webkit-animation: bounce-fade 1.2s infinite;
-moz-animation: bounce-fade 1.2s infinite;
-o-animation: bounce-fade 1.2s infinite;
animation: bounce-fade 1.2s infinite
}
@-webkit-keyframes bounce-fade {
0% {
opacity: 0;
bottom: 70px
}
100% {
opacity: 1;
bottom: 35px
}
}
@-moz-keyframes bounce-fade {
0% {
opacity: 0;
bottom: 70px
}
100% {
opacity: 1;
bottom: 35px
}
}
@-o-keyframes bounce-fade {
0% {
opacity: 0;
bottom: 70px
}
100% {
opacity: 1;
bottom: 35px
}
}
@keyframes bounce-fade {
0% {
opacity: 0;
bottom: 70px
}
100% {
opacity: 1;
bottom: 35px
}
}
.menu-media {
position: relative;
width: 100%;
height: 90px;
background: #2b388f;
z-index: 1000;
display: none
}
.menu-media .menu-content {
width: 280px;
position: relative;
margin: 0 auto
}
.menu-media .menu-content .logo {
color: #fff;
font-weight: 700;
font-size: 24px;
width: 200px;
line-height: 90px;
float: left;
list-style: none
}
.menu-media .menu-content .icon {
width: 41px;
height: 23px;
float: right;
line-height: 100px
}
.menu-click {
display: none
}
.menu-click li {
position: relative;
width: 100%;
height: 70px;
color: #333;
font-size: 18px;
text-align: center;
line-height: 70px;
z-index: 1000;
border-bottom: 1px solid #f2f2f2;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.menu-click li:hover {
color: #2b388f
}
.menu {
position: relative;
width: 100%;
height: 60px;
background: #fff;
border-bottom: 1px solid #f2f2f2;
z-index: 1000
}
.menu-content {
width: 900px;
position: relative;
margin: 0 auto
}
.menu-content .logo {
color: #333;
font-weight: 700;
font-size: 24px;
width: 300px;
line-height: 60px;
float: left;
list-style: none
}
.menu-content ul {
width: 500px;
left: 50%;
float: right;
text-align: right;
list-style: none
}
.menu-content li {
display: inline-block;
position: relative
}
.menu-content li a {
color: #333;
font-size: 18px;
display: block;
padding: 0 20px;
line-height: 60px;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.menu-content li.active a {
color: #2b388f
}
.menu-content li a:hover {
color: #2b388f
}
.about-us {
position: relative;
width: 100%;
background: #fff;
z-index: 10
}
.about-us .content {
position: relative;
width: 900px;
margin: 0 auto;
overflow: hidden
}
.about-us h1 {
font-size: 34px;
color: #000;
text-align: center;
margin-top: 120px;
letter-spacing: 6px;
font-weight: 700;
text-transform: uppercase;
line-height: 1.2
}
.about-us hr {
color: #000;
margin-top: 30px;
background-color: #000;
height: 1px;
width: 106px;
border: 0
}
.about-us p.title {
color: #a4a4a4;
margin: 40px auto;
width: auto;
line-height: 26px;
letter-spacing: 0;
font-size: 20px;
font-weight: 300;
text-align: center
}
.about-us h2 {
text-align: center;
margin-top: 50px;
font-size: 26px;
color: #000;
line-height: 1.2;
letter-spacing: 6px;
width: 100%;
position: relative;
font-weight: 400
}
.about-us p {
text-align: center;
font-size: 14px;
width: auto;
margin: 30px auto;
color: #a4a4a4;
line-height: 26px;
letter-spacing: 0;
position: relative;
font-weight: 300
}
.about-us .column-one {
margin-top: 40px;
width: 300px;
float: left;
margin-bottom: 70px;
height: 350px
}
.about-us .column-one .circle-one {
height: 100px;
position: relative;
margin: 0 auto;
border: 2px solid #f0f0f0;
background: url(../img/icons/codexel.png) #fff no-repeat center center;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
width: 100px;
cursor: pointer;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.about-us .column-one .circle-one:hover {
border: 2px solid #2b388f
}
.about-us .column-two {
margin-top: 40px;
width: 300px;
float: left;
margin-bottom: 70px;
height: 350px
}
.about-us .column-two .circle-two {
height: 100px;
position: relative;
margin: 0 auto;
border: 2px solid #f0f0f0;
background: url(../img/icons/media.png) #fff no-repeat center center;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
width: 100px;
cursor: pointer;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.about-us .column-two .circle-two:hover {
border: 2px solid #2b388f
}
.about-us .column-three {
margin-top: 40px;
width: 300px;
float: left;
margin-bottom: 70px;
height: 350px
}
.about-us .column-three .circle-three {
height: 100px;
position: relative;
margin: 0 auto;
border: 2px solid #f0f0f0;
background: url(../img/icons/health.png) #fff no-repeat center center;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
width: 100px;
cursor: pointer;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.about-us .column-three .circle-three:hover {
border: 2px solid #2b388f
}
.portfolio {
position: relative;
width: 100%;
background: #f3f3f3;
z-index: 10
}
.portfolio .portfolio-margin {
position: relative;
width: 900px;
overflow: hidden;
margin: 0 auto
}
.portfolio .portfolio-margin .read-more {
width: 183px;
height: 47px;
position: relative;
margin: 50px auto 100px;
line-height: 47px;
border: 1px solid #333;
border-radius: 100px;
text-transform: uppercase;
text-align: center;
color: #333;
cursor: pointer;
font-size: 14px;
background: 0 0;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in;
letter-spacing: 1px
}
.portfolio .portfolio-margin .read-more:hover {
background: #2b388f;
color: #fff;
border: 1px solid #2b388f
}
.portfolio .portfolio-margin h1 {
font-size: 34px;
color: #000;
text-align: center;
margin-top: 120px;
letter-spacing: 6px;
font-weight: 700;
text-transform: uppercase;
line-height: 1.2
}
.portfolio .portfolio-margin hr {
color: #000;
margin-top: 30px;
background-color: #000;
height: 1px;
width: 106px;
border: 0
}
.grid {
margin-top: 70px;
width: 100%;
position: relative;
margin-bottom: 70px;
overflow: hidden
}
.grid li {
width: 285px;
margin: 0 15px 15px 0;
float: left;
position: relative;
overflow: hidden
}
.grid img {
width: 285px;
float: left;
position: relative
}
.grid .text {
position: absolute;
width: 285px;
height: 100%;
background: #2b388f;
z-index: 2;
opacity: 0;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in
}
.grid .text:hover {
opacity: 1
}
.grid .no-text {
position: absolute;
width: 285px;
height: 100%;
background: #2b388f;
z-index: 2;
opacity: 0;
-webkit-transition: all .6s ease-in;
-moz-transition: all .6s ease-in;
-ms-transition: all .6s ease-in;
-o-transition: all .6s ease-in;
transition: all .6s ease-in
}
.grid .no-text:hover {
opacity: 1
}
.grid p {
font-size: 18px;
text-align: center;
line-height: 26px;
margin-top: 40px;
font-weight: 700;
letter-spacing: 1px;
color: #fff
}
.grid p.description {
font-size: 12px;
width: 300px;
margin-top: 20px;
text-align: center;
line-height: 20px;
font-weight: 400;
color: #fff;
position: relative;
width: 100%
}
.clear {
clear: both
}
.partners {
position: relative;
width: 100%;
z-index: 10;
height: 400px;
background: url(../img/background/partners.jpg) 0 0 fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}
.partners .opacity {
position: absolute;
width: 100%;
height: 400px
}
.partners .content {
position: absolute;
width: 900px;
height: 190px;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0
}
.partners h2 {
color: #fff;
letter-spacing: 1px;
font-size: 32px;
font-weight: 300;
text-align: center
}
.partners .logo {
position: relative;
width: 900px;
overflow: hidden;
margin-top: 50px;
text-align: center
}
.partners .logo img {
opacity: .5;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.partners .logo img:hover {
opacity: 1
}
.contact {
position: relative;
width: 100%;
background: #fff;
z-index: 10;
overflow: hidden;
margin-bottom: 300px
}
.contact .content {
position: relative;
width: 900px;
overflow: hidden;
margin: 60px auto 65px
}
.contact h1 {
font-size: 34px;
color: #000;
text-align: center;
margin-top: 120px;
letter-spacing: 6px;
font-weight: 700;
text-transform: uppercase;
line-height: 1.2
}
.contact hr {
color: #000;
margin-top: 30px;
background-color: #000;
height: 1px;
width: 106px;
border: 0
}
.contact .content .form {
width: 455px;
overflow: hidden;
height: auto;
float: left
}
.contact .content .form .column {
width: 180px;
overflow: hidden;
height: auto;
float: left;
letter-spacing: 1px;
margin-bottom: 30px
}
.contact .content .form .column-2 {
width: 210px;
padding-left: 60px;
overflow: hidden;
height: auto;
float: left;
letter-spacing: 1px;
margin-bottom: 30px
}
.contact .content .form .column-3 {
width: 450px;
overflow: hidden;
height: auto;
float: left;
letter-spacing: 1px
}
.contact .content .contact-text {
width: 405px;
overflow: hidden;
height: auto;
font-weight: 300;
float: left;
padding-left: 40px;
color: #000;
font-size: 14px;
line-height: 26px
}
strong {
font-weight: 700
}
input {
width: 180px;
height: 40px;
background: #f8f7f7;
border-top: 1px solid #333;
border-bottom: 0;
border-left: 0;
border-right: 0;
color: #333;
font-weight: 300;
line-height: 40px;
padding-left: 15px;
font-family: product sans, lato, sans-serif;
font-size: 14px;
margin-bottom: 10px
}
input:focus {
background: #f4f4f4
}
textarea {
width: 420px;
height: 150px;
border-top: 1px solid #333;
border-bottom: 0;
line-height: 20px;
border-left: 0;
border-right: 0;
background: #f8f7f7;
color: #333;
font-weight: 300;
padding: 15px 0 0 15px;
font-family: product sans, lato, sans-serif;
font-size: 14px;
margin-bottom: 10px
}
textarea:focus {
background: #f4f4f4
}
input.submit {
width: 100px;
height: 34px;
float: right;
margin: 20px 10px 0 0;
border: 0;
font-weight: 700;
text-align: right;
background: 0 0;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
background: #2b388f
}
.footer .logo {
position: relative;
width: 58px;
height: 58px;
margin: 0 auto;
padding-top: 50px
}
.footer .menu-footer {
width: 80%;
text-align: center;
margin: 0 auto;
padding-top: 30px;
overflow: hidden;
position: relative
}
.footer .menu-footer a {
line-height: 46px;
padding: 10px;
color: #a4a4a4;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in
}
.footer .menu-footer a:hover {
color: #2b388f
}
.footer .copyright {
width: 80%;
position: relative;
font-weight: 300;
margin: 0 auto;
padding: 30px 0 50px;
text-align: center;
font-size: 14px;
line-height: 36px;
color: #fff
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="preloader" id="preloader" style="display: none;">
<div class="item">
<img src="img/loading.gif">
</div>
</div>
<div class="container">
<section class="start-page parallax-background" id="home" style="background-position: 50% 0px;">
<div class="opacity"></div>
<div class="content">
<div class="text">
<div class="logo"><img style="width: 100%" src="img/logo.png"></div>
<h1>Lorem Ipsum</h1>
<hr>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<a href="#about-us">
<div class="read-more">Read more</div>
</a>
</div>
<div class="arrow-down"></div>
</div>
</section>
<section class="menu-media">
<div class="menu-content">
<div class="logo">Company Name</div>
<div class="icon">
<a href="#"><img src="img/icons/menu-media.png"></a>
</div>
</div>
</section>
<ul class="menu-click">
<a href="#home">
<li href="#home">HOME</li>
</a>
<a href="#about-us">
<li href="#about-us">ABOUT US</li>
</a>
<a href="#portfolio">
<li href="#portfolio">SERVICES</li>
</a>
<a href="#contact">
<li href="#contact">CONTACT</li>
</a>
</ul>
<div id="undefined-sticky-wrapper" class="sticky-wrapper" style="height: 61px;">
<section class="menu">
<div class="menu-content">
<div class="logo">Company Name</div>
<ul id="menu">
<li><a href="#home">HOME</a></li>
<li><a href="#about-us">ABOUT US</a></li>
<li><a href="#portfolio">SERVICES</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</section>
</div>
<section class="about-us" id="about-us">
<div class="content">
<h1>ABOUT US</h1>
<hr>
<p class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="column-one">
<div class="circle-one"></div>
<h2>Lorem Ipsum</h2>
<p>Lorem Ipsum Lorem Ipsum</p>
</div>
<div class="column-two">
<div class="circle-two"></div>
<h2>Lorem Ipsum</h2>
<p>Lorem Ipsum Lorem Ipsum</p>
</div>
<div class="column-three">
<div class="circle-three"></div>
<h2>Lorem Ipsum</h2>
<p>Lorem Ipsum Lorem Ipsum</p>
</div>
</div>
</section>
<div class="clear"></div>
<section class="portfolio" id="portfolio">
<div class="portfolio-margin">
<h1>SERVICES</h1>
<hr>
<ul class="grid" style="position: relative; height: 1229.17px;">
<li style="position: absolute; left: 0px; top: 0px;">
<a href="#">
<img src="img/portfolio/1.png" alt="EVENT HOSTING">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">From event planning to managing custom events for our customers and providing best services timely and efficiently with our skilled and experienced team.</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 204px;">
<a href="#">
<img src="img/portfolio/4.png" alt="STUDENT SERVICES">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Our student recruiting strategy includes a multi-channel approach and a strong agent network on the ground in the target market. Our dedicated team provides students and recruiters/agents with extensive support. Our online marketing builds
brand presence all over.</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 410px;">
<a href="#">
<img src="img/portfolio/2.png" alt="LINKUP">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Lorem Ipsum Lorem Ipsum</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 614px;">
<a href="#">
<img src="img/portfolio/3.png" alt="SOFTWARE">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Lorem Ipsum Lorem Ipsum</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 820px;">
<a href="#">
<img src="img/portfolio/5.png" alt="CONSULTANCY">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Lorem Ipsum Lorem Ipsum</p>
</div>
</a>
</li>
<li style="position: absolute; left: 0px; top: 1024px;">
<a href="#">
<img src="img/portfolio/6.png" alt="LOCAL REPRESENTATION">
<div class="text">
<p>Lorem Ipsum</p>
<p class="description">Lorem Ipsum Lorem Ipsum</p>
</div>
</a>
</li>
</ul>
</div>
</section>
<div class="clear"></div>
<section class="partners parallax-background-partners" id="partners" style="display: none; background-position: 50% 0px;">
<div class="opacity"></div>
<div class="content">
<h2>OUR PARTNERS</h2>
<div class="logo">
<a href="#"><img src="img/logos/alex1.png"></a>
<a href="#"><img src="img/logos/archiq.png"></a>
<a href="#"><img src="img/logos/thomsoon.png"></a>
<a href="#"><img src="img/logos/alex2.png"></a>
</div>
</div>
</section>
<div>
<section class="contact" id="contact">
<h1>Contact</h1>
<hr>
<div class="content">
<div class="form">
<form method="post" action="mail.php" name="contact">
<div class="column">
YOUR NAME<br><br>
<input name="name" id="name" value="">
</div>
<div class="column-2">
YOUR E-MAIL<br><br>
<input name="email" id="email" value="">
</div>
<div class="column-3">
MESSAGE<br><br>
<textarea id="message" name="message"></textarea>
</div>
<div class="button">
<span><input class="submit" id="submit" name="submit" type="submit" value="SEND"></span>
</div>
</form>
</div>
<div class="contact-text">
EMAIL: @@<br> PHONE: +1234<br><br>
<h2><strong>SOCIAL</strong></h2>
Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum
</div>
</div>
</section>
</div>
<div class="clear"></div>
<div>
<section class="footer">
<div class="logo"><img style="width: 100%" src="img/logo-footer.png"></div>
<div class="copyright">© 2018. All Rights Reserved</div>
</section>
</div>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.4.min.js" type="text/javascript"></script>
<script src="js/jquery.sticky.js" type="text/javascript"></script>
<script src="js/masonry.pkgd.min.js" type="text/javascript"></script>
<script src="js/imagesloaded.pkgd.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var $container = $('.grid');
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: 'li'
});
});
});
</script>
<script src="js/jquery.parallax.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</body>