JQuery и AngularJS маршруты

Question

У меня нет много опыта работы с веб-программированием. Теперь у меня проблема с Angular route и jquery events. На главной странице я показываю Navbar, когда я прокручиваю с помощью этого сценария:

<script type="text/javascript"> 
     $(document).scroll(function() { 
     "use strict"; 
     if($(this).scrollTop() >= $('#slider').height()) 
     { 
      $('#header').addClass('header_fixed animated fadeInDown'); 
      $('.logo').addClass('logo_fix'); 
      $('.nav-collapse').addClass('nav-collapse_margin_top'); 
      $('#header_cotact_icon').hide(); 
      $('#header_navigation').addClass('header_navigation_fixed'); 
      $('.logo').addClass('widd'); 
      $('#wrap').addClass('body-margin-top-20'); 
     } 
     if ($(window).scrollTop() < $('#header').height()) 
      { 
       $('#header').removeClass('header_fixed animatedfadeInDown'); 
       $('.logo').removeClass('logo_fix'); 
       $('#header_cotact_icon').show(); 
       $('#header_navigation').removeClass('header_navigation_fixed'); 
       $('.logo img').removeClass('widd'); 
       $('#wrap').removeClass('body-margin-top-20'); 
      }       


    }); 

</script> 

, а также я реализовать простой маршрут с anuglar. Когда я загружаю другой сайт, этот навигатор видим, потому что инструкция «если» верна. Что делать, если я не хочу использовать вышеприведенный скрипт на загруженной странице? Я думал об угловых контроллерах, но у меня нет идеи, как взять прокрутку positon без jquery.

Answer 1

Возможно, это может вам помочь. Я сокращаю свой навигатор, если пользователь прокручивается вниз (сайт с одной страницей). Я использую это (я скопировал откуда-то, но не нашел его):

index.html:

<div class="" ng-controller="NavbarCtrl"> 
     <span scroll-position="scrollPos"></span> 
     <nav class="navbar navbar-default navbar-fixed-top" ng-class="{'navbar-shrink': scrollPos > 1}"> 
     <div class="container"> 

NavbarCtrl:

angular.module('yourappname') 
    .controller('NavbarCtrl', function($scope) { 
    $scope.scrollPos = 0; 
    }); 

Директива:

angular.module('yourappname') 
    .directive('scrollPosition', function ($window) { 
    return { 
     scope: { 
     scrollPos: "=scrollPosition" 
     }, 
     link: function (scope, element, attrs) { 
     var windowElement = angular.element($window); 
     var handler = function() { 
      scope.scrollPos = windowElement.scrollTop(); 
     } 
     windowElement.on('scroll', scope.$apply.bind(scope, handler)); 
     handler(); 
     } 
    }; 
    }); 

Вот как вы можете справиться с прокруткой в ​​директиве. Надеюсь, это поможет вам.

Answer 2

Если вы хотите принять значение прокрутки в Angular.js внутри контроллера

app.controller('mainCtrl',function($scope,$window){ 
    angular.element($window).bind('scroll',function(){ 
     console.log($window.scrollY); 
     //Rest of your logic 
    }); 
}); 

$window угловато обертка объекта окна браузера. вы можете использовать $window.scrollX и $window.scrollY для выполнения некоторых работ.