在Javascript中，滾動時隱藏div並在鼠標懸停上顯示它

Question

我在登錄後正在尋找類似LinkedIn標題功能的解決方案。

1. 標頭固定在最上面。

2. 一個DIV（.topBlocks）頭之後，滾動它應該是隱藏和顯示 - 使用下面的代碼

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

3. 內容向下滾動後的完成後...以及moseover頭（.topBlocks）DIV應該是隱藏和顯示沒有搬回內容..和重置CSS

我已經做了這樣的...

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'); 
    } 
});    

Answer 1

我嘗試重建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(); 
    } 
}); 

http://jsfiddle.net/sing0920/wM7w2/

Answer 2

嘗試了這一點

<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; 
} 

Fiddle reference