登录后我正在寻找类似LinkedIn标头功能的解决方案。
标题固定在顶部。
标题后一个div(.topBlocks),滚动后应隐藏并显示-通过使用以下代码完成]]
$(window).scroll(function(){
if ($(this).scrollTop() > 0) {
$('.topBlocks').fadeOut("slow", 0);
} else {
$('.topBlocks').fadeIn();
}
});
我已经这样做了...
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如下,>
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'); } });
登录后,我正在寻找类似LinkedIn头功能的解决方案。标头固定在顶部。标头后一个div(.topBlocks),滚动后应隐藏并显示-通过使用...
我尝试重建Linkedin标头的效果,不知道这是否对您有帮助。
$(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();
}
});
尝试一下