在Javascript中,在滚动时隐藏div并在鼠标悬停时显示它

时间:2014-01-14 06:30:24

标签: javascript jquery hover mouseevent mouseover

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

  1. 标题已固定在顶部。

  2. 标题后的一个div(.topBlocks),滚动后应隐藏并显示 - 使用以下代码完成

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

  3. 内容向下滚动后
  4. ...在标题(.topBlocks)的moseover上,div应隐藏并显示而不移回内容..并重置css

  5. 我这样做了......

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

2 个答案:

答案 0 :(得分:0)

我尝试重建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/

答案 1 :(得分:0)

试试这个

<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