3 Replies Latest reply on Apr 21, 2014 3:40 AM by hemanthR

    Stick Edge Composition to Bottom of Browser Window

    jackwyoung

      Hi Everyone,

      I was hoping somebody would be able to help me... When you build a new Edge composition it automatically loads at the top of the browser window (obviously and rightly so...) However, I was hoping it would be possible to make my composition stick to the bottom of the browser window? Below I have a simple example...

       

      This is how it looks currently:

      Screen Shot 2014-04-19 at 17.28.18.png

       

      How I want it to look:

       

      want.png

       

      I hope I have made myself clear enough (my first post!)

       

      Many thanks, and I look forward to hearing your responses soon!

       

      Jack

        • 1. Re: Stick Edge Composition to Bottom of Browser Window
          hemanthR Adobe Employee

          See if this works :

           

          Put your stage in a wrpper div like this

          <div id="StageWrapper">

                  <div id="Stage" class="EDGE-590585730">

              </div>

              </div>

           

          Put the below snippet in the style tag

                  #StageWrapper{

                       left:0px;

                      position: fixed;

                      bottom: 0px;

                  }

          • 2. Re: Stick Edge Composition to Bottom of Browser Window
            jackwyoung Level 1

            Hi Hemanth,

            Thank you, that's great! Works perfectly, but has thrown up another question which I hope you could help me with.

             

            This is a screenshot of my site as it loads:

            Screen Shot 2014-04-20 at 14.47.47.png

             

            when I resize the window it sticks to the bottom which is perfect:

            Screen Shot 2014-04-20 at 14.48.44.png

            However, If i scroll down this happens:

            Screen Shot 2014-04-20 at 14.48.48.png

             

            What I want to happen is for the composition to stick to the bottom of the page as it does currently. But at the moment you are unable to scroll up (to see the parts of the animation which aren't visable). How can I make it so the user is able to scroll up but stop the user from being able to scroll down and being able to see this white space at the bottom? The user needs to be able to scroll horizontaly as it is a parrallax site.


            Hope you can help!

            Thanks

            • 3. Re: Stick Edge Composition to Bottom of Browser Window
              hemanthR Adobe Employee

              You need a sticky footer.If you google for 'Stick footer' you will get multiple solutions for.Check out the one that best suits you .

              Apply the code for the enclosing div