Marvin

marvin.html

<div class="subNav js-subNav">
    <div class="breadcrumbs js-breadcrumbs">
        <a href="#" class="breadcrumb breadcrumb_link">Personal</a>
        &gt;
        <a href="#" class="breadcrumb breadcrumb_link">Manage</a>
        &gt;
        <span class="breadcrumb breadcrumb_current">Current account</span>
    </div>

    <ul class="subNav-secondaryLinks js-subNav-secondaryLinks">
        <li class="subNav-secondaryLinks-item">
            <a href="#" class="subNav-secondaryLinks-item-link">Benefits and features</a>
        </li>
        <li class="subNav-secondaryLinks-item">
            <a href="#" class="subNav-secondaryLinks-item-link">The ins and outs</a>
        </li>
        <li class="subNav-secondaryLinks-item subNav-secondaryLinks-item_button">
            <a href="#" class="subNav-secondaryLinks-item_button-link">Open an account</a>
        </li>
    </ul>

</div>

<script>
	var metro = {};

	// im using a constructor
	// and im keeping it simple
	// coz u need baby steps
	metro.SubNavView = function() {
		this.secondaryLinksContainer = $('.js-subNav-secondaryLinks');
		this.breadcrumbContainer = $('.js-breadcrumbs');
		this.subNavContainer = $('.js-subNav');
		this.subNavThreshold = this.subNavContainer.offset().top + 20;
		this.addListeners();
	};

	metro.SubNavView.prototype.addListeners = function() {
		this.window = $(window);
		this.window.on('resize', $.proxy(this, 'onWindowResized'));
		this.window.on('scroll', $.proxy(this, 'onWindowScrolled'));
	};

	metro.SubNavView.prototype.onWindowScrolled = function(e) {
		if (this.window.scrollTop() > threshold ) {
	        this.subNavContainer.addClass('is-sticky');
	    } else {
	        this.subNavContainer.removeClass('is-sticky');
	    }
	};

	metro.SubNavView.prototype.onWindowResized = function(e) {
		this.checkState();
	};

	metro.SubNavView.prototype.checkState = function() {
	    if ( this.isBreadcrumbTooBig() || this.isSecondaryLinksTooBig() ) {
	        this.secondaryLinksContainer.removeClass('is-visible');
	    } else {
	        this.secondaryLinksContainer.addClass('is-visible');
	    }
	};

	metro.SubNavView.prototype.isBreadcrumbTooBig = function() {
		return ( this.breadcrumbContainer.width() > ($container.width() / 2) );
	};

	metro.SubNavView.prototype.isSecondaryLinksTooBig = function() {
		return ( this.secondaryLinksContainer.width() > ($container.width() / 2) );
	};

	new metro.SubNavView();

</script>