[英]In Javascript, Hiding a div when scrolling and showing it on mouseover
登錄后,我正在尋找類似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 header的效果,不知道能不能幫到你。
$(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();
}
});
試試這個
<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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.