如何在滾動時使div跟着AngularJS

Question

在我的AngularJS項目中，我在頁面頂部有一個搜索欄。當用戶搜索到某些東西時，結果將顯示在下面搜索bar.user可以向下滾動結果。 m試圖做的是，當用戶向下滾動時，搜索欄應follow.i發現JQuery code。但我希望它在AngularJS.how我可以將其轉換爲AngularJS或有其他簡單的解決方案嗎？

<div id="p_search"> 
      <div class="input-group"> 
      <input class="form-control input-lg" placeholder="Search Here" ng-model="query.name" /> 
      <select class="form-control input-lg" placeholder="All Cetegories" ng-model="query.category"> 
       <option ng-repeat="option in categories" value="{{option.id}}">{{option.category}}</option> 
       </select> 
      <span class="input-group-btn"> 
       <button class="btn btn-purple btn-lg" type="submit" ><i class="fa fa-search"></i></button> 
      </span> 
      </div> 
     </div> 

我的控制器

myApp.controller('PController', function ($scope, $http, $window, Common, localStorageService) { 

}); 

Answer 1

我已經創建了一個例子plnkr這可能會幫助你有種類似的例子。你可能不得不改變一些風格來將粘性部分定位在某個地方。

angular 
 
    .module('app', []) 
 
    .controller('MainCtrl', MainCtrl); 
 

 
function MainCtrl($scope, $http, $window, $document, $timeout) { 
 
    var ctop = 0; 
 
    var sectionArr = []; 
 

 
    var initEvents = function() { 
 
    //delaying for dom height calculation 
 
    $timeout(function() { 
 
     angular.forEach($scope.blocks, function(data, index) { 
 
     var s = angular.element($document[0].getElementById('block-' + index))[0]; 
 
     sectionArr[index] = { 
 
      top: s.offsetTop, 
 
      height: (s.offsetHeight + s.offsetTop) 
 
     }; 
 
     }); 
 
    }, 200); 
 

 
    //attaching event for scrolling 
 
    angular.element($window).off('scroll').on('scroll', function(ev) { 
 
     var scrollOffsetTop = ev.pageY || ($window.pageYOffset !== undefined) ? $window.pageYOffset : ($document[0].documentElement || $document[0].body.parentNode || $document[0].body).scrollTop; 
 
     var gabBetween = 1; 
 
     angular.forEach(sectionArr, function(data, id) { 
 
     var head = angular.element($document[0].getElementById('header-' + id)); 
 
     if (scrollOffsetTop > data.top && scrollOffsetTop < data.height) { 
 
      if (scrollOffsetTop > (data.height - head[0].clientHeight) && scrollOffsetTop < data.height) { 
 
      head.addClass('absolute') 
 
       .removeClass('fixed') 
 
       .css('top', (data.height - (data.top + head[0].clientHeight) - gabBetween) + 'px'); 
 
      } else { 
 
      head.addClass('fixed') 
 
       .removeClass('absolute') 
 
       .css('top', 0); 
 
      } 
 
     } else { 
 
      head.removeClass('fixed') 
 
      .removeClass('absolute') 
 
      .removeAttr('style'); 
 
     } 
 
     }); 
 
    }); 
 
    }; 
 

 
    //initializing for fetching json 
 
    var init = function() { 
 
    $scope.blocks = [{ 
 
     "header": "Header First", 
 
     "content": "Header First with content............. First Header" 
 
    }, { 
 
     "header": "Header Second", 
 
     "content": "Header Second with content............. Second Header" 
 
    }, { 
 
     "header": "Header Third", 
 
     "content": "Header Third with content............. Third Header" 
 
    }, { 
 
     "header": "Header Fourth", 
 
     "content": "Header Fourth with content............. Fourth Header" 
 
    }, { 
 
     "header": "Header Fifth", 
 
     "content": "Header Fifth with content............. Fifth Header" 
 
    }, { 
 
     "header": "Header Sixth", 
 
     "content": "Header Sixth with content............. Sixth Header" 
 
    }, { 
 
     "header": "Header Seventh", 
 
     "content": "Header Seventh with content............. Seventh Header" 
 
    }]; 
 
    //events attachment occurs after fetching data 
 
    initEvents(); 
 
    }; 
 

 
    //starting 
 
    init(); 
 
}

body { 
 
    background: #efefef; 
 
    overflow-x: hidden; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: 'Ubuntu', verdana; 
 
} 
 

 
section { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 100%; 
 
    min-height: 700px; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
section>header { 
 
    display: block; 
 
    min-height: 75px; 
 
} 
 

 
header>div { 
 
    color: #fff; 
 
    z-index: 1; 
 
    background: #fe001a; 
 
    background: rgba(254, 0, 26, 0.8); 
 
    padding: 5px 25px; 
 
} 
 

 
header>.fixed { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    z-index: 0; 
 
} 
 

 
header>.absolute { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0 
 
} 
 

 
section>p { 
 
    text-align: left; 
 
    padding: 0 25px; 
 
    line-height: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body data-ng-app="app" data-ng-cloak> 
 
    <h2>Sticky Header</h2> 
 
    <p>Checkout example of each section making a sticky header</p> 
 
    <main data-ng-controller="MainCtrl"> 
 
    <section data-ng-repeat="data in blocks" id="block-{{$index}}"> 
 
     <header> 
 
     <div id="header-{{$index}}"> 
 
      <h3>{{data.header}}<span style="float:right">#{{$index+1}}</span></h3> 
 
     </div> 
 
     </header> 
 
     <p data-ng-bind="data.content"></p> 
 
    </section> 
 
    </main> 
 
    <script src="script.js"></script> 
 
</body>