在我的 AngularJS项目中，我在页面顶部有一个搜索栏。当用户搜索某些内容时，结果将显示在搜索栏下方。用户可以向下滚动结果。我想做的是，当用户向下滚动时，搜索栏应该跟随。我找到了 JQuery 代码。但我想要它在 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) {
});
我创建了一个示例 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>