Breadcrumb, Search fixed on top of the screen

[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?

[kev1n]

Hi,

Check out:
https://github.com/nuBuilder/nuBuilder- ... ky-headers

[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',});
        });
    }
});

[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