Support » Theme: Graphene » 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.