我正在尝试仅使用 Angular 或 vanilla javascript 来实现 AngularJs 粘性 header 概念。 (没有 jQuery 依赖)。我尝试创建这个指令,但我遗漏了一些东西......请提供一些建议?
JavaScript
angular.module('app', [])
.directive('stickyHeader', function ($window) {
return {
restrict: 'AE',
link: function (scope, element, attrs) {
var header = angular.element(element);
var clone = header[0].before(header.clone().addClass("clone"));
angular.element($window).bind("scroll", function () {
var fromTop = $window.pageYOffset;
var body = angular.element(document).find('body');
body.toggleClass('down', (fromTop > 400));
});
console.log('$window', $window);
console.log('element', element);
console.log('header', header);
}
};
})
.controller('Main', function ($scope) {
$scope.angular = angular;
});
最佳答案
<div>above content</div>
<div style="position: sticky;top: 0px;z-index: 1;background-color: red">header</div>
<div style="height: 200px">content-1</div>
<div>content-2</div>
尝试添加以下代码。
style="position: sticky;top: 0px;z-index: 1;
关于javascript - 如何在 Angular Js 中制作粘性标题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41608466/