Page 1 of 1
Breadcrumb, Search fixed on top of the screen
Posted: Sat Apr 02, 2022 11:43 pm
by Leopebe
Hello all,
I have a project where very many records ( >100 ) should be displayed on one page. For this it would be useful if breadcrumb, search and title are fixed on the top of the screen. So that only the Rows are scrollable.
I already tried to set these classes to fixed via CSS, but this destroys the complete menu:
Code: Select all
.nuBreadcrumbHolder, .nuActionHolder, .nuTabHolder, .nuBrowseTitle {
position: fixed;
}
Does anyone have any ideas on how I could implement this?
Re: Breadcrumb, Search fixed on top of the screen
Posted: Sun Apr 03, 2022 6:37 am
by kev1n
Re: Breadcrumb, Search fixed on top of the screen
Posted: Wed Apr 06, 2022 7:34 pm
by Leopebe
Thank you @kev1n!
I have modified it a bit for my usecase. So also breadcrumb and search stays visible:
Code: Select all
$(window).scroll(function(e) {
var breadcrumbHeight = $('#nuBreadcrumbHolder').height() + 10;
var actionHeight = $('#nuActionHolder').height() + 20;
var scrollTop = $(window).scrollTop();
if (scrollTop > 0) {
//scrolled
$('#nuBreadcrumbHolder').css({ 'top': scrollTop, 'z-index': '100', 'position': 'fixed', 'width': '100%' });
$('#nuActionHolder').css({ 'top': scrollTop + breadcrumbHeight, 'z-index': '100', 'position': 'fixed', 'width': '100%' });
$('.nuBrowseTitle').each(function() {
$(this).css({ 'top': scrollTop + breadcrumbHeight + actionHeight, 'z-index': '100', 'position': 'fixed' });
});
} else {
//on Top
$('#nuBreadcrumbHolder').css({ 'top': 0});
$('#nuActionHolder').css({ 'top': breadcrumbHeight });
$('#nuRECORD').css({ 'top': breadcrumbHeight + actionHeight + 10});
$('.nuBrowseTitle').each(function() {
$(this).css({ 'z-index': '0',});
});
}
});
Re: Breadcrumb, Search fixed on top of the screen
Posted: Thu Apr 07, 2022 8:39 am
by kev1n
Hi Leopebe,
Thanks for sharing your code!
I noticed a glitch when using the mouse scroll wheel. The header completely disappears when scrollTop is 0 again.
scroll.gif