滚动AngularJS时如何使div跟随

Question

在我的 AngularJS 项目中，我在页面顶部有一个搜索栏。当用户搜索某些内容时，结果将显示在搜索栏下方。用户可以向下滚动结果。我想要做的是，当用户向下滚动，搜索栏应该跟随。我找到了JQuery code。但我想要它在 AngularJS 中。我怎样才能将它转换为 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>