Estoy tratando de lograr un concepto de encabezado fijo AngularJs usando solo JavaScript angular o vainilla. (sin dependencia de jQuery). Traté de crear esta directiva, pero me falta algo ... algunas sugerencias por favor?

Código actualizado de trabajo

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;
});
0
que1326 12 ene. 2017 a las 11:38

3 respuestas

La mejor respuesta

El problema era que var clone = undefined, así que lo he cambiado a:

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

De esta manera, puedo encontrar la posición del clon para poder alternar la clase según la condición: pixelsFromTopScreen > clonePixelsPositionFromTop

0
que1326 12 ene. 2017 a las 12:11
<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>

Intente agregar el siguiente código.

style="position: sticky;top: 0px;z-index: 1;
2
Naseeruddin V N 5 jul. 2018 a las 07:35

Traté de editar su pluma y esto es lo que puedo hacer BOLÍGRAFO EDITADO

Lo que hice fue agregar estas líneas

  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", '');
  }
0
rachmatsasongko 12 ene. 2017 a las 09:18