Response title
This is preview!
Extra space in body and lack of scrolling in mobile when container is moved up, partially off canvas.
in Using jQuery
•
8 years ago
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 URL: http://goo.gl/2yxdHe
Here is a JS Fiddle replicating the problem: http://jsfiddle.net/RVvJT/3/
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;
- }
- });
1