Use ScrollToFixed: stick elements on your page

Hits: 2332

Stick Element where and how you like using ScrollToFixed

For Mobile devices and small screens you need to make your site both nice and flexible! Use Jquery ScrollToFixed to easily stick whatever you want wherever you want.

Once upon a time I had a huge CRT color screen that could show  any resolution that I chose. However, today we have smaller LED or Mobile screens. I am sure that you want your clients  to enjoy vviewing your website even while standing on line at the bank.

I Only needed to have a  header bar stick to the top at the popular Janglo web site.

  •  IN the <head> section of your html5 document, link to the script to Jquery at google or from wherever else you like or download it to your own server and link to that.
  • <script  src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”></script>

    •  Next in  the <head> section of your html5 document, link to the script to the attached js file with something like:

    Even better you should download it from https://github.com/bigspotteddog/ScrollToFixed. Since I might delete when I feel like it.

    [dciframe]http://customerservice.milknhoney.co.il/janglo/old/Protexia4.html,600,300,0,auto,border:1px solid blue;align:left;[/dciframe]

    • Change the path of jquery-scrolltofixed-min.js to wherever you save it.

    Warning! the call for the jquery must be before calling the script in the <head>

    • Finally in the <head> at the following script code:

    <script type=”text/javascript”>
    $(document).ready(function() {
    $(‘.header’).scrollToFixed();
    });
    </script>

    • In Your CSS file add:

    .header {
    }
    .header.scroll-to-fixed-fixed {
    }

    • I added it at the very end of your css file, but you should be able to put where like

    Lastly, add <div class=”header1″ ></div> around the info you want sticky.

    I think that is all I did. I hope that it works for you.

    I would lilke to thank Avi from   avischulman.com for the guidance to complete this project.

    Leave a Reply