Freeze top, left, and side banners of Canvas.

[eabshire]

This idea has been developed and deployed to Canvas

For more information, please read through the  Canvas Release Notes (2021-10-16) - Instructure Community

---

I have suggested this in the past but it didn't seem to gain traction so I thought that I would bring the idea up again.  It is just a very annoying feature that could be correct rather easily I would imagine.  It would be nice if Canvas froze everything but the interior page.  In other words, let's say you are in the "Modules" page. When you scroll down, the way it is now everything scrolls and you lose site of your courses, grades, calendar, etc. as well as all of your global settings.  Depending on how long your "Modules" page is, for example, you even lose sight of the left hand navigation tabs as well (Home, Assignments, etc.)  I think that those should be stationary, just as if you were to lock columns or rows in Excel.

Please also refer to this closely related idea: https://community.canvaslms.com/ideas/6112-make-course-menu-sticky

[jtorres1]

This worked beautifully for me with the exception of being able to scroll to the very bottom of the page. I am no longer able to see the "Settings" link. I can't scroll beyond a certain point so I have lost access to that. Could you assist?

Thanks!

[hensonj]

working on a fix right now. we knew it happened but none of our courses have menus that long. I have a fix already but I'm trying to pretty it up for you.

[jtorres1]

Thanks James! I really appreciate your help!

[hensonj]

#section-tabs li.section:last-child {

    padding-bottom: 30px;

}

div#left-side {

    overflow: hidden !important;

    width: 180px;

}

div#left-side nav {

    overflow-y: auto;

    height: 100%;

    width: 100%;

    padding-right: 30px;

}

----------------------------------------------

BOOM!!!!

note: I know this is NOT the BEST way to accomplish what I'm doing but I gotta work with whats already in Canvas code and style it from there so this is the best solution I could easily come up with. Also, I have only applied to test and while there should be no adverse effect, I can not guarantee that everything will work perfectly. 

[jtorres1]

Hi James,

Thank you for taking the time to work on this fix for us. Unfortunately, it did not work. The page just sort of keeps jumping over and over when I try to scroll. We'll keep working on our end. I appreciate your assistance!

[dunnr]

Maybe not freeze them but allow for a setting to allow the scroll lock so they don't move.  My district, Clark County School District has a wiki page for our lesson plans that allows us to lock the calendar in place while we scroll down our standards.

[shannona_steuer]

I would personally like this feature, but I can see both sides of the comments. I think it would be best to have a locking option or to be able to collapse the main menu if someone prefers not to have it on every screen. This really comes down to personal preference so having options for a locked menu would be very helpful to people who want it, but would not hurt those who do not want to use it.

[hensonj]

Left menu sticky:

/************************************************************
*************** BEGIN STICKY MENU jS ***********************
************************************************************/

/*switches left menu class to make it sticky and snap to top of page on scroll*/

$(function() {
var header = $(".ic-app-course-menu");
$(window).scroll(function() {
var scroll = $(window).scrollTop();

if (scroll >= 63) {
header.removeClass('ic-app-course-menu').addClass("ic-app-course-menu-fixed");
} else {
header.removeClass("ic-app-course-menu-fixed").addClass('ic-app-course-menu');
}
});
});

/************************************************************
*************** END STICKY MENU jS *************************
************************************************************/

/************************************************************
*************** BEGIN STICKY MENU cSS **********************
************************************************************/

/*makes left menu sticky*/
.ic-app-course-menu {
position: fixed !important;
top: 70px;
left: 84px;
overflow-y: scroll;
height: 100%;
padding-bottom: 80px;
width: 207px !important;
}
/*makes left menu snap to top of page when scrolled.*/
.ic-app-course-menu-fixed {
position: fixed !important;
top: 8px;
left: 107px;
overflow-y: scroll;
height: 100%;
width: 144px;
}

.primary-nav-transitions .ic-app-course-menu-fixed {
left: 78px;
}

/*makes left menu snap to top of page when scrolled.*/
.ic-app-course-menu-fixed {
position: fixed !important;
top: 8px;
left: 107px;
overflow-y: scroll;
height: 100%;
width: 144px;
}

/*Changes left menu z-index so that it is not invisible on top of student names in gradebook*/
.with-left-side #left-side {
z-index: 0;
}

/*puts space below the settings tab*/
#section-tabs li.section:last-child {
padding-bottom: 30px;
}

/*creates parent div*/
div#left-side {
overflow: hidden !important;
width: 165px;
}

/* created scrollability and hides scrollbar*/
div#left-side nav {
overflow-y: auto;
height: 100%;
width: 100%;
padding-right: 30px;
}

/* removes term on scroll*/
.ic-app-course-menu-fixed #section-tabs-header-subtitle {
display: none;
}
/************************************************************
*************** END STICKY MENU CSS **********************
************************************************************/

[vincent_rios199]

I think this is a great idea. Very useful and easy to use. @jivedocs_unfede 

[james_sanzin]

This is an excellent idea that needs to be implemented.