// This is written in jQuery.
// This piece of code will toggle the ribbon from a fixed position to a relative position based on the viewable area in the browser

// When the Window Scrolls

$(window).scroll(function () {

    // The Current Window in an object
    var jWindow = $(window);

    // If the Ribbon is turned on...
    if (hideRibbon != true) {

        //If the top of the page is over 145 pixels scrolled then...
        if (jWindow.scrollTop() > 145) {

            // Set the height of the ribbon box and toggle it to fixed.
            $(".ribbon-wrapper").css("height", $("#s4-ribbonrow").height() + "px");
            $("#s4-ribbonrow").addClass("fixed-ribbon");

        }

        //If the top of the page is less than 145 pixels scrolled then...
        else if (jWindow.scrollTop() < 146) {

            // Remove the set height and toggle it back to relative
            $("#s4-ribbonrow").removeClass("fixed-ribbon");
            $(".ribbon-wrapper").removeAttr("style");

        }
    }

});
// If there aren't any buttons in the ribbon don't display the box.
hideRibbon = true;

// The the Ribbon is loaded in the DOM
$("#RibbonContainer").ready(function () {

    // Loop through the children of the ribbon icons. And if you find a child, set the flag to false.
    $("#s4-ribboncont .ms-cui-tts li").each(function () {
        hideRibbon = false
    });

    //If the flag was never triggered (no icons were found) then hide the ribbon box.
    if (hideRibbon) {
        $("#s4-ribbonrow").hide();
    }
});