3 Replies Latest reply on Apr 28, 2014 1:28 PM by Zaxist

    sticky nav - fixed position is not working

    smcguire+coj

      Hi,

       

      I have a rectangle with fixed position, top of 80px, and right of 0px:

      var tabs = sym.$("tabs");

      tabs.css({"position":"fixed","top":"80px", "right":"0px"});

       

      Inspecting the element in the browser (safari) confirms that the position is fixed.  (Look at the blue rectangle on the right.)  And it does stick to the right side if I change the width of the browser.

       

      Screen Shot 2014-04-25 at 3.01.15 PM.png

       

      However, if I scroll up, the blue box scrolls up and off the stage:

      Screen Shot 2014-04-25 at 3.02.18 PM.png

      Even though the computed style shows a top of 80px.

       

      Any help would be most appreciated.

       

      Thanks

      -Sherry

        • 1. Re: sticky nav - fixed position is not working
          Zaxist Level 4

          Hi

           

          you can achieve this StickyNav this way

           

          //because in jquery and css everything is based on left and top position, so we need to calculate the right position

          // in this case because we want right = 0 so we do it this way

           

          =========================================================================================

          //in Stage > compositionReady

           

          right = $("body").width() - sym.$("tabs").width()

          sym.$("tabs").css({"position":"fixed","top":"80px", "left":right+"px"}).appendTo($("body"))

          =========================================================================================

           

           

          // with .appendTo($("body")) we make it stick to the browser

           

           

          //here is a Problem, if we resize the browser element will stay where ever it is so we should add this code

           

          =========================================================================================

          // in Stage > resize

           

          right = $("body").width() - sym.$("tabs").width()

          sym.$("tabs").css({"position":"fixed","top":"80px", "left":right+"px"})

          =========================================================================================

           

          //so we are good now and in resize our div will stay at right = 0px

           

           

          if you had any question feel free to ask

           

          regads

          Zaxist

          1 person found this helpful
          • 2. Re: sticky nav - fixed position is not working
            smcguire+coj Level 1

            You're awesome.  Thank you so much.

            • 3. Re: sticky nav - fixed position is not working
              Zaxist Level 4

              you're welcome

               

              i'm glad that i could help

               

              regards

              Zaxist