Angular parallax - jQuery for angular

Question

This code works for me in jquery

<script type="text/javascript"> $(window).on('scroll', function () { console.log($(window).scrollTop()); $('.parallax-background').css('top', '' + ($(window).scrollTop() / 5) + 'px'); }); </script> 

and I'm trying to translate it to angular, and this is what I think should be, but it does not work?

 angular.module('twtscrollApp') .controller('MainCtrl', function ($scope, $window) { $window.on('scroll', function () { angular.element('.parallax-background').css('top', '' + ($window.scrollTop() / 5) + 'px'); }); }); 

im doesn't get any errors but doesn't work, can use jfiddle if necessary, but any help is appreciated. Thank you

Answer 1

The reason you work does not work because angular.element does not work with jQuery selectors, it only works through tag names. documentation

To get what you need, you have to change

 angular.element('.parallax-background') 

in

 angular.element(document.getElementsByClassName('.parallax-background')[0]) 

Recommended / Recommended Solution:

In doing so, you should think about it using the directive, and not in the controller, since this is the right place to manipulate the DOM.

Answer 2

You can use the directive reference function, which returns the element itself, so there is no need for DOM selectors.

 angular.module('myApp').directive('abc', function($timeout, $window) { return { restrict: 'EA', link: function(scope, elem, attr) { $window.on('scroll', function () { elem.css(.......); }); } }; } 

make sure you remove the listener when destroying the scope

Answer 3

Here is the best approach. Resposive Parallax Background
It is always better to use the directive to implement jQuery. copy the code below into a separate file in your project and then use this div tag in your HTML file

 <div appParallax imgSrc="path-to-your-image" imgHeight="70vh"bgSize="cover"></div> 

---

 import { Directive, OnInit, ElementRef, Input, Renderer2, HostListener}from '@angular/core'; declare const $: any; @Directive({ selector: '[appParallax]' }) export class MyParallaxDirective implements OnInit { @Input() imgSrc: string; @Input() imgHeight: String = '70vh'; @Input() bgPosition: String = '50% 0'; @Input() bgSize: String = 'cover'; screenHeight: any; screenWidth: any; constructor(private renderer: Renderer2, private hostElement: ElementRef) { } @HostListener('window:resize', ['$event']) ngOnInit() { this.innit(); this.getScreenSize(); } getScreenSize(event?) { this.screenWidth = window.innerWidth - 100; const elem = this.hostElement.nativeElement; if (this.screenWidth <= 1024) { const $el = $(elem); const x = Math.round((window.innerWidth / 16) * 9); $el.css({ 'height': x + 'px' }); } } innit() { const elem = this.hostElement.nativeElement; this.renderer.setStyle(elem, 'height', this.imgHeight); this.renderer.setStyle(elem, 'background-image', 'url' + '(' +this.imgSrc + ')'); this.renderer.setStyle(elem, 'background-position', this.bgPosition); this.renderer.setStyle(elem, 'background-repeat', 'no-repeat'); this.renderer.setStyle(elem, '-webkit-background-size', this.bgSize); this.renderer.setStyle(elem, 'background-size', this.bgSize); this.renderer.setStyle(elem, '-moz-transform', 'translate3d(0, 0,0)'); this.renderer.setStyle(elem, '-webkit-transform', 'translate3d(0, 0, 0)'); this.renderer.setStyle(elem, 'transform', 'translate3d(0, 0, 0)'); $(function () { const $el = $(elem); $(window).on('scroll', function () { const scroll = $(document).scrollTop(); $el.css({ 'background-position': '50% ' + (-.4 * scroll) + 'px', }); }); }); } } 

---

You can also download the file from here.
Responsive Angular Parallax