1
Я сделал сайт с одной страницей с угловым JS. Есть пара страниц, которые связаны маршрутизацией, и содержимое передается полноэкранному ng-view. для каждого маршрута я применяю новый класс к ng-view для изменения фона страницы. Это прекрасно работает, и фон фиксируется так, как ожидалось, но как только я прокручу страницу, черный фон начнет притирать изображение. вот скриншоты:фон ng-view перекрывается
, когда я не прокручиваются, вы можете увидеть фон нетронутым и выглядит идеально:
, как только я прокрутки, черный фон начинает более притирки форму изображения ниже :
index.html:
<!DOCTYPE html>
<html ng-app="mainApp">
<head lang="en">
<meta charset="utf-8">
<title>Playlife Project</title>
<!-- styles -->
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- scripts -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<header>
<div id="logo"><a href="#/"><img src="img/logo.png" class="logo img-responsive" /></a></div>
<div id="nav" class="menu">
<ul>
<li class="menu-item"><a href="#/podcast">Podcast</a></li>
<li class="menu-item"><a href="#/record">Record Label</a></li>
<!--<li class="menu-item"><a href="#/live">Live Act</a></li>-->
<li class="menu-item"><a href="#/about">About</a></li>
<li class="menu-item"><a href="#/contact">Get In Touch</a></li>
<li class="menu-item"><a href="#">Shop</a></li>
<li class="mobile-menu-item"><i class="fa fa-2x fa-bars"></i></li>
</ul>
</div>
<div id="drawer" class="mobile-menu">
<ul>
<li><a href="#/podcast">Podcast</a></li>
<li><a href="#/record">Record Label</a></li>
<li><a href="#/live">Live Act</a></li>
<li><a href="#/contact">Get In Touch</a></li>
</ul>
</div>
</header>
<div ng-controller="homeController" class="{{pageClass}}" ng-view></div>
<footer>
<div id="subscribe">
<form name="newsletter">
<input class="inp" type="email" name="email" id="email" placeholder="Be a part of the journey">
<input class="button" type="button" name="button" id="button" value="GET ON BOARD">
</form>
</div>
<div id="social">
<ul class="social-icons">
<li><a href="" target="_blank"><img src="img/facebook.png" /></a></li>
<li><a href="" target="_blank"><img src="img/soundcloud.png" /></a></li>
<li><a href="" target="_blank"><img src="img/twitter.png" /></a></li>
<li><a href="" target="_blank"><img src="img/youtube.png" /></a></li>
<li><a href="" target="_blank"><img src="img/instagram.png" /></a></li>
</ul>
</div>
</footer>
<script type="text/javascript" src="script/main.js"></script>
<script type="text/javascript" src="script/script.js"></script>
</body>
</html>
часть моей таблицы стилей concered с проблемой (SCSS):
/* basic reset */
*{
margin:0;
padding:0;
font-size: 100%;
}
body{
background: black;
}
a:link, a:visited, a:hover, a:active{
text-decoration: none;
color: #f9f9f9;
}
ul{
list-style: none;
}
/* mixins */
@mixin background-size($size) {
-webkit-background-size: $size;
-moz-background-size: $size;
-o-background-size: $size;
background-size: $size;
}
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
/* background */
.page{
position:absolute;
bottom:0;
top:0;
width:100%;
z-index: 1;
}
.page-home {
background: url("http://playlifeproject.com/img/bg.jpg") no-repeat center top fixed;
@include background-size(cover);
}
.page-podcast {
background: url("../img/podcast.jpg") no-repeat center center fixed;
@include background-size(cover);
}
.page-record {
background: url("../img/record.jpg") no-repeat center center fixed;
@include background-size(cover);
}
.page-about {
background: black;
}
/*
.page-live {
background: url("../img/live.jpg") no-repeat center center fixed;
@include background-size(cover);
}
*/
.page-contact {
background: url("../img/contact.jpg") no-repeat center center fixed;
@include background-size(cover);
}
отделан main.js:
var mainApp = angular.module("mainApp", ['ngRoute', 'ngAnimate']);
/* page routing */
mainApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: 'homeController'
})
.when('/podcast', {
templateUrl: 'views/podcast.html',
controller: 'podcastController'
})
.when('/radio/:id', {
templateUrl: 'views/radio.html',
controller: 'radioController'
})
.when('/record', {
templateUrl: 'views/record.html',
controller: 'recordController'
})
.when('/album/:id', {
templateUrl: 'views/album.html',
controller: 'albumController'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'aboutController'
})
.when('/contact', {
templateUrl: 'views/contact.html',
controller: 'contactController'
})
.otherwise({
redirectTo: '/'
});
})
/* home controller */
.controller('homeController', function($scope, $timeout) {
$scope.pageClass = 'page page-home';
})
.controller('podcastController', ['$scope', 'podcast', function($scope, podcast) {
$scope.pageClass = 'page page-podcast';
}])
.controller('radioController', ['$scope', '$routeParams', 'podcast', function($scope, $routeParams, podcast) {
$scope.pageClass = 'page page-podcast';
}])
.controller('recordController', [ '$scope', 'record', function($scope, record) {
$scope.pageClass = 'page page-record';
}])
.controller('albumController',['$scope','$routeParams', 'record', function($scope, $routeParams, record){
$scope.pageClass = 'page page-record';
}])
.controller('aboutController', function($scope) {
$scope.pageClass = 'page-about';
})
.controller('contactController', function($scope) {
$scope.pageClass = 'page page-contact';
});
Ваша помощь очень ценится!
sidenote: вы должны использовать '1.11.0/jquery.min.js' вместо' 1.10.2/jquery.min.js', иначе ваша консоль может генерировать * «Использование // @ для указания sourceMappingURL pragmas устарело Используйте // # вместо "*. –
@ Fred-ii- Спасибо, что указали, что я это изменим! –
добро пожаловать. Я только начал изучать Угловые и имел небольшую проблему. Когда я проверил свою консоль, я увидел это сообщение. Хотя он не нарушит ваш код, он бросит это раздражающее предупреждение. –