Today I worked on this for one of my client so I thought I should share this with all of you. My client wanted me to show a fixed button in the right side of his website and it should only show on scrolling between particular area. I’ve coded according to requirements and I am going to share jQuery code for the same.
Code is as below: (I am expecting that you already have jquery library in your code.)
<script>
jQuery(document).ready(function(e) {
var topScrollpos = 360;
var bottomScrollpos = 1820;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (currentScrollPos > topScrollpos && currentScrollPos < bottomScrollpos) {
jQuery("#float-button").css('display','block');
} else {
jQuery("#float-button").css('display','none');
}
}
});
</script>#float-button : This is button id which we want to show/hide on scrolling. Set display property of your button to none by default.
Its just for re-usability so we can save some time as time is money 🙂