paralax menu

Discussion in 'CSS' started by lew1s666, Mar 7, 2014.

0
  1. #1
    how to make this menu with bootstrap? to be on bottom on front page and when you go to any another page it will jump to top.
    http://themify.me/demo/themes/parallax/#services
     
    lew1s666, Mar 7, 2014 IP
  2. loop

    loop Active Member

    Messages:
    519
    Likes Received:
    4
    Best Answers:
    1
    Trophy Points:
    90
    #2
    it's done with javascript, not only CSS.

    // Fixed Header /////////////////////////
    FixedHeader = {
        init : function() {
            this.headerHeight = $('#header hgroup').outerHeight() - $('#nav-bar').outerHeight();

            if ( $('body').hasClass('ie') ) { $('html, body').addClass('iefix'); }

            $(window).on('scroll', this.activate)
            .on('touchstart.touchScroll', this.activate)
            .on('touchmove.touchScroll', this.activate);
        },
        activate : function() {

            if ( $(window).scrollTop() <= FixedHeader.headerHeight ) {
                FixedHeader.scrollDisabled();
            } else {
                FixedHeader.scrollEnabled();
            }
        },
        scrollDisabled : function() {
            $('#nav-bar').removeClass('fixed-nav-bar');
            $('body').removeClass('fixed-header-on');
        },
        scrollEnabled : function() {
            $('#nav-bar').addClass('fixed-nav-bar');
            $('body').addClass('fixed-header-on');
        }
    };
    Code (markup):
     
    loop, Mar 7, 2014 IP