Search code examples
javascriptjqueryhtmlcssfixed

button behaved like fixed but if the parents end is visible his position :end of parent

I have to place a button on mobile which after click on it should move content on some hight, and it have been placed at the botom of page always, but if the contents end is visible, it should be placed on the end of this content not the page. how can i do it? 

.button{position:fixed;}

is no answer, beceasue at the end button hides footer.

is a lot of code but in short:

 <header/>
 <div id="gallery">
     <div id="paintings">
         <img/>
         <img/>
          ...
     </div>
     <div id="graphics">
         <img/>
         <img/>
          ...
     </div>
     <div id="button"><img/></div>//link or clic on div or button

</div>
<footer/>
Solution

  • Ok I worked something out: JSFIDDLE

    I compared

    $.(window).scrollTop()

    with the position of the footer:

    $('footer').position().top

    If the scrollTop value is bigger than the top-position of the footer I change the position value of the button to this:

    position: absolute

    And I change the top-value to the top-position of the footer.