Bind class toggle to window scroll event

Question

When a user scrolls their browser window below a certain point  I am toggling the class of the  page div   What I have done so far works fine   http   jsfiddle net eTTZj 29    lt div ng-app  myApp  scroll id  page  gt        lt header gt  lt  header gt       lt section gt  lt  section gt    lt  div gt   app   angular module  myApp        app directive  scroll   function   window        return function scope  element  attrs            angular element  window  bind  scroll   function                  if  this pageYOffset  gt   100                     element addClass  min                     console log  Scrolled below header                    else                    element removeClass  min                     console log  Header is in view                                              when they scroll their window below the header  100px  the class is toggled   Although  correct me if I m wrong  I feel that this is not the correct way to be doing this with Angular   Instead  I presumed that the best method for doing this would be by using ng-class and storing a boolean value in the scope  Something like this    lt div ng-app  myApp  scroll id  page  ng-class   min  boolChangeClass   gt        lt header gt  lt  header gt       lt section gt  lt  section gt    lt  div gt   app   angular module  myApp        app directive  scroll   function   window        return function scope  element  attrs            angular element  window  bind  scroll   function                  if  this pageYOffset  gt   100                     scope boolChangeClass   true                   console log  Scrolled below header                    else                    scope boolChangeClass   false                   console log  Header is in view                                             Although this is not dynamic  if I change the value of scope boolChangeClass in the scroll callback  then the ng-class is not updating   So my question is  how is best to toggle the class of  page  using AngularJS  when the user scrolls below a certain point

User · Answer

Directives are not  inside the angular world  as they say  So you have to use apply to get back into it when changing stuff

User · Answer

Why do you all suggest heavy scope operations  I don t see why this is not an  angular  solution    directive  changeClassOnScroll   function   window      return       restrict   A       scope            offset               scrollClass                 link  function scope  element            angular element  window  bind  scroll   function                 if  this pageYOffset  gt   parseInt scope offset                     element addClass scope scrollClass                 else                   element removeClass scope scrollClass                                             So you can use it like this    lt navbar change-class-on-scroll offset  500  scroll-class  you-have-scrolled-down  gt  lt  navbar gt    or   lt div change-class-on-scroll offset  500  scroll-class  you-have-scrolled-down  gt  lt  div gt

User · Answer

Maybe this can help     Controller   scope scrollevent   function  e         Your code     Html   lt div scroll scroll-event  scrollevent  gt   scrollable content lt  div gt    Or   lt body scroll scroll-event  scrollevent  gt   scrollable content lt  body gt    Directive   directive  scroll   function   window       return         scope             scrollEvent    amp                  link   function scope  element  attrs                  attrs id  scroll function  e    scope scrollEvent    null    scope scrollEvent    e    null

User · Answer

This is my solution  it s not that tricky and allow you to use it for several markup throught a simple ng-class directive  Like so you can choose the class and the scrollPos for each case   Your App js    angular module  myApp           controller  mainCtrl  function  window   scope            scope scrollPos   0            window onscroll   function                 scope scrollPos   document body scrollTop    document documentElement scrollTop    0               scope  apply      or simply  scope  digest                         Your index html     lt html ng-app  myApp  gt       lt head gt  lt  head gt       lt body gt           lt section ng-controller  mainCtrl  gt               lt p class  red  ng-class   fix scrollPos  gt   100   gt fix me when scroll is equals to 100 lt  p gt               lt p class  blue  ng-class   fix scrollPos  gt   150   gt fix me when scroll is equals to 150 lt  p gt           lt  section gt       lt  body gt   lt  html gt    working JSFiddle here  EDIT        As  apply   is actually calling  rootScope  digest   you can   directly use  scope  digest   instead of  scope  apply   for   better performance depending on context    Long story short    apply     will always work but force the  digest on all scopes that may cause   perfomance issue

User · Answer

Thanks to Flek for answering my question in his comment   http   jsfiddle net eTTZj 30    lt div ng-app  myApp  scroll id  page  ng-class   min boolChangeClass   gt        lt header gt  lt  header gt       lt section gt  lt  section gt    lt  div gt   app   angular module  myApp        app directive  scroll   function   window        return function scope  element  attrs            angular element  window  bind  scroll   function                  if  this pageYOffset  gt   100                     scope boolChangeClass   true                 else                    scope boolChangeClass   false                             scope  apply

User · Answer

What about performance     Always debounce events to reduce calculations Use scope applyAsync to reduce overall digest cycles count   function debounce func  wait        var timeout      return function              var context   this  args   arguments          var later   function                  timeout   null              func apply context  args                       if   timeout  func apply context  args           clearTimeout timeout           timeout   setTimeout later  wait             angular module  app layout      directive  classScroll   function   window            return           restrict   A           link  function  scope  element                    function toggle                     angular element element                     toggleClass  class-scroll--scrolled                        window pageYOffset  gt  0                   scope  applyAsync                                  angular element  window                 on  scroll   debounce toggle  50                 toggle                           3  If you don t need to trigger watchers digests at all then use compile   directive  classScroll   function   window  utils        return           restrict   A           compile  function  element  attributes                function toggle                     angular element element                     toggleClass attributes classScroll                      window pageYOffset  gt  0                              angular element  window                 on  scroll   utils debounce toggle  50                toggle                             And you can use it like  lt header class-scroll  header--scrolled  gt

[angularjs] Bind class toggle to window scroll event

Examples related to angularjs

Examples related to angularjs-directive