Stellar Parallax Scrolling

Stellar Parallax Scrolling
1. jQuery call করতে হবে ।
2. stellar.js file টি call করতে হবে ।
3. background Image থাকা div টিকে “parallax_one” class name দিতে হবে । ঐ div এর  মধ্যের first-child কে “parallax_one_inner” class name দিতে হবে ।
4. background Image থাকা পরের div গুলোকে “parallax_two”, “parallax_three” class name দিতে হবে । ঐ div গুলোর      মধ্যের first-child কে “parallax_two_inner”, “parallax_three_inner” class name দিতে হবে ।
5. Active করতে হবে ।
    <script type=”text/javascript”>
        $(function(){
            $.stellar({
                horizontalScrolling: false,
                verticalOffset: 40
            });
        });
    </script>

Scroll to Top

/*
 * Show/Hide Scroll to Top Button
 */
var to_top = jQuery("#to_top");
jQuery(window).scroll(function () {
    if (jQuery(this).scrollTop() > 350) {
        to_top.fadeIn("slow");
    } else {
        to_top.fadeOut("slow");
    }
});

/*
 * Scroll to Top Button
 */
to_top.click(function () {
    jQuery('html, body').animate({
        scrollTop: 0
    }, 1000);
    return false;
});

Stick a Div

jQuery

var stickyElement = $( "#list-faq-wrap" );
var stickyElementPos = stickyElement.offset();
$( window ).scroll( function () {
	var windowpos = $( window ).scrollTop();
	if ( windowpos >= stickyElementPos.top - 20 ) {
		stickyElement.addClass( "stick" );
	} else {
		stickyElement.removeClass( "stick" );
	}
} );

CSS

.stick {
  position: fixed;
  top: 0;
  z-index: 999;
}