Freeze top, left, and side banners of Canvas.

Status: Completed Submitted by on ‎04-25-2016 09:48 AM
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

 

97 Comments
Renee_Carney
Community Team
Community Team
‎02-23-2017 12:37 PM

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
Community Novice
Author
‎02-24-2017 05:56 AM

Excellent!  When does it go up for additional voting?

eabshire
Community Novice
Author
‎02-24-2017 08:11 AM

Thanks for the info.

Renee_Carney
Community Team
Community Team
‎03-06-2017 03:12 PM

 @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
Community Novice
‎03-06-2017 04:39 PM

Yep. Basically the same thing.

eabshire
Community Novice
Author
‎03-07-2017 05:32 AM

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
Community Novice
‎04-13-2017 08:19 AM

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

hensonj
Community Novice
‎04-13-2017 09:47 AM

///////// 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
Community Champion
‎04-13-2017 10:42 AM

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