Big thanks to Alexander Afanasiev who got this started and see the discussion here http://helpdesk.knackhq.com/support/discussions/topics/5000011265.
This works by fixing the tab menu to the top when scrolling has lifted it to the top - or beyond the height of the 'knack-logo' element.
Add this to the Javascript window in App settings.
$(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></p><p>Again big thanks to Alexander for getting this started. </p>
you don't need any javascript to do this. If you just want the navigation to stay at the top from the beginning, just give it a position:fixed. Of course, this means doing all your layout work correctly.Look at this fiddle for a good example of how to accomplish this.basically theres a parent element that's fixed, and the child element inside can be styled however you want.generally when I build websites, I create a class called "website-width" which is the width area that I want website content to fall inside of. And inside of every section of my website, I add another div, give it this class "website-width" and put all content inside of it. This will keep all your website content in a fixed width so its consistent, and it makes it easier to extend or update than if you have one giant div with width:1000px with everything in it
After the discussion comments, it appears you have to bind a click on a new tab, to reset the scrolling state of other tabs, maybe in a way like this ?
var resetScrollingStateOnOtherTabs = function () {
$('.tabs:not(.active)').css({
// [...]
});
}
$('.tabs').on('click', function (e) {
// Add a class to the clicked tab
// ONLY IF THERE IS NOT ALREADY ONE !
// The goal of this is only to separate the CSS rules...
$('.tabs').removeClass('active');
$(this).addClass('active').css({
// [...]
});
resetScrollingStateOnOtherTabs();
});
you don't need any javascript to do this. If you just want the navigation to stay at the top from the beginning just give it a position:fixed. Of course, this means doing all your layout work correctly.Look at this fiddle for a good example of how to accomplish this.basically theres a parent element that's fixed, and the child element inside can be styled however you want.generally when I build websites, I create a class called "website-width" which is the width area that I want website content to fall inside of. And inside of every section of my website, I add another div, give it this class "website-width" and put all content inside of it. This will keep all your website content in a fixed width so its consistent, and it makes it easier to extend or update than if you have one giant div with width:1000px with everything in it
After the discussion comments, it appears you have to bind a click on a new tab, to reset the scrolling state of other tabs, maybe in a way like this ?
var resetScrollingStateOnOtherTabs = function () {
$('.tabs:not(.active)').css({
// [...]
});
}
$('.tabs').on('click', function (e) {
// Add a class to the clicked tab
// ONLY IF THERE IS NOT ALREADY ONE !
// The goal of this is only to separate the CSS rules...
$('.tabs').removeClass('active');
$(this).addClass('active').css({
// [...]
});
resetScrollingStateOnOtherTabs();
});
aws training in chennai | informatica training in chennai | hadoop training in chennai
This is a nice improvement. I do notice modal pop ups behave differently depending on the page position. Compare the following use cases:
1. Page is a the top so there is no scrolling > Click a link with a modal pop up. The result is normal behavior. The pop up appear at the top and fully overlays the menu bar.
2. Scroll down so that some of the page goes above and "under" the menu bar > Click a modal pop. The result is that the pop up appears, but the menu bar overlays the title of the modal pop up.
Is there an adjustment that will allow the pop up to appear on top in all cases?
Thanks!