Menu on top after scrolling

  • Hi,

    If you want to get you menu in top even when you scroll you can add the next script into your graphene-child and the styles in your stylesheet.

    function tjintjinStart() {
	jQuery("nav").attr("id", "tjintjinNav");
	tjintjinXY = getCoords(document.getElementById("tjintjinNav"));
	jQuery(window).on('scroll', function(){
		if ( (jQuery(window).scrollTop() > tjintjinXY.top) && !jQuery("#tjintjinNav").hasClass("tjintjinNav") )  {
			jQuery("#tjintjinNav").addClass("tjintjinNav");
		} else if ( jQuery(window).scrollTop() < tjintjinXY.top && jQuery("#tjintjinNav").hasClass("tjintjinNav") ) {
			jQuery("#tjintjinNav").removeClass("tjintjinNav");
		}
	});
}
function getCoords(tjintjinElement) {
    var box = tjintjinElement.getBoundingClientRect();
    var body = document.body;
    var docEl = document.documentElement;
    var clientTop = docEl.clientTop || body.clientTop || 0;
    var clientLeft = docEl.clientLeft || body.clientLeft || 0;
    var top  = (box.top - clientTop);
    var left = box.left - clientLeft;
    return { left: Math.round(left), top: Math.round(top), width: Math.round(tjintjinElement.offsetWidth), height: Math.round(tjintjinElement.offsetHeight), boxTop: Math.round((tjintjinElement.offsetTop)*1+jQuery(window).scrollTop()) };
}
document.onload = tjintjinStart();

/* styles for stylesheet */
/*
.tjintjinNav {
	position: fixed;
	width: 100%;
	max-width: 1280px;
	top: 0px;
	z-index: 1000;
}
.container {
	width: 100%;
	max-width: 1280px;
}
*/
Viewing 1 replies (of 1 total)
  • Thread Starter Artesis

    (@artesis)

    Beter:

    function tjintjinStart() {
    jQuery(‘html, body, window’).animate({scrollTop:0},500,tjintjinSetScroll());
    }
    function tjintjinSetScroll() {
    jQuery(“nav”).attr(“id”, “tjintjinNav”);
    tjintjinXY = getCoords(document.getElementById(“tjintjinNav”));
    jQuery(window).on(‘scroll’, function(){
    if ( (jQuery(window).scrollTop() > tjintjinXY.top) && !jQuery(“#tjintjinNav”).hasClass(“tjintjinNav”) ) {
    jQuery(“#tjintjinNav”).addClass(“tjintjinNav”);
    jQuery(“#content”).css(“margin-top”, jQuery(“#top-bar”).height()+15);
    } else if ( jQuery(window).scrollTop() < tjintjinXY.top && jQuery(“#tjintjinNav”).hasClass(“tjintjinNav”) ) {
    jQuery(“#tjintjinNav”).removeClass(“tjintjinNav”);
    jQuery(“#content”).css(“margin-top”, 0);
    }
    });
    }
    function getCoords(tjintjinElement) {
    var box = tjintjinElement.getBoundingClientRect();
    var body = document.body;
    var docEl = document.documentElement;
    var clientTop = docEl.clientTop || body.clientTop || 0;
    var clientLeft = docEl.clientLeft || body.clientLeft || 0;
    var top = (box.top – clientTop);
    var left = box.left – clientLeft;
    return { left: Math.round(left), top: Math.round(top), width: Math.round(tjintjinElement.offsetWidth), height: Math.round(tjintjinElement.offsetHeight), boxTop: Math.round((tjintjinElement.offsetTop)*1+jQuery(window).scrollTop()) };
    }

    /*

    ********* style ***********
    .container {
    width: 100%;
    max-width: 1280px;
    }
    .tjintjinNav {
    position: fixed;
    width: 100%;
    max-width: 1280px;
    top: 0px;
    z-index: 1000;
    }

Viewing 1 replies (of 1 total)
  • The topic ‘Menu on top after scrolling’ is closed to new replies.