当我向下滚动

Question

我正在创建一个网站，我刚创建了一个标识“Hoodoo”。正如你在我附上的图片上看到的那样，我无法让它变得静止。当我向下滚动徽标移动时，我想让它静止。 我附上2张图片和我的CSS / HTML代码[！[

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,800,700);
@import url("normalize.css");
@import url("grid.css");
@import url("modal.css");

*,
*:before,
*:after  {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html,
body {
	height: 100%;
	background: #fff;
}

html {
	font-size: 16px;
}

@media ( min-width: 768px ) {

	html {
		font-size: 18px;
	}

}

@media ( min-width: 1200px ) {


	html {
		font-size: 20px;
	}

}


@media ( min-width: 1350px ) {
	html {
		font-size: 22px;
	}

}

body,
input,
select,
button {
	font-family: 'Open Sans', sans-serif;
	font-size: 22px;
	font-size: 1rem;
	line-height: 1.36;
	color: #86888b;
	letter-spacing: -0.035em;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4 {
	margin: 0;
	color: #2a2a2a;
}

h1,
.h1,
h2,
.h2 {
	
}

h1,
.h1 {
	font-weight: 700;
	text-transform: uppercase;
}

h2,
.h2 {
	font-weight: 300;
}

h1,
.h1,
h2,
.h2 {
	font-size: 44px;
	font-size: 2rem;
	letter-spacing: 0;
	line-height: 1;
}

@media ( min-width: 768px ) {
	h1,
	.h1 {	
		font-size: 72px;
		font-size: 3.273rem;
		line-height: 0.8334;
	}
}

	h1.scaled {
		font-size: 28px;
		line-height: 1;
	}

@media ( min-width: 480px ) {

	h1.scaled {
		font-size: 48px;
		font-size: 2.182rem;

		line-height: 1.042;
	}
	
}

@media ( min-width: 768px ) {
	h2,
	.h2 {
		font-weight: 300;
		font-size: 54px;
		font-size: 2.455rem;
		line-height: 1;
	}
	.h2 .mb-20{
		font-size: 49px!important;
	}
}

h3,
.h3,
h4,
.h4 {
	text-transform: uppercase;
	font-size: 22px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.09;
	letter-spacing: inherit;
}

h4,
.h4 {
	font-size: 14px;
}

@media ( min-width: 768px ) {
	h3,
	.h3 {
		font-size: 18px;
		font-size: 0.818rem;
	}
	
	h4,
	.h4	{
		font-size: 16px;
	}
}

p {
	margin: 0;
}

ul {
	margin: 0;
	list-style-type: square;
	padding: 0 0 0 20px;
}

nav ul {
	padding: 0;
	line-height: 1.8;
}


@media ( max-width: 767px ) {
	ul {
		padding-left: 0;
		list-style-position: inside;
	}

}

img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: auto;
}

iframe {
	border: 0;
}

hr {
	border: 0;
	height: 1px;
	background: #dfe0e1;
}

a {
	color: inherit;
	text-decoration: none;
	-webkit-transition: color .2s;
	transition: color .2s;
}

a:focus,
a:active {
	outline: none;
}

time {
	font-size: 14px;
}

input {
	border-radius: 0;
}

input:focus {
	outline: none;
}


input.text {
	-webkit-appearance: none;
	font-size: 1rem;
	line-height: 1;
	border: 1px solid #e5e5e5;
	width: 220px;
	padding: 1.14rem .6rem;
}

select {
	border: 1px solid #e5e5e5;
}

.no-js label {
	display: none;
}

@media ( min-width: 768px ) {
	input.text,
	input.error + label.error	{
		width: 270px;
		width: 12.273em;
		font-size: 1.091rem;
		padding: 26px;
		padding: 1.14rem;
	}

}

input.text:focus {
	border-color: #dfe0e1;
}

.submit {
	color: #fff;
	background: #42A5F5;
	border: 0;
	-webkit-appearance: none;
	text-transform: uppercase;
	font-size: 12px;
}

@media ( min-width: 768px ) {
	.submit {
		font-size: 0.727rem;
	}

}

::-webkit-input-placeholder {
   color: #cecece;
}

::-moz-placeholder { 
   opacity: 1;
	color: #cecece;   
}

:-ms-input-placeholder {  
   color: #cecece;  
}

::placeholder {
	color: #cecece;
}



.heading {
	white-space: nowrap;
}
	
.heading span {
	display: block;
}

.heading-bordered {
	position: relative;
	padding-bottom: 20px;
}

.heading-bordered:before {
	position: absolute;
	
	content: "";
}
	
.heading-bordered:before {
	left: 0;
	right: 0;
	bottom: 0;
	width: 38px;
	height: 5px;
	background: #42A5F5;
	margin: auto;
}


@media ( min-width: 768px ) {

	.heading-bordered {
		padding-bottom: 26px; 
	}
	
	.heading-bordered:before {
		right: auto;
		height: 5px;
		width: 1em;
		left: 3px;
	}

}

@media ( min-width: 768px ) {

	.indent {
		margin-left: 50px;
	}

	.outdent {
		margin-left: -50px;
	}

}

	
@media ( min-width: 768px ) and ( max-width: 1380px ) {
		.xl-heading-outdent + .indent-pair {
			margin-left: 3px;
			margin-top: 20px;
		}
}

@media ( min-width: 1380px ) {

	.heading-bordered {
		padding-left: 50px;
		padding-bottom: 0;
	}

	.heading-bordered:before {
		top: 0;
		bottom: 0;
		right: auto;
		height: 90%;
		height: calc(100% - 0.2em);
		width: 5px;
		background: #42A5F5;
	}
	
	.scaled.heading-bordered:before {
		right: auto;

		height: 95%;
		height: calc(100% - 0.24em);
		width: 5px;
	}

	.xl-heading-outdent {
		margin-left: -50px;
	}

}

@media ( min-width: 992px ) {

	.md-heading-outdent {
		margin-left: -50px;
	}
	
	.md-heading-bordered {
		padding-left: 50px;
		padding-bottom: 0;
	}

	.md-heading-bordered:before {
		top: .273rem;
		right: auto;
		bottom: auto;
		height: 100%;
		height: calc(100% - 0.5rem);
		width: 5px;
		background: #42A5F5;
	}
	
	.scaled.md-heading-bordered:before {
		top: .3rem;
		right: auto;
		bottom: auto;
		height: 100%;
		height: calc(100% - 0.6rem);
		width: 5px;
	}

}

@media ( min-width: 768px ) {

	.sm-heading-outdent {
		margin-left: -50px;
	}
	
	.sm-heading-bordered {
		padding-left: 50px;
		padding-bottom: 0;
	}

	.sm-heading-bordered:before {
		top: .273rem;
		right: auto;
		bottom: auto;
		height: 100%;
		height: calc(100% - 0.5rem);
		width: 5px;
		background: #42A5F5;
	}
	
	.scaled.sm-heading-bordered:before {
		top: .3rem;
		right: auto;
		bottom: auto;
		height: 100%;
		height: calc(100% - 0.6rem);
		width: 5px;
	}

}

@media ( max-width: 767px ) {
	.sm-heading-bordered:before {
		height: 5px;
	}

}

.heading-bordered.bordered-above {
	padding: 0;

	margin-top: 20px;

	text-align: center;

	white-space: normal;
}

.heading-bordered.bordered-above:before {
	bottom: auto;
	top: -20px;
	left: 0;
	right: 0;

	width: 38px;
	height: 5px;
}

.btn {
	display: inline-block;
	line-height: 1;
	font-size: 14px;
	letter-spacing: -0.035em;
	background: #fff;
	color: #2a2a2a;
	cursor: pointer;
	padding: 17px 20px;
	position: relative;
	z-index: 2;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

.btn:hover {
	color: #42A5F5;
}

@media ( min-width: 768px ) {
	.btn {
		font-size: .909rem;
		padding: 25px 50px;
		padding: 1.136rem 1.364rem;
		text-align: center;
	}

}

/* padding before icon */
.btn-prepend,
.btn-append,
.dropdown-prepend {
	position: relative;
	display: inline-block;
}

/* PREPENDED first */
.btn-prepend {
	padding-left: 40px;
	text-align: left;
}

/* item that is prepended */
.btn-prepend .prepended {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	width: 40px;
}

@media ( min-width: 768px ) {
	
	.btn-prepend {
		padding-left: 60px;
		padding-left: 2.727rem;
		text-align: left;
	}
	
	.btn-prepend .prepended {
		width: 50px;
	}
	
}

@media ( min-width: 1200px ) {
	.btn-prepend {
		padding-left: 64px;
		padding-left: 2.909rem;
	}
	
	.btn-prepend .prepended {
		width: 60px;
	}

}

@media ( min-width: 1350px ) {
	.btn-prepend {
		padding-left: 72px;
		padding-left: 3.318rem;
	}
	
	.btn-prepend .prepended {
		width: 67px;
	}

}

/* APPENDED TO */

.btn-append {
	padding-right: 60px;
}

.btn-append .appended {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	width: 60px;
	background-color: #42A5F5;
}

.btn-append  .submit.appended {
	top: 0;
	right: 1px;
	bottom: -1px;
}

@media ( min-width: 768px ) {

	.btn-append  {
		padding-right: 80px;
		padding-right: 3.636rem;
	}
	
	.btn-append .appended {
		width: 80px;
		width: 3.636rem;
	}

}

/* orange bg appended btn */

.prepend-hilite  {
	padding-left: 70px;
}

.prepend-hilite .prepended {
	width: 55px;
}

.prepend-hilite .prepended {
	background-color: #42A5F5;
}

@media ( min-width: 992px ) {
	
	.prepend-hilite {
		padding-left: 90px;
	}
	
	
	.prepend-hilite .prepended {
		width: 70px;
	}

}

@media ( min-width: 1350px ) {

	.prepend-hilite  {
		width: 288px;
		padding-left: 80px;
		text-align: center;
		padding-right: 0;
	}
	
	.prepend-hilite .prepended {
		width: 80px;
	}

}

/* other btn stuff */

.btn-shadow {
	box-shadow: 0 10px 20px rgba(0,0,0,.09);
}

.dropdown-prepend {
	padding-left: 75px;
	border-bottom: 1px solid #e5e5e5;
}


.dropdown-prepend.error {
	/* border-bottom: 1px solid #ff9001; */
}

.dropdown-prepend .text,
.dropdown-prepend .dropdown {
	border-bottom: 0;
}

  

.icon-append-check {
	background-size: 24px;


.header {
	position: relative;
	padding: 20px 0;
	box-shadow: 0 0 113px rgba(0,0,0,.04);
	z-index: 10;
}

@media ( min-width: 768px ) {
	.header {
		padding: 50px 0;
		padding: 2.273rem 0;
	}	

}

.header .nav {
	font-size: 13px;
	font-weight: 700;
	line-height: 1;	
	text-transform: uppercase;
	color: #1b1b1b;
	position: absolute;
	top: 50%;
	margin-top: -.9em;
	right: 15px;
}

@media ( min-width: 768px ) {

	.header .nav {
		font-size: 14px;
		margin-top: -1em;
	}

}

@media ( min-width: 1200px ) {

	.header .nav {
		font-size: 16px;
	}

}

.header .nav li {
	display: inline-block;
	margin-left: 1.5em;
}

@media ( max-width: 420px ) {
	.header .nav li:first-child {
		display: none;
	}

}




.header .nav .active {
	color: #42A5F5;
}

.level {
	position: relative;
	border-bottom: 1px solid #dfe0e1;
	overflow: hidden;
	padding: 50px 0 30px;
	text-align: center;
}

/* .level:not(.level-hero) {
	max-width: 1690px;
	margin-left: auto;
	margin-right: auto;
} */

.level-outro {
	padding-bottom: 60px;
	overflow: visible;
}

@media ( min-width: 768px ) {
	.level {
		padding: 140px 0 160px;
		padding: 6.364rem 0 7.273rem;
		text-align: left;
	}
	
	.level-narrow {
		padding: 80px 0;
	}
	
	.level-outro {
		padding-bottom: 6.364rem;
	}

}


.contact,
.contact * {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

.contact .text {
	width: 130px;
}

@media ( min-width: 768px ) {
	
	.contact .text {
		width: 220px;
	}

}

.modal .dropdown-prepend {
	margin-bottom: 5rem;
}

.footer {
	padding: 40px;
	font-size: 12px;
	line-height: 1;
	color: #aeaeae;
	letter-spacing: 0;
}

.footer p {
	margin: .6rem 0;
}

.fmenu {
	font-size: 22px;
	font-weight: 700;
}

.fmenu a {
	color: #2f2f2f
}

.footer a {
	text-decoration: underline;
	margin: 0 .3rem;
}

@media ( max-width: 568px ) {
	.footer .list-inline {
		line-height: 1.5;
	}

}

.footer a:hover {
	text-decoration: none;
}

@media ( min-width: 992px ) {
	.footer {
		font-size: 14px;
	}

}

.level-hero {
	background-position: 50% 50%;
	background-color: #5c6164;
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;
	height: 100%;
	padding: 0;
	border: 0;
	text-align: left;
}

.level-hero .btn {
	min-width: 110px;
}

@media ( min-width: 768px ) {

	.level-hero.hero-home .btn {
		min-width: 153px;
		text-align: left;
	}

}

@media ( min-width: 1350px ) {

	.level-hero .btn {
		min-width: 200px;
	}

}

.hero-after {
	position: relative;

	height: 1px;
	margin: -1px auto 0;

	z-index: 0;
}

.hero-after:after {
	content: "";
	width: 100%;
	height: 100%;
	background: #dfe0e0;
}

.hint-arrow {
	-webkit-transform: translate3d(0,100px,0);
	transform: translate3d(0,100px,0);
	opacity: .6;
	width: 40px; 
	height: 40px; 
	background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2270%22%20height%3D%2270%22%20viewBox%3D%220%200%2070%2070%22%3E%0D%0A%09%3Cpath%20fill%3D%22%23fff%22%20opacity%3D%220.21%22%20d%3D%22M35%2C2c18.196%2C0%2C33%2C14.804%2C33%2C33S53.196%2C68%2C35%2C68S2%2C53.196%2C2%2C35S16.804%2C2%2C35%2C2%20M35%2C0C15.67%2C0%2C0%2C15.67%2C0%2C35%20s15.67%2C35%2C35%2C35s35-15.67%2C35-35S54.33%2C0%2C35%2C0L35%2C0z%22/%3E%0D%0A%09%3Cpolygon%20fill-rule%3D%22evenodd%22%20fill%3D%22%23dedede%22%20points%3D%2245.107%2C34.715%2044.08%2C33%2035%2C38.455%2025.921%2C33%2024.893%2C34.715%2034.879%2C40.715%2035%2C40.513%2035.121%2C40.715%22/%3E%0D%0A%3C/svg%3E%0D%0A') 0 0 no-repeat;
	background-size: 100%;	
	position: absolute; 
	bottom: 30px; 
	left: 0; 
	right: 0;
	margin: auto;
	-webkit-transition: -webkit-transform .4s cubic-bezier(0.200, -0.020, 0.015, 0.990), opacity .3s ease-out;
	transition: transform .4s cubic-bezier(0.200, -0.020, 0.015, 0.990), opacity .3s ease-out;
	cursor: pointer;
	z-index: 4;
}

.ueno-no-csstransitions .hint-arrow {
	display: none;
}

@media ( min-width: 768px ) {
	.hint-arrow {
		width: 70px; 
		height: 70px;
		background-size: auto;		
	}

}

.active-state .hint-arrow {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	opacity: 1;
}

/* white bg hint arrow */

.hint-arrow-contrast {
	background: #fff url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2015.1.0%2C%20SVG%20Export%20Plug-In%20%20--%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%20%5B%0D%0A%09%3C%21ENTITY%20ns_flows%20%22http%3A//ns.adobe.com/Flows/1.0/%22%3E%0D%0A%5D%3E%0D%0A%3Csvg%20version%3D%221.1%22%0D%0A%09%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20xmlns%3Aa%3D%22http%3A//ns.adobe.com/AdobeSVGViewerExtensions/3.0/%22%0D%0A%09%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2222px%22%20height%3D%228px%22%20viewBox%3D%220%200%2022%208%22%20enable-background%3D%22new%200%200%2022%208%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cdefs%3E%0D%0A%3C/defs%3E%0D%0A%3Cg%3E%0D%0A%09%3Cg%3E%0D%0A%09%09%3Cpolygon%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%232A2A2A%22%20points%3D%2222%2C1.778%2020.923%2C0%2011%2C5.901%201.077%2C0%200%2C1.778%2010.461%2C8%20%0D%0A%09%09%0911%2C7.111%2011.539%2C8%20%09%09%22/%3E%0D%0A%09%3C/g%3E%0D%0A%3C/g%3E%0D%0A%3C/svg%3E%0D%0A') 50% 55% no-repeat;
	border-radius: 100px;
	-webkit-box-shadow: 10px 0 20px rgba(0,0,0,0.09);
	box-shadow: 0 10px 20px rgba(0,0,0,0.09);
	background-size: 14px 5px;
	bottom: auto;
	top: 100%;
	margin-top: -50px;
	opacity: 0;
}

@media ( min-width: 768px ) {
	.hint-arrow-contrast {
		background-size: 22px 8px;
		margin-top: -85px;
	}

}

.active-state .hint-arrow-contrast {
	opacity: 1;
}

/* home hero specific pages */

.hero-home {
	background-image: url("../img/bg-default.jpg");
	background-color: #523129;
	min-height: 400px;
}

.hero-home h1 {
	margin-top: 2.727rem;
}

.hero-home .brand {
	position: absolute;
	top: 20px;
	left: 15px;
}


@media ( min-width: 1200px ) {
	.hero-home {
		background-color: #5c6164;
		background-image: url("../img/frame-1.jpg");
	}

}

.hero-home .container:first-child {
	position: relative;
	z-index: 3;
}

.hero-home .btn-prepend {
	white-space: nowrap;
}

.hero-home .btn-prepend  + .btn-prepend  {
	display: block;
	margin-top: 5px;
	max-width: 128px;
}

@media (min-width: 400px ) and (max-width: 767px ) and ( min-height: 390px ), 
( min-width: 768px ) and ( min-height: 510px ), ( min-width: 992px ) {
	
	.hero-home .btn-prepend  + .btn-prepend  {
		display: inline-block;
		margin-left: 4px;
		max-width: none;
	}

}

@media ( max-width: 767px ) {
	.ueno-iphone-safari .hero-home [data-toggle="modal"] {
		display: none;
	}
}

@media (min-width: 768px ) and ( min-height: 510px ) {

	.hero-home .btn-prepend  + .btn-prepend  {
		display: inline-block;
		margin-left: .727rem;
		max-width: none;
	}

}

.iphone-inline {
	display: none;
}

.iphone-mobile {
	height: 200px; 
	width: 100%;
	background: url("../img/v2/iphone6.min.png") 6% 0 no-repeat;
	background-size: auto 100%; 
}

@media ( min-width: 768px ) {

	.iphone-mobile  {
		display: none;
	}
	
	.iphone-inline {
		display: block;
	}
	
	.level-img-right {
		padding: 0;
	}

	.level-img-right > .container {
		position: relative;
		margin-top: 2.727rem;
		padding: 40px 15px 220px;
		padding: 1.818rem 15px 10rem;
		background: transparent url("../img/v2/iphone-bg-sm.min.png") 100% 100% no-repeat;
		background-size: auto 90%;
		
	}
}

.level-img-right {
	padding-bottom: 0;
}

.img-right-sprite {
	display: none;
	position: absolute; 
	right: -100px; 
	bottom: 210; 
	width: 44.31818181818182%; 
	height: 100%;
}

.logo {
	position: fixed; 
	left: 40px; 
	top:0px;
	width: 10%; 
	height: 20%;

}

<!DOCTYPE html>
<!--[if lte IE 9]><html class="no-js is-ie"><![endif]-->
<!--[if gt IE 8]><!--><html class=no-js><!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta name="description" content="BlackTie Free Bootstrap Theme">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	

	<title>Hoodoo</title>
	<link rel=stylesheet href="css/main.css">
	<!--[if lte IE 8]>
	<link rel=stylesheet href="css/ie.css">
	<![endif]-->
		<script src="js/vendor/modernizr.js"></script>

		<script src="js/vendor/respond.min.js"></script>

</head>

<body>
	<div class="level level-hero hero-home has-hint">
		
 		
		<div class="hero-overlay visible-lg"></div>

		<video loop id=bg-video class=fullscreen-video>
			<source src="http://alvarez.is/bt/appi.webm" type="video/webm">
			<source src="http://alvarez.is/bt/appi.mp4" type="video/mp4">

		</video>

		<div class="container full-height">
			<div class=v-align-parent>
				<div class=v-center>
					<div class="row">
						<img class=logo src="img/logo.png" alt>
						<div class="col-xs-10 col-sm-6">
							<h1 class="mb-10 heading">Your Product. <span>Reinvented.</span></h1>
							<div class="subheading mb-20">Get your product right on and finally see how your customers  engage  </div>
						</div>
					</div>
					<div>
						<a class="btn btn-prepend btn-launch-video" href="#">
							<i class="prepended icon-append-play"></i>Watch Video
						</a>
						<a class="btn btn-prepend" href="#">
							<i class="prepended icon-append-iphone"></i>Learn More
						</a>
					</div>
				</div>
			</div>

			<div class=hint-arrow></div>
		</div>
	</div>
	<div class=level>

		<div class="container mb-100 xs-mb-40">
			<div class=row>
				<div class="col-sm-5 col-md-4 col-md-offset-2 col-sm-offset-1">
					<h1 class="mb-10 xs-mb-10 heading color-dark heading-bordered">Your App<br class=hidden-xs> Success</h1>
				</div>
				<div class="col-sm-5 col-sm-offset-1">
					<h2 class="w-300 color-dark mb-10 xs-mb-10">Product managers on demand</h2>
					<p class="xs-mw">Let's solve your startup product problems.If your product is not working but you don't know why we are here to help you build the right feautre for the right audience. We will help you design, create and build until you are satisfied.
				</div>
			</div>
		</div>

		<img src="img/v2/iphone6.min.png" alt class="mb-80 hidden-xs iphone-inline">



		<div class=container>
			<div class="row mb-90 xs-mb-0">

				<div class="col-sm-1 col-sm-offset-2">
					<i class="icon icon-check"></i>
				</div>
				<div class="col-sm-3">
					<h3 class="mb-15">One week</h3>
					<p class="smaller xs-mb-40 xs-mw">You can hire us for one week so we deliver a feedback on a specific feature
				</div>

				<div class="col-sm-1">
					<i class="icon icon-calendar"></i>
				</div>
				<div class="col-sm-3">
					<h3 class="mb-15">Startups</h3>
					<p class="smaller xs-mb-40 xs-mw">We take care of making your product the best one in the market
				</div>

			</div>

			<div class=row>

				<div class="col-sm-1 col-sm-offset-2">
					<i class="icon icon-user"></i>
				</div>
				<div class="col-sm-3">
					<h3 class="mb-15">Corporations</h3>
					<p class="smaller xs-mb-40 xs-mw">Your dream come true. Get entrepreneurs and some fresh airfor a week to bring your product to the next level
				</div>

				<div class="col-sm-1">
					<i class="icon icon-clock"></i>
				</div>
				<div class="col-sm-3">
					<h3 class="mb-15">Fast, efficient</h3>
					<p class="smaller xs-mb-40 xs-mw">We set some goals to attain, expectations and we work hard! Next week you can have your Product right!
				</div>

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

	<div class="level level-img-right">

		<div class="container xs-mb-30">
			<img class=img-right-sprite src="img/v2/iphone-bg-lg.min.png" alt>
			<div class="row mb-60 xs-mb-20">
				<div class="col-sm-6 col-lg-offset-1 col-lg-5">
					<h1 class="mb-20 xs-mb-10 heading color-dark heading-bordered xl-heading-outdent">Details</h1>
					<h2 class="w-300 color-dark mb-10">All what you want in your phone</h2>
					<p class=xs-mw>Now with Appi you have it on your fingertips.
				</div>
			</div>

		<div class="visible-xs xs-mw xs-mb-40">
			<img src="img/v2/iphone-mobile.min.png" alt>
		</div>

			<div class="row mb-60 xs-mb-20">
				<div class="col-sm-1 col-lg-offset-1">
					<i class="icon icon-globe"></i>
				</div>
				<div class="col-sm-4 col-md-3">
					<h3 class="mb-15">Worldwide</h3>
					<p class="smaller xs-mw">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
				</div>
			</div>

			<div class="row mb-60 xs-mb-20">
				<div class="col-sm-1 col-lg-offset-1">
					<i class="icon icon-eye"></i>
				</div>
				<div class="col-sm-4 col-md-3">
					<h3 class="mb-15">Privacy</h3>
					<p class="smaller xs-mw">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
				</div>
			</div>
			<div class="row">
				<div class="col-sm-1 col-lg-offset-1">
					<i class="icon icon-bubble"></i>
				</div>
				<div class="col-sm-4 col-md-3">
					<h3 class="mb-15">Social Integration</h3>
					<p class="smaller xs-mw">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
				</div>
			</div>
		</div>

	</div>

	<div class="level level-outro text-center">
		<div class=container>

			<form class=contact method=get action="/" accept-charset="UTF-8">

				<div class="h2 mb-20">Contact us<br class=visible-xs-block> App Store</div>
				<p class="mb-35">Enter your email and we will send you more information

				<div class="btn-append dropdown-prepend">

					<div class=dropdown>
						<button class="btn btn-default dropdown-toggle" type="button" id="f1" data-toggle="dropdown" aria-expanded="true">
						<span id=option-value-f1>US (+1)</span>
							<span class="caret"></span>
						</button>
						<ul class="dropdown-menu" data-displaytarget="#option-value-f1" data-inputtarget=".f1-target" role="menu" aria-labelledby="f1">
							<li role="presentation" data-placeholder="US ( +1)" data-value="1" class=disabled>US ( +1)</li>
						</ul>
					</div>

					<!-- actual select here -->
					<select name="country-code" class="sr-only f1-target countryCode">
						<option selected value="1">Email</option>
					</select>

					<input type=tel class="text email" name="email" placeholder="email" required>

					<input type=submit class="submit appended" value=submit>

				</div>

			</form>
		</div>


	</div>
	<div class="footer text-center">
	<p class="fmenu">
		<a href="index.html">HOME</a> | <a href="about.html">ABOUT</a>
	</p>

	</div>	

	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.1.min.js"><\/script>')</script>

	<script src="js/bootstrap.min.js"></script>
	<script src="js/dropdown.js"></script>
	<script src="js/modal.js"></script>
	<script src="js/main.js"></script>
	<!-- //-end- concat_js -->


	

</body>
</html>

Answer 1

编辑您的css文件并将.logo属性更改为：

.logo {
    width: 10%; 
    height: 20%;    
}

您的徽标将position: static;而不是position: fixed;。