如何在Angular Js中制作一个粘性标题?

时间:2017-01-12 08:38:56

标签: javascript angularjs

我正在尝试仅使用angular或vanilla javascript来实现AngularJs粘性标头概念。 (没有jQuery依赖)。我试图创建这个指令,但我遗漏了一些东西......请一些建议吗?

Working updated code

的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;
});

4 个答案:

答案 0 :(得分:2)

<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;

答案 1 :(得分:0)

尝试在(fromTop> 400)之后将其定位 使用您的代码,我会说将此添加到您的CSS中。

.down header {
  position:fixed;
  top:0px;
}

编辑: 我发现从顶部&gt; 400有点太多了,尝试使用fromTop&gt; 100

答案 2 :(得分:0)

我尝试编辑你的笔,这就是我能做的EDITED PEN

我所做的是添加了这一行

  if (fromTop >= 80) {
    angular.element(header[0]).css("top", '0');
    angular.element(header[0]).css("position", 'fixed');
  } else {
    angular.element(header[0]).css("top", '');
    angular.element(header[0]).css("position", '');
  }

答案 3 :(得分:0)

问题是var clone = undefined,所以我把它改为:

var clone = header.prepend(header.clone().addClass('clone'), header);

通过这种方式,我可以找到克隆位置,以便根据条件切换类:pixelsFromTopScreen > clonePixelsPositionFromTop