Click the contents of the fixed position header

Question

I created a script for the problem in the link here

The header and footer are absolutely spaced and 100% wide. The average content consists of a dashboard table. The title consists of two images that, when clicked, will switch from the content.
When I click slide-toggle-1, the content is displayed headerbottombar.
But the average content is hidden and blocked.
How can I correctly show the contents of average content when I click slide-button-1and slide-button-2.
I would like to thank for all the suggestions and solutions. The solutions are acceptable either in css, jquery and javascript if possible solutions are presented.

Answer 1

Why aren't you trying to add a class with margin-top to bring the div down as much as needed. Like this:

.top{ margin-top:100px; }

Add this to you div with ".content". In this way:

<div class="content top">

Then just switch it to 2 clicks, for example:

$( ".content" ).toggleClass( "top" );

You can specify additional styles, but this is the main run.

Answer 2

Update: If you want a variable-height header to be sticky at the top, you may have to use some javascript that dynamically adjusts the top edge of the content

var offset = document.getElementById("sticky-top-id").offsetHeight;
document.getElementById("content-id").style.marginTop = offset + 'px';

Source

Old answer:

, . - relative ( ). fixed absolute, . .

: https://jsfiddle.net/d0pyxdoj/3/

P.S. / fixed , absolute

Answer 3

, . script .

Script:

function heightCalc(){
         topHeight = $('.sticky-top').height();
       $('.content').css({"margin-top": topHeight+"px"});
     }

Fiddler: https://jsfiddle.net/scj4u0t5/1/