jQuery 向下滑动 div 越过页面的其余部分

Question

所以我有一个 div 并且我试图让它向下滑动以显示联系信息，我想要一种类似于 TheGeekDesigner 网站的效果。如果您单击 link 并滚动到底部并单击 "How To Reach Me"，他的联系信息将滑过页面。

我一直无法让我的代码工作。这是我当前的代码：

HTML

<footer>
    <i class="icon icon-plus-circle icon-3x" id="icon"></i>        
</footer>

<div class="contact-info">
    <section id="exit">
        <a class="exit"><h2>X</h2></a>
    </section>
    <aside id="links">
        <h3>LINKS</h3>
        <p>Follow the links to see site's I've developed!</p>
        <a href="#">Site Link</a>
    </aside>
    <section id="form">
       <form>
       </form>
    </section>
    <section id="social-media"></section>
</div>

CSS

.contact-info {
    position:fixed;
    width:100%;
    height:100%;
    background-color: orange;
    z-index:98;
    display:none;
    top:0;
    left:0;
}

jQuery

$(document).ready(function() {
    //runs when the DOM is ready
    //function showContactPage shows the contact page
    function showContactPage() {         
        $(this).find('.contact-info').slideToggle();       
    }

    $('#icon').on('click', showContactPage);  
    $('#exit').on('click', 'a', showContactPage);  
});

Answer 1

只需从您的函数中删除 $(this).find... 即可。

function showContactPage() {
    $('.contact-info').slideToggle();
}

fiddle

它没有用，因为您正在搜索页脚内 class 为 contact-info 的 div，但它不存在。

jQuery 向下滑动 div 越过页面的其余部分

jQuery slide down div over rest of page

html

jquery

window

slidetoggle