在Javascript中，滚动时隐藏一个div并在鼠标悬停时显示它答案

【问题标题】：In Javascript, Hiding a div when scrolling and showing it on mouseover在Javascript中，滚动时隐藏一个div并在鼠标悬停时显示它
【发布时间】：2014-01-14 06:30:23
【问题描述】：

我正在寻找类似LinkedIn 登录后标头功能的解决方案。

标题固定在顶部。
标题后的一个 div(.topBlocks)，滚动后应该隐藏和显示 - 使用以下代码完成

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

内容向下滚动后...并且在标题 (.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');
    }
});

【问题讨论】：

标签： javascript jquery hover mouseevent mouseover

【解决方案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/

【讨论】：

当前滚动时会隐藏，但我忘了应该向下滚动隐藏/向上滚动显示，你想让我完成吗？

【解决方案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

【讨论】：