If the viewport / window height is 636px or less, I style the container of my site 216px higher, ( `top:-216px` ).
This creates extra space below the container and in the body.
This also causes the document to not scroll on some mobile devices.
What I'm trying to do is make part of my header off canvas, thus making more room for the content to be above-the-fold / in the viewport / window.
How can I do this and still have scrolling work?
Also how can I get rid of the extra space in the `<body>`? I tried `$('body').css('height', $('body').height() - 216);`, but that makes the body ridiculously small, in height, and the document is still the same size.
Here is the javascript / jQuery that moves the header partially off canvas if at any point, during load or resize, the window is less than 636px in height:
- var headerPulledDown = false;
- var headerCanvas = null;
- var vh = $(window).height();
- $(window).on('resize', function(){
- vh=$(window).height();
- if(headerPulledDown === false){
- if(vh <= 636){
- $('#pseudobody').css('top', -216);
- $(document).css('height', $(document).height() - 216);
- $('#pullDownTab').fadeIn();
- headerCanvas = false;
- $('#pseudobody').draggable({
- axis:'y',
- handle:'#pullDownTab',
- drag: function(event, ui){
- if(ui.position.top < -216 || ui.position.top > 0){
- return false;
- }
- if(ui.position.top >= -42){
- $(this).animate({top:'0'});
- $('#pullDownTab').fadeOut();
- headerPulledDown = true;
- headerCanvas = true;
- return false;
- }
- }
- });
- }
- else if(vh > 636){
- $('#pseudobody').css('top', '0');
- $('#pullDownTab').fadeOut();
- headerCanvas = true;
- $('#pseudobody').draggable({
- drag: function(){
- return false;
- }
- });
- }
- }
- });
- if(vh <= 636){
- $('#pseudobody').animate({top:'-216'});
- $(document).css('height', $(document).height() - 216);
- $('#pullDownTab').fadeIn();
- headerCanvas = false;
- $('#pseudobody').draggable({
- axis:'y',
- handle:'#pullDownTab',
- drag: function(event, ui){
- if(ui.position.top < -216 || ui.position.top > 0){
- return false;
- }
- if(ui.position.top >= -42){
- $(this).animate({top:'0'});
- $('#pullDownTab').fadeOut();
- headerPulledDown = true;
- headerCanvas = true;
- return false;
- }
- }
- });
- }
- else if(vh > 636){
- $('#pseudobody').animate({top:'0'});
- $('#pullDownTab').fadeOut();
- $('#pseudobody').draggable({
- drag: function(){
- return false;
- }
- });
- }
- $('#pullDownTab, header, #header, [role="banner"]').on('click', function(event){
- if(headerCanvas === true){
- $('#pseudobody').animate({top:'-216'});
- $(document).css('height', $(document).height() - 216);
- headerCanvas = false;
- }
- else if(headerCanvas === false){
- $('#pseudobody').animate({top:'0'});
- $('#pullDownTab').fadeOut();
- headerCanvas = true;
- }
- });