2016-12-17 12 views
0

私は新しく、私はスクロールで2つのブートストラップ定義のメニュークラスを切り替えようとしています。私が達成しようとしているのは、メニューが、スクロールがページの上にないときに、背景が変更された(ブートストラップCSSで提供されるように)上部に固定されているということです。私はng-classを使ってみましたが、何も起こっていません。 Google Chromeのインスペクタはエラーを報告しません。ここで私はこれまで持っているものです。角度+ブートストラップのスクロールメニューのクラスを変更してください

HTML:ディレクティブで

<html lang="en" ng-app = "cvApp"> 

<head> 

    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <title>CV creation</title> 

    <!-- Bootstrap Core CSS --> 
    <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 

    <!-- Theme CSS --> 
    <link href="assets/bootstrap/css/clean-blog.min.css" rel="stylesheet"> 

    <!-- Custom Fonts --> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bitter:400,700"> 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 

</head> 
<body style="background-color:#FF0000;"> 
<div> 
<nav class = "navbar navbar-default navbar-custom navbar-fixed-top" 
ng-class="{'navbar navbar-default navbar-custom navbar-fixed-top is-fixed is-visible':boolChangeClass}"> 
    <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 


     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" > 
      <ul class="nav navbar-nav navbar-right"> 
       <li> 
        <a href="post.html">Save</a> 
       </li> 
       <li> 
        <a href="contact.html">Export</a> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
</nav> 
</div> 
<div> 
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div> 

<script src="js/angular.min.js?q=123"></script> 
<script src="js/angular-route.min.js?q=123"></script> 
<script src="app/cvapp.js?q=123"></script> 
<script src="app/Controllers/MenuController.js?q=123"></script> 
</body> 
</html> 

モジュール「cvApp」:私は私が間違っているのかについて、いくつかの洞察を好きでお願いします

var cvApp = angular.module('cvApp', []); 

cvApp.directive("scroll", function ($window) { 
    return function(scope, element, attrs) { 
     angular.element($window).bind("scroll", function() { 
      if (this.pageYOffset >= 0) { 
       scope.boolChangeClass = true; 
      } else { 
       scope.boolChangeClass = false; 
      } 
      scope.$apply(); 
     }); 
    }; 
}); 

前進。

答えて

0

あなたが提供したコードでは、どこでもマークアップのディレクティブを使用してあなたを見ることができません。

にあなたのマークアップを変更

<nav scroll class = "navbar navbar-default navbar-custom navbar-fixed-top" 
ng-class="{'navbar navbar-default navbar-custom navbar-fixed-top is-fixed is-visible':boolChangeClass}"> ... 

、それが働くだろう。

http://jsfiddle.net/Lvc0u55v/13347/

+0

:ここ

は、例えば、基本的なフィドル(ブートストラップが含まれていませんが、あなたはクラスが、スクロールに赤から緑にNAVの変化の背景に適用されていることを見ることができます)ですありがとう、私は単純なものを見落としていることを知っていました。 – Shema

関連する問題