6 Replies Latest reply on Apr 8, 2015 1:47 PM by Henry Code

    Can a div or element ignore scrolling making it fixed?

    Henry Code Level 1

      Here we go,

       

      I was trying to find a work around opposed to using css property position:fixed,

      to keep a div or element from moving as the page scrolls under it.

      so...

      sym.$("body").append(sym.$("Group").css({"position":"fixed"}));


      ...is not fully working to create this effect in responsive scaling with  width 100%.

      You lose set sizes and position , further more you lose the scale to fit browser window effect.


      Can a div or element ignore scrolling and stay fixed?


      I thought maybe I'd attempt to create such effect through scroll properties or scrolling scripts.

      Don't know if it's possible.

       

      Thank You,

      Henry

        • 1. Re: Can a div or element ignore scrolling making it fixed?
          joel_pau Level 5

          Hi,

           

          • Sure, the append() function is designed to insert or move a tag. No to change a css property. For instance: sym.$("body").append("<p>paragraph</p>");
          • The CSS() function is designed to get or set CSS properties. For instance: sym.$("Group").css( "position", "fixed" );


          Bonus: How to use Edge timeline and scrolling (A demo file)

          • 2. Re: Can a div or element ignore scrolling making it fixed?
            Henry Code Level 1

            Thanks for the reply,


            sym.$("Group").css( "position", "fixed" );


            worked and did what I'm looking for Using EA cc 2014.1.

            It almost worked perfect and did what I'm looking for in:

            Safari Version 8.0.3 (10600.3.18)

            • *Started in position,
            • *demensions stayed the same size and scaling proportionately worked.
            • *It was able to be scrolled separate from the rest of the elements.
            • It was not fully "fixed" it scrolled slowly down the page.

            This example above is almost the objective except it failed to stay fixed.


            The following browsers had no noticeable results to:

            sym.$("Group").css( "position", "fixed" );

            Using EA 2014.1

            Opera 27.0.1689.66 ,

            Chrome Version 40.0.2214.94 (64-bit),

            FireFox 35.0.1

            IE not tested


            sym.$("Group").css( "position", "fixed" );

            Didn't work Using EA cc 2014


            I worked this project using EA cc 2014 for reasons I rather not debate right now.

            Simply put the clarity of text distorts when I bring it into EA 2014.1


            So can I accomplish the same effect in EA cc 2014  across all browsers?



             


            sym.$("body").append(sym.$("Group").css({"position":"fixed"}));

            Using EA cc 2014  or EA 2014.1 are the same.


            Opera 27.0.1689.66 and Chrome Version 40.0.2214.94 (64-bit) ,

            • *Started in position,
            • *demensions doubled in size
            • scaling not proportionate.
            • It was able to be scrolled separate of the rest of the elements.
            • It was fully fixed.


            FireFox 35.0.1 and Safari Version 8.0.3 (10600.3.18) ,

            • *Started in position,
            • *demensions 50% in size
            • scaling not proportionate.
            • It was able to be scrolled separate of the rest of the elements.
            • It was fully fixed.

             

             

            So can I accomplish the same effect in EA cc 2014  across all browsers?



            Thank you,

            Henry

             





            • 3. Re: Can a div or element ignore scrolling making it fixed?
              joel_pau Level 5

              Here are some test files: positionFixed.zip - Box

              I used Edge 1.5 and Edge 5.0.1

              1) Edge 5.0.1.

              I tested: sym.$("Group").css("position", "fixed");

              It runs fine with Safari, Chrome, Opera and Firefox (latest versions). My OS was Yosemite.

              I also tested IE 11 with Windows 8.1 and 10. It runs fine.

               

              2) Edge 1.5

              I tested 2 lines:

              This one: sym.$("body").append( sym.$("Group").css("position", "fixed") ); //ok

              Then: sym.$("Stage").after( sym.$("Group").css("position", "fixed") ); //ok

              Both lines move the Stage_Group tag and positioning runs fine.

              • Before coding:

              positionFixedBefore.jpg

              • After coding:

              positionFixedAfter.jpg

              It runs fine with Safari, Chrome, Opera and Firefox (latest versions). My OS was Yosemite.

              It runs fine with IE 11: Windows 8.1 and 10 tested.

              1 person found this helpful
              • 4. Re: Can a div or element ignore scrolling making it fixed?
                Henry Code Level 1

                thanks Joel_Pau,

                 

                It does work but not in "Responsive Scaling" I wanted to use it with "Responsive Scaling"/width.

                 

                Here are the results after you add "Responsive Scaling"/width:

                with file positionFixed.html as you scale the "Group" symbol does not proportionally scale though the fixed effect works .

                However, Group does not resize with the rest of the document .

                 

                with file positionFixed2.html as you scale the "Group" symbol does proportionally scale but as you scroll the fixed "Group" moves down the page slowly.

                However, Group does resize with the rest of the document and other divs scroll under it but it doesn't stay fixed.

                 

                I guess I miscommunicated, my objective is a fixed element/div (which works so far) but also have it scale proportionately with the rest of the document ( Responsive Scaling /width).

                 

                It's tough once you disconnect with a project to remember where you were...

                 

                Thanks,

                Henry Code

                • 5. Re: Can a div or element ignore scrolling making it fixed?
                  joel_pau Level 5

                  Yes, Edge UI isn't effective.

                  You can try this code rather than UI.

                  sym.$("Stage").width(sym.$(window).width()+"px");

                  sym.$("Group").css("position", "fixed");

                  Then, you can set stage children (images and div): sym.$("Stage > img") and  sym.$("Stage > div").

                  • 6. Re: Can a div or element ignore scrolling making it fixed?
                    Henry Code Level 1

                    MVP joel_pau TY, I finally got a school break, time to take a shot at this again! Do you have a sample file?

                     

                    Henry