I am searching for a solution like LinkedIn header functionality after login.
header is fixed on top.
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();
}
});
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');
}
});
I try to rebuild the effect of the Linkedin header, I don't know if this can help you.
$(window).scroll(function() {
if($(this).scrollTop() == "0") {
$('#hiddenHeader').show();
} else {
$('#hiddenHeader').hide();
}
});
$('#header').mouseenter(function() {
$('#hiddenHeader').css("top", "50px").show();
}).mouseleave(function() {
if($(window).scrollTop() != "0") {
$('#hiddenHeader').hide();
}
});
Try this out
<div class="fixedhead">header tag with</div>
<div class="item">red div1 red div1 red div1 red div1
<br/>
</br/>red div1 red div1 red div1 red div1</div>
css
.fixedhead {
position: fixed;
top: 0;
width: 100%;
height:60px;
background-color:green;
z-index: 999;
}
.item {
background-color:red;
margin: 60px auto 0;
width: 100%;
height:510px;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.