Visits: 2600
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.
<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.