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

[Renee_Carney]

This idea is one of the lucky ones that was selected to get a little more time for voting as part of our evolution of the feature idea process.   It was selected because of it's vote count and/or comment thread.  

*Selection criteria: Most (not all) ideas that received 70+ votes in their initial voting round.

[eabshire]

Excellent!  When does it go up for additional voting?

[Renee_Carney]

Wednesday, March 1st!

https://community.canvaslms.com/community/ideas/feature-ideas/blog/2017/02/17/flipping-the-switch-on...‌

[eabshire]

Thanks for the info.

[Renee_Carney]

 @eabshire ‌

I think I goofed and re-opened this idea when we have a similar one that is already on Product Radar.

Would you take a look at https://community.canvaslms.com/ideas/6112 and let me know if it meets your needs?

[japarodi]

Yep. Basically the same thing.

[eabshire]

It is similar, but mine seems to go a step further.  I would like not only the left menu frozen, but the top global and right side course menu as well.  They should all stay in sight at all times.

[hensonj]

There is a small bit of js that I left out. I can get that to you today, sorry for the delay.

[hensonj]

///////// BEGIN JavaScript ///////////

$(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 JavaScript ///////////

///////// BEGIN CSS ///////////

/*makes left menu sticky*/
.ic-app-course-menu {
position: fixed !important;
top: 70px;
left: 84px;
overflow-y: scroll;
height: 100%;
padding-bottom: 80px;
}
/*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;
}

///////// END CSS ///////////

[Shar]

Aha! Thank-you hensonj!

We kept running into problems with different page types (wiki, discussion, quiz, assignment) behaving differently with the CSS we were trying.

Cheers - Shar