Add remove class with jquery based on vertical scroll

Question

So basically I d like to remove the class from  header  after the user scrolls down a little and add another class to change it s look   Trying to figure out the simplest way of doing this but I can t make it work     window  scroll function             var scroll     window  scrollTop            if  scroll  lt   500                clearheader   removeClass  clearHeader   addClass  darkHeader              CSS   clearHeader      height  200px       background-color  rgba 107 107 107 0 66       position  fixed      top 200      width  100              darkHeader   height  100px      wrapper       height 2000px      HTML   lt header class  clearHeader  gt      lt  header gt   lt div class  wrapper  gt       lt  div gt    I m sure I m doing something very elementary wrong

User · Answer

Is this value intended  if  scroll  lt   500        This means it s happening from 0 to 500  and not 500 and greater  In the original post you said  after the user scrolls down a little

User · Answer

window  scroll function             var scroll     window  scrollTop             gt    not  lt       if  scroll  gt   500              clearHeader  not clearheader - caps H             clearHeader   addClass  darkHeader                missing      Fiddle  Also  by removing the clearHeader class  you re removing the position fixed  from the element as well as the ability of re-selecting it through the     clearHeader   selector  I d suggest not removing that class and adding a new CSS class on top of it for styling purposes   And if you want to  reset  the class addition when the users scrolls back up     window  scroll function             var scroll     window  scrollTop         if  scroll  gt   500                clearHeader   addClass  darkHeader          else               clearHeader   removeClass  darkHeader                Fiddle  edit  Here s version caching the header selector - better performance as it won t query the DOM every time you scroll and you can safely remove add any class to the header element without losing the reference     function           caches a jQuery object containing the header element     var header       clearHeader          window  scroll function             var scroll     window  scrollTop             if  scroll  gt   500                header removeClass  clearHeader   addClass  darkHeader              else               header removeClass  darkHeader   addClass  clearHeader                            Fiddle

User · Answer

Add some transition effect to it if you like   http   jsbin com boreme 17 edit html css js   clearHeader     height 50px    background lightblue    position fixed    top 0    left 0    width 100      -webkit-transition  background 2s     For Safari 3 1 to 6 0      transition  background 2s      clearHeader darkHeader    background  000

User · Answer

Here s pure javascript example of handling classes during scrolling   You d probably want to throttle handling scroll events  more so as handler logic gets more complex  in that case throttle from lodash lib comes in handy   And if you re doing spa  keep in mind that you need to clear event listeners with removeEventListener once they re not needed  eg during onDestroy lifecycle hook of your component  like destroyed   for Vue  or maybe return function of useEffect hook for React     x000D   x000D  const navbar   document getElementById  navbar   x000D   x000D     OnScroll event handler x000D  const onScroll        gt    x000D   x000D       Get scroll value x000D    const scroll   document documentElement scrollTop x000D   x000D       If scroll value is more than 0 - add class x000D    if  scroll  gt  0    x000D      navbar classList add  scrolled    x000D      else   x000D      navbar classList remove  scrolled   x000D      x000D    x000D   x000D     Optional - throttling onScroll handler at 100ms with lodash x000D  const throttledOnScroll     throttle onScroll  100      x000D   x000D     Use either onScroll or throttledOnScroll x000D  window addEventListener  scroll   onScroll  x000D   navbar   x000D    position  fixed  x000D    top  0  x000D    left  0  x000D    right  0  x000D    width  100   x000D    height  60px  x000D    background-color   89d0f7  x000D    box-shadow  0px 5px 0px rgba 0  0  0  0   x000D    transition  box-shadow 500ms  x000D    x000D   x000D   navbar scrolled   x000D    box-shadow  0px 5px 10px rgba 0  0  0  0 25   x000D    x000D   x000D   content   x000D    height  3000px  x000D    margin-top  60px  x000D    x000D   lt  -- Optional - lodash library  used for throttlin onScroll handler-- gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs lodash js 4 17 15 lodash js  gt  lt  script gt  x000D   lt header id  navbar  gt  lt  header gt  x000D   lt div id  content  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Its my code  jQuery document  ready function e        var WindowHeight   jQuery window  height         var load element   0         position of element     var scroll position   jQuery   product-bottom   offset   top       var screen height   jQuery window  height        var activation offset   0      var max scroll height   jQuery  body   height     screen height       var scroll activation point   scroll position -  screen height   activation offset        jQuery window  on  scroll   function e             var y scroll pos   window pageYOffset          var element in view   y scroll pos  gt  scroll activation point          var has reached bottom of page   max scroll height  lt   y scroll pos  amp  amp   element in view           if  element in view    has reached bottom of page                jQuery   product-bottom   addClass  change              else               jQuery   product-bottom   removeClass  change                              Its working Fine

User · Answer

For Android mobile   window  scroll function   and   document  scroll function   may or may not work  So instead use the following   jQuery document body  scroll function             var scroll   jQuery document body  scrollTop             if  scroll  gt   300                  alert                header addClass  sticky              else               header removeClass  sticky                        This code worked for me  Hope it will help you

User · Answer

In a similar case  I wanted to avoid always calling addClass or removeClass due to performance issues  I ve split the scroll handler function into two individual functions  used according to the current state  I also added a debounce functionality according to this article  https   developers google com web fundamentals performance rendering debounce-your-input-handlers          var  header   jQuery    clearHeader                      var appScroll   appScrollForward          var appScrollPosition   0          var scheduledAnimationFrame   false           function appScrollReverse                 scheduledAnimationFrame   false              if   appScrollPosition  gt  500                   return               header removeClass   darkHeader                 appScroll   appScrollForward                     function appScrollForward                 scheduledAnimationFrame   false              if   appScrollPosition  lt  500                   return               header addClass   darkHeader                 appScroll   appScrollReverse                     function appScrollHandler                 appScrollPosition   window pageYOffset              if   scheduledAnimationFrame                   return              scheduledAnimationFrame   true              requestAnimationFrame  appScroll                       jQuery  window   scroll  appScrollHandler      Maybe someone finds this helpful

[javascript] Add/remove class with jquery based on vertical scroll?

Examples related to javascript

Examples related to jquery

Examples related to css