Make element fixed on scroll

Question

I m attempting to make the navigation bar stick to the top  when the user scrolls down to the nav bar and then unstick when the user scrolls back up past the navbar  I understand that this can only be implemented via JavaScript  I m a beginner to JavaScript  so the easier the better  The JSFIDDLE is here    The HTML is as follows       lt section class  main  gt        lt div id  wrap  gt           lt div id  featured  gt        lt div class  wrap  gt           lt div class  textwidget  gt       lt div class  cup  gt  lt img src      gt  lt  div gt   lt div id  header  gt  lt  div gt  lt  div gt  lt  div gt  lt  div gt  lt  div gt  lt  div gt  lt  div gt   lt div class  whiteboard  gt            lt h1 gt  lt a href     gt HELLO GUYS lt  a gt  lt  h1 gt   lt  div gt      lt  div gt             lt div class  bg1  gt               lt h2 gt  WE ARE AN EVENTS MANAGEMENT COMPANY BASED IN LONDON   lt  h2 gt  lt  div gt    The CSS is as follows          main text-align center          h1            -webkit-font-smoothing  antialiased                display inline-block              font  800 1 313em  proxima-nova  sans-serif               padding  10px 10px              margin  20px 20px              letter-spacing  8px              text-transform  uppercase                font-size 3 125em                text-align  center                 max-width  606px        line-height  1 45em        position  scroll            background-color  e94f78            text-decoration  none            color yellow            background-image url                 h1 a          text-decoration  none          color yellow                  padding-left  0 15em                 h2            -webkit-font-smoothing  antialiased                display inline-block              font  800 1 313em  proxima-nova  sans-serif               letter-spacing  8px              margin-top  100px              text-transform  uppercase                font-size 3 125em                text-align  center         line-height  1 45em        position  scroll            text-decoration  none            color white            z-index  -9999                 h2 a          text-decoration  none          color white                  padding-left  0 15em                 h5         position  absolute                font-family sans-serif                 font-weight bold                 font-size 40px                 text-align  center                 float  right                background-color  fff                margin-top  -80px                margin-left  280px                 h5 a           text-decoration  none          color red                 h5 a hover           color yellow                  text1            -webkit-font-smoothing  antialiased                display inline-block              font  800 1 313em  proxima-nova  sans-serif               margin  20px 20px              letter-spacing  8px              text-transform  uppercase                font-size 3 125em                text-align  center                 max-width  606px        line-height  1 45em        position  scroll            background-color  E94F78                   text1 a            color yellow            text-decoration  none                padding-left  0 15em                    text1 a hover             text-decoration  none            cursor pointer                  whiteboard            background-image url http   krystalrae com img krystalrae-2012-fall-print-leopard-sketch jpg             background-position  center            padding              background-color   fff            z-index  1000                  bg          height 2000px          background-color  ff0          background-image url http   alwayscreative net images stars-last jpg           position relative          z-index  -9999                  bg1          background-image url http   alwayscreative net images stars-last jpg           z-index  -9999          height 1000px                   Header           wrap           margin  0 auto          padding  0          width  100                   featured           background   E94F78 url http   www creativityfluid com wp-content themes creativityfluid images img-bubbles-red png  no-repeat top          background-size  385px 465px          color   fff          height  535px          overflow  hidden          position  relative          z-index  -2                   featured  wrap           overflow  hidden          clear  both          padding  70px 0 30px          position  fixed          z-index  -1          width  100                    featured  wrap  widget           width  80           max-width  1040px          margin  0 auto                  featured h1         featured h3         featured p           color  yellow          text-shadow  none                  featured h4          color white          text-shadow none                  featured h4           margin  0 0 30px                  featured h3           font-family   proxima-nova-sc-osf   arial  serif          font-weight  600          letter-spacing  3px                  featured h1           margin  0                  textwidget          padding  0                  cup          margin-top 210px          z-index  999999                  container font-size 14px  margin 0 auto  width 960px         test content margin 10px 0          scroller anchor height 0px  margin 0  padding 0 background-image url           scroller background  FFF          background-image url http   krystalrae com img krystalrae-2012-fall-print-leopard-sketch jpg          margin 0 0 10px  z-index 100  height 50px  font-size 18px  font-weight bold  text-align center  width 960px

User · Answer

You want to use jQuery WayPoints  It is a very simple plugin and acheives exactly what you have described   Most straightforward implementation          thing   waypoint function direction      alert  Top of thing hit top of viewport           You will need to set some custom CSS to set exactly where it does become stuck  this is normal though for most ways to do it   This page will show you all the examples and info that you need   For future reference a example of it stopping and starting is this website  It is a  in the wild  example

User · Answer

You can do this with css too   just use position fixed  for what you want to be fixed when you scroll down   you can have some examples here   http   davidwalsh name demo css-fixed-position php  http   demo tutorialzine com 2010 06 microtut-how-css-position-works demo html

User · Answer

There are some problems implementing this which the original accepted answer does not answer    The onscroll event of the window is firing very often  This implies that you either have to use a very performant listener  or you have to delay the listener somehow  jQuery Creator John Resig states here how a delayed mechanism can be implemented  and the reasons why you should do it  In my opinion  given todays browsers and environments  a performant listener will do as well  Here is an implementation of the pattern suggested by John Resig The way position fixed works in css  if you scroll down the page and move an element from position static to position  fixed  the page will  jump  a little because the document  looses  the height of the element  You can get rid of that by adding the height to the scrollTop and replace the lost height in the document body with another object  You can also use that object to determine if the sticky item has already been moved to position  fixed and reduce the calls to the code reverting position  fixed to the original state  Look at the fiddle here Now  the only expensive thing in terms of performance the handler is really doing is calling scrollTop on every call  Since the interval bound handler has also its drawbacks  I ll go as far as to argue here that you can reattach the event listener to the original scroll Event to make it feel snappier without many worries  You ll have to profile it though  on every browser you target   support  See it working here   Here s the code   JS     Initialize sticky outside the event listener as a cached selector     Also  initialize any needed variables outside the listener for     performance reasons - no variable instantiation is happening inside the listener      var sticky       sticky        stickyClone      stickyTop   sticky offset   top      scrollTop      scrolled   false       window     window       Bind the scroll Event     window on  scroll   function  e        scrollTop    window scrollTop         if  scrollTop  gt   stickyTop  amp  amp   stickyClone               Attach a clone to replace the  missing  body height            stickyClone   sticky clone   prop  id   sticky prop  id      -clone           stickyClone   stickyClone insertBefore sticky           sticky addClass  fixed          else if  scrollTop  lt  stickyTop  amp  amp  stickyClone               Since sticky is in the viewport again  we can remove the clone and the class            stickyClone remove            stickyClone   null          sticky removeClass  fixed                CSS  body       margin  0    sticky       padding  1em      background  black      color  white      width  100     sticky fixed       position  fixed      top  0      left  0     content       padding  1em     HTML   lt div class  container  gt     lt div id  page-above  class  content  gt       lt h2 gt Some Content above sticky lt  h2 gt         some long text       lt  div gt     lt div id  sticky  class  sticky  gt This is sticky lt  div gt     lt div id  page-content  class  content  gt       lt h2 gt Some Random Page Content lt  h2 gt    some really long text       lt  div gt   lt  div gt

User · Answer

Most easiest way to do it as follow   var elementPosition       navigation   offset       window  scroll function            if   window  scrollTop    gt  elementPosition top                     navigation   css  position   fixed   css  top   0              else                   navigation   css  position   static

User · Answer

Here you go  no frameworks  short and simple   var el   document getElementById  elId    var elTop   el getBoundingClientRect   top - document body getBoundingClientRect   top   window addEventListener  scroll   function        if  document documentElement scrollTop  gt  elTop           el style position    fixed           el style top    0px             else               el style position    static           el style top    auto

User · Answer

window addEventListener  scroll   function evt        var pos top   document body scrollTop         if pos top    0              divID   css  position   fixed               else if pos top  gt  0              divId   css  position   static

User · Answer

You can do that with some easy jQuery   http   jsfiddle net jpXjH 6   var elementPosition       navigation   offset       window  scroll function            if   window  scrollTop    gt  elementPosition top                     navigation   css  position   fixed   css  top   0              else                   navigation   css  position   static

User · Answer

You can go to LESS CSS website http   lesscss org   Their dockable menu is light and performs well  The only caveat is that the effect takes place after the scroll is complete  Just do a view source to see the js

User · Answer

I wouldn t bother with jQuery or LESS  A javascript framework is overkill in my opinion   window addEventListener  scroll   function  evt          This value is your scroll distance from the top   var distance from top   document body scrollTop        The user has scrolled to the tippy top of the page  Set appropriate style    if  distance from top     0               The user has scrolled down the page    if distance from top  gt  0

User · Answer

Plain Javascript Solution  DEMO      lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt   lt div gt     lt div id  myyy bar  style  background red   gt  Here is window  lt  div gt   lt  div gt   lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt     lt script type  text javascript  gt  var myyElement   document getElementById  myyy bar     var EnableConsoleLOGS   true              to check the results in Browser s Inspector Console   whenever you are scrolling                                                      window addEventListener  scroll   function  evt        var Positionsss    GetTopLeft           if  EnableConsoleLOGS    console log Positionsss         if  Positionsss toppp   gt  70       myyElement style position  relative   myyElement style top    0px    myyElement style right    auto         else                              myyElement style position  fixed      myyElement style top    100px           myyElement style right    0px            function GetOffset  object  offset        if   object  return      offset x    object offsetLeft        offset y    object offsetTop      GetOffset  object offsetParent  offset     function GetScrolled  object  scrolled        if   object  return      scrolled x    object scrollLeft     scrolled y    object scrollTop      if  object tagName toLowerCase        html              GetScrolled  object parentNode  scrolled               function GetTopLeft          var offset    x   0  y   0          GetOffset  myyElement parentNode  offset       var scrolled    x   0  y   0        GetScrolled  myyElement parentNode parentNode  scrolled       var posX   offset x - scrolled x    var posY   offset y - scrolled y      return  lefttt  posX   toppp  posY                                                         lt  script gt

[javascript] Make element fixed on scroll

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css