I am searching for a solution like [LinkedIn](https://www.linkedin.com/?trk=nav_logo) header functionality after login.

1. header is fixed on top.
2. one div(.topBlocks) after header, after scrolling it should be hide and show- its done by using following code

```
$(window).scroll(function(){
    if ($(this).scrollTop() > 0) {
        $('.topBlocks').fadeOut("slow", 0);     
    } else {
        $('.topBlocks').fadeIn();
    }
});

```

3. after content scrolls down... and on moseover of header (.topBlocks) div should be hide and show without moving back content.. and reset css

I have done it like this...

HTML :

```
<header>some content goes here, height is fixed 33px </header>

<section>
    <div class="topBlocks"> some content goes here, height is fixed 123px, width 635</div>
    <div class="wrapper">
        <div class="fixedLeftSection"></div>
        <div class="stickyListWrap"> blog type content, so it scrollable </div>
    </div>
</section>

```

CSS :

```
header {
    width: 100%;
    background: #474747;
    min-height: 33px;
    padding: 11px 0;
    position: fixed;
    top: 0;
    z-index: 1000;
}
.wrapper {
    width: 940px;
    margin: auto;
    padding: 0 10px;
}
.topBlocks {
    width: 635px;
    margin: auto;
    background: #e7e7e7;
    height:123px;
}
.fixedLeftSection {
    position: fixed;
    top: 85px;
}
.stickyListWrap {
    margin-top: 30px;
}

```

Javascript as follows for on header hover hide and show

```
var hoverMenu = $('.topBlocks'),
hoverSpace = $('header'),
secWrap = $('#mainSectionWrap');

$(window).scroll(function () {
    if ($(this).scrollTop() > 0 && !$('header').hasClass('open')) {
        $('.topBlocks').fadeOut("slow", 0);
    } else {
        $('.topBlocks').fadeIn();
    }
});

$('header').mouseover(function (e) {
    if ($(window).scrollTop() > 0) {
        e.stopPropagation();
        $('.topBlocks').addClass('testThing');
        $('.topBlocks').css("display", "block");
    }
});

$('.topBlocks').mouseleave(function (e) {
    if ($(window).scrollTop() >= 0) {
        e.stopPropagation();
        $('.topBlocks').css("display", "none");
        $('.topBlocks').removeClass('testThing');
    }
});             

```