Hide a div on scroll with AngularJS

Question

I am new to AngularJS. I want to hide div "A" in AngularJS when a user scrolls on div "B". Currently I can hide the div "A" when user clicks on div "B" by using ng-click, but I could not find any way to do it with on scroll with AngularJS. I know, I can use JQuery to hide the div but is there any way to do it with AngularJS?

Update:

I created a scroll directive and attached it with $window. Now the div is hidden if I scroll the full window, but I want to hide it when a particular div is scrolled. My current implementation looks like bellow:



    app.directive("scroll", function ($window) {
        return function(scope, element, attrs) {
            angular.element($window).bind("scroll", function() {
                if (this.pageYOffset >= 10) {
                    scope.hideVs = true;
                } else {
                    scope.hideVs = false;
                }
                scope.$apply();
            });
        };
    });

attach a scroll event to window and make a show hide class and using ng-class with expression like ng-class={true:'active',false:inactive}[scrollpos='diva'] — Ajay Singh Beniwal
– Ajay Singh Beniwal, Commented May 2, 2013 at 8:14
Do you know about docs.angularjs.org/api/ng.directive:ngHide and docs.angularjs.org/api/ng.directive:ngShow — Arcayne
– Arcayne, Commented May 2, 2013 at 8:54
Yes, I know about ng-hide and ng-show. I can show/hide it for click event but how can I do it for scroll event? @Arcayne — Ali Hasan Imam
– Ali Hasan Imam, Commented May 2, 2013 at 9:59
@Ajaybeniwal, I updated my question with current implementation. Currently the div hide when scroll main window but how can I do it during scroll of a particular div? — Ali Hasan Imam
– Ali Hasan Imam, Commented May 2, 2013 at 10:16

Derek Ekins · Accepted Answer · 2013-05-02 14:10:39Z

8

I am not sure why you would want to do this but I created a jsfiddle with what I think you want.

I modified your directive slightly:

app.directive("scroll", function () {
        return function(scope, element, attrs) {
            angular.element(element).bind("scroll", function() {
              scope[attrs.scroll] = true;
                scope.$apply();
            });
        };
    });

as you can see in now binds to the scroll event on the div not the window. I've also changed the variable it sets so that it takes the value provided to the scroll directive as the variable name.

http://jsfiddle.net/Tx7md/

Here is a version using $parse to set the value as suggested by @ganaraj

edited May 2, 2013 at 14:10

answered May 2, 2013 at 10:54

Derek Ekins

11.4k6 gold badges63 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ali Hasan Imam Over a year ago

Thanks. This is the solution. I just figured it out and than saw your answer.

Ganaraj Over a year ago

@DerekEkins You should not be doing scope[attrs.scroll] = true. (Because it wont work with nested objects like model.name ) Instead the "right" way to do it is to use the $parse service.

Derek Ekins Over a year ago

thanks @ganaraj I didn't know about that. I've added an example using that method

abject_error · Accepted Answer · 2013-05-02 10:51:46Z

I'll assume for the moment that you don't want to use jQuery.

Using directives will not be a complete solution unless you're absolutely certain you can get a reference to div A from div B using only jqLite functions.

What you can do is create 2 directives: "do-hide-on-scroll" for div B, and "get-hidden-on-scroll" for div A. Using these, you catch the "scroll" event on div B, and use it to generate an Angular event using the $rootScope.emit to send a "div B is scrolling" event to the top level parent scope. The parent scope, when it receives this, will $rootScope.broadcast the same to all its children scopes, one of which is div A. Div A's "get-hidden-on-scroll" directive would have an event handler which listens for this event, then hides the div, and sets a $timeout for half a second to show the div again. If it receives the event again, it resets the timeout.

This is fairly convoluted, I agree, compared to just using jQuery. But at the end of the day, you're probably getting better performance. All in all, one of the harder nuts to crack purely with Angular. Good question!

Collectives™ on Stack Overflow

Hide a div on scroll with AngularJS

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related