Question

我正在尝试隐藏主要内容背后的主菜单和徽标，并在用户徘徊在页面顶部附近时按下主要内容并显示标题。

我可以将所有内容推送到悬停状态，然后在用户离开悬停区域时向后滚动。然而，有两个问题已经发挥作用，我无法弄清楚如何解决：

如何在徽标位于叠加层下方时点击徽标
如何保持标题打开，以便在主导航位于叠加层下方时能够点击主导航。当我尝试将鼠标悬停在导航项目上时，内容会向上滚动。

所以我需要做的就是能够点击叠加层下方的元素，并在滚动主导航区域时保持标题显示。

Here is the code and fiddle I have so far：

HTML：

<div id="uber">
<div id="menu-toggle">
    Menu toggle (hover over me)
</div>
<header class="l-header" id="header">
    <div class="logo">
        <a href="#">Logo needs to be clickable</a>
    </div>
    <nav class="navbar" id="main-navbar">
        <ul class="nav nav-justified">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
        </ul>
    </nav>
</header>
<div class="l-content-main" id="main">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet nibh id nulla placerat tincidunt sit amet vitae lectus. Vivamus porttitor sapien lorem, et condimentum dui posuere sed. Aliquam vestibulum varius posuere. Maecenas placerat nibh eu nulla lobortis scelerisque. Donec nec elit eget lorem viverra tincidunt. Nam dapibus augue arcu. Vivamus iaculis ornare velit facilisis gravida. Mauris nibh diam, ultricies in risus sit amet, fermentum blandit diam.</p>
    <p>Integer mollis varius felis, eu vehicula ante vestibulum eget. Nam consectetur eros sodales diam imperdiet, et sollicitudin ante fringilla. Pellentesque nec ligula et magna convallis sollicitudin a vel ante. Quisque tristique nec augue a fringilla. Nunc ultrices, lacus eget finibus eleifend, massa orci ultricies nisl, id fermentum nisl libero id turpis. In at ligula aliquet, interdum metus non, pretium diam. Sed in laoreet magna. Quisque at ipsum eget justo semper sodales at id augue. Maecenas massa ipsum, pharetra a aliquam eget, sollicitudin nec elit.</p>
</div>

JS：

$('#menu-toggle').hover(
    function() {
        $('#main').addClass('is-active');
    },
    function() {
        $('#main').removeClass('is-active');
    }
);

CSS：

#uber {
    position: relative;
}
#menu-toggle {
    position: absolute;
    top: 0;
    width: 100%;
    height: 60px;
    cursor: pointer;
    z-index: 20;
    background-color: #FFF;
    opacity: .5;
}
#header {
    padding-top: 30px;
    height: 110px;
    background-color: goldenrod;
    overflow: hidden;
}
.logo {
    width: 100%;
    height: 30px;
    text-align: center;
}
.logo a {
    padding-top: 10px;
    width: 100%;
    height: 20px;
}
.navbar ul {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 50px;
    overflow: hidden;
    list-style: none;
}
.navbar li {
    margin: 0;
    padding: 0;
    float: left;
}
.navbar a {
    display: block;
    margin: 0;
    padding: 10px;
    height: 30px;
}
#main {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 80px 50px;
    background: lightgrey;
    -webkit-transition: all 300ms ease;
    -moz-transition:    all 300ms ease;
    -ms-transition:     all 300ms ease;
    -o-transition:      all 300ms ease;
    transition:         all 300ms ease;
    z-index: 10;
}
#main p {
    margin-top: 0;
    padding-top: 0;
}
#main.is-active {
    margin-top: 110px;
}

Answer 1

您可以将#header选择器添加到jQuery，当您将鼠标悬停在is-active或#menu-toggle上时，可以应用#header课程。< / p>

$('#menu-toggle, #header').hover(
    function() {
        $('#main').addClass('is-active');
    },
    function() {
        $('#main').removeClass('is-active');
    }
);

徽标链接无法点击，因为#menu-toggle正在覆盖它。降低div的高度以使基础元素可用 - 25px似乎有效。

#menu-toggle {
    position: absolute;
    top: 0;
    width: 100%;
    height: 25px;
    cursor: pointer;
    z-index: 20;
    background-color: #FFF;
    opacity: .5;
}

在此处查看：https://jsfiddle.net/wxu21eLb/6/

Answer 2

尝试使用.appendTo()

$('#menu-toggle').hover(
    function() {
        $(".logo a").appendTo(this);
        $('#main').addClass('is-active');
    },
    function() {
        $(this).find("a").appendTo(".logo");
        $('#main').removeClass('is-active');

    }
);

jsfiddle https://jsfiddle.net/wxu21eLb/4/

悬停时保持元素打开

2 个答案: