Show div on scrollDown after 800px

Question

I want to show a hidden div when scrolling down after 800px from the top of the page  By now I have this example  but I guess it needs modification in order to achive what I am looking for   EDIT    And when scrollUp and the height is less the 800px  this div should hide   HTML    lt div class  bottomMenu  gt     lt  -- content -- gt   lt  div gt    css    bottomMenu       width  100       height  60px      border-top  1px solid  000      position  fixed      bottom  0px      z-index  100      opacity  0      jQuery     document  ready function           window  scroll  function                bottomMenu   each  function i               var bottom of object     this  position   top     this  outerHeight                var bottom of window     window  scrollTop       window  height                if  bottom of window  gt  bottom of object                      this  animate   opacity   1   500                                            Here is a Fiddle of my current code

User · Answer

SCROLLBARS  amp    window  scrollTop    What I have discovered is that calling such functionality as in the solution thankfully provided above   there are many more examples of this throughout this forum - which all work well  is only successful when scrollbars are actually visible and operating   If  as I have maybe foolishly tried   you wish to implement such functionality  and you also wish to  shall we say  implement a minimalist  clean screen  free of scrollbars  such as at this discussion  then   window  scrollTop   will not work   It may be a programming fundamental  but thought I d offer the heads up to any fellow newbies  as I spent a long time figuring this out   If anyone could offer some advice as to how to overcome this or a little more insight  feel free to reply  as I had to resort to show hide onmouseover mouseleave instead here   Live long and program  CollyG

User · Answer

You can also  do this     window  on  scroll   function         if    this  scrollTop    gt  800           code here      else          code here

User · Answer

If you want to show a div after scrolling a number of pixels  Working Example   document  scroll function       var y     this  scrollTop      if  y  gt  800            bottomMenu   fadeIn        else           bottomMenu   fadeOut              x000D   x000D    document  scroll function       var y     this  scrollTop      if  y  gt  800            bottomMenu   fadeIn        else           bottomMenu   fadeOut            x000D  body     height  1600px     bottomMenu     display  none    position  fixed    bottom  0    width  100     height  60px    border-top  1px solid  000    background  red    z-index  1    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt   lt p gt Scroll down     lt  p gt   lt div class  bottomMenu  gt  lt  div gt  x000D   x000D   x000D   Its simple  but effective  Documentation for  scroll   Documentation for  scrollTop    If you want to show a div after scrolling a number of pixels  without jQuery  Working Example myID   document getElementById  quot myID quot     var myScrollFunc   function       var y   window scrollY    if  y  gt   800        myID className    quot bottomMenu show quot      else       myID className    quot bottomMenu hide quot          window addEventListener  quot scroll quot   myScrollFunc     x000D   x000D  myID   document getElementById  myID     var myScrollFunc   function       var y   window scrollY    if  y  gt   800        myID className    bottomMenu show      else       myID className    bottomMenu hide          window addEventListener  scroll   myScrollFunc   x000D  body     height  2000px     bottomMenu     position  fixed    bottom  0    width  100     height  60px    border-top  1px solid  000    background  red    z-index  1    transition  all 1s     hide     opacity  0    left  -100      show     opacity  1    left  0    x000D   lt div id  myID  class  bottomMenu hide  gt  lt  div gt  x000D   x000D   x000D   Documentation for  scrollY Documentation for  className Documentation for  addEventListener  If you want to show an element after scrolling to it  Working Example    h1   each function          var y     document  scrollTop        var t     this  parent   offset   top      if  y  gt  t              this  fadeIn          else             this  fadeOut                x000D   x000D    document  scroll function         Show element after user scrolls 800px   var y     this  scrollTop      if  y  gt  800            bottomMenu   fadeIn        else           bottomMenu   fadeOut              Show element after user scrolls past       the top edge of its parent       h1   each function         var t     this  parent   offset   top      if  y  gt  t            this  fadeIn          else           this  fadeOut                    x000D  body     height  1600px     bottomMenu     display  none    position  fixed    bottom  0    width  100     height  60px    border-top  1px solid  000    background  red    z-index  1     scrollPast     width  100     height  150px    background  blue    position  relative    top  50px    margin  20px 0    h1     display  none    position  absolute    bottom  0    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt   lt p gt Scroll Down    lt  p gt   lt div class  scrollPast  gt     lt h1 gt I fade in when you scroll to my parent lt  h1 gt    lt  div gt   lt div class  scrollPast  gt     lt h1 gt I fade in when you scroll to my parent lt  h1 gt    lt  div gt   lt div class  scrollPast  gt     lt h1 gt I fade in when you scroll to my parent lt  h1 gt    lt  div gt   lt div class  bottomMenu  gt I fade in when you scroll past 800px lt  div gt  x000D   x000D   x000D   Note that you can t get the offset of elements set to display  none   grab the offset of the element s parent instead  Documentation for  each   Documentation for  parent   Documentation for  offset    If you want to have a nav or div stick or dock to the top of the page once you scroll to it and unstick undock when you scroll back up  Working Example   document  scroll function            stick nav to top of page     var y     this  scrollTop        var navWrap       navWrap   offset   top      if  y  gt  navWrap               nav   addClass  sticky          else              nav   removeClass  sticky                navWrap       height 70px   nav       height  70px      background gray     sticky       position  fixed      top 0      x000D   x000D    document  scroll function            stick nav to top of page     var y     this  scrollTop        var navWrap       navWrap   offset   top      if  y  gt  navWrap               nav   addClass  sticky          else              nav   removeClass  sticky              x000D  body       height 1600px      margin 0     navWrap       height 70px   nav       height  70px      background gray     sticky       position  fixed      top 0    h1       margin  0    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt   lt p gt Zombie ipsum reversus ab viral inferno  nam rick grimes malum cerebro  De carne lumbering animata corpora quaeritis  Summus brains sit  morbo vel maleficia  De apocalypsi gorger omero undead survivor dictum mauris  Hi mindless mortuis soulless creaturas    imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium  Qui animated corpse  cricket bat max brucks terribilem incessu zomby  The voodoo sacerdos flesh eater  suscitat mortuos comedere carnem virus  Zonbi tattered for solum   oculi eorum defunctis go lum cerebro  Nescio brains an Undead zombies  Sicut malus putrid voodoo horror  Nigh tofth eliv ingdead  lt  p gt   lt div id  navWrap  gt     lt nav gt       lt h1 gt I stick to the top when you scroll down and unstick when you scroll up to my original position lt  h1 gt      lt  nav gt   lt  div gt   lt p gt Zombie ipsum reversus ab viral inferno  nam rick grimes malum cerebro  De carne lumbering animata corpora quaeritis  Summus brains sit  morbo vel maleficia  De apocalypsi gorger omero undead survivor dictum mauris  Hi mindless mortuis soulless creaturas    imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium  Qui animated corpse  cricket bat max brucks terribilem incessu zomby  The voodoo sacerdos flesh eater  suscitat mortuos comedere carnem virus  Zonbi tattered for solum   oculi eorum defunctis go lum cerebro  Nescio brains an Undead zombies  Sicut malus putrid voodoo horror  Nigh tofth eliv ingdead  lt  p gt  x000D   x000D   x000D

User · Answer

You ve got a few things going on there  One  why a class  Do you actually have multiple of these on the page  The CSS suggests you can t  If not you should use an ID - it s faster to select both in CSS and jQuery    lt div id bottomMenu gt You read it all  lt  div gt    Second you ve got a few crazy things going on in that CSS - in particular the z-index is supposed to just be a number  not measured in pixels  It specifies what layer this tag is on  where each higher number is closer to the user  or put another way  on top of occluding tags with lower z-indexes    The animation you re trying to do is basically  fadeIn    so just set the div to display  none  initially and use  fadeIn   to animate it       bottomMenu   fadeIn 2000      fadeIn   works by first doing display   whatever the proper display property is for the tag   opacity  0  then gradually ratcheting up the opacity   Full working example   http   jsfiddle net b9chris sMyfT   CSS    bottomMenu       display  none      position  fixed      left  0  bottom  0      width  100   height  60px      border-top  1px solid  000      background   fff      z-index  1      JS   var  win     window    function checkScroll         if   win scrollTop    gt  100             win off  scroll   checkScroll               bottomMenu   fadeIn 2000             win scroll checkScroll

[jquery] Show div on scrollDown after 800px

Examples related to jquery

Examples related to html

Examples related to css