How to fix Global Tab menu when scrolling? CSS

API & Customization Ask Developers
1

Hello, people!
In the Interface View I want to fix the Global Tab menu in the top of browser.

It is thus needed that logo area was first scrolled upwards together with Global Tab menu, and then Global Tab menu gained a foothold on the top of browser.

Here is images



How can this be done using CSS?
I tried adding a custom CSS, but the Global Tab menu does not scroll up:

#kn-app-menu {
position: fixed;
z-index: 9999;
padding-top: 0px;
width: 100%;
left: 0px;
}

I'm not strong in CSS, I would like to get your help.

Regards, Alexander

2

Hey guys, do you think there would be a way to do this with the header row of a table?

3

I am very happy that my ideas are helping to build Knack app! I'll think of something else in the works and I will inform about my innovations. :)

.


4

I'm no CSS or Javascript expert either, but I took another route thinking that we need the menu to stick to the top only when scrolling has lifted it to the top - or beyond the height of the logo. So I've modified your code (thanks) to this:

$(function() {
	var logo_height = $('#knack-logo').height();
	var fixblock_pos = $('#kn-app-menu').position().top + logo_height; ;

$(window).scroll(function(){

if ($(window).scrollTop() > fixblock_pos){ 
  $('#kn-app-menu').css({'position':'fixed', 'top':'0px', 'z-index':'9999'});
  
}else{$('#kn-app-menu').css({'position': 'static', 'width': '100%'}); 
      
}})});</pre><p>Works beautifully for me, and doesn't need transitions at all.  I've posted this as a tip in the API section and thanked you again!</p><p>Brad </p>
5

Hi Brad!


I found the Web script that does the job and added the script to the custom zone Javascript it looks like my wish was, but not until the end of the work. I also want to make Global Tab menu smoothly moved into the TOP position when scrolling.

Fixed-Global-Tab-menu-5.jpg?14178174121303×560


Here is the script

$(function() {
var fixblock_height = $('#kn-app-menu').height();
var fixblock_pos = $('#kn-app-menu').position().top; ;
$(window).scroll(function(){

if ($(window).scrollTop() > fixblock_pos){
$('#kn-app-menu').css({'position': 'fixed', 'top':'0px', 'z-index':'9999', '-o-transition-duration': '0.3s', 'transition-duration': '0.3s'});
}else{
$('#kn-app-menu').css({'position': 'static', 'width': '100%'});
}
})
});


But I do not know how to do it-I have no Web programming skills. This CSS code not working

'-o-transition-duration': '0.3s', 'transition-duration': '0.3s'

6

Great idea Alexander, I’d be keen to have this working as well.