当用户向上滚动页面时向下滑动div

Question

我正在尝试创建一个向下滚动页面时滑动divison标签的功能，然后在用户向上滚动指定位置的页面时向下滑动divison。

我已经在我的特定值之后向上滑动了，但是在用户向上滚动时无法弄清楚如何再次向下滑动它。我试图让我的标题内容的上半部分向下滚动，并在向上滚动时显示。

我得到的另一个问题是当您向下滚动页面后，它会再次触发幻灯片。

HTML：

<header class="header">
    <div class="header-top">
        <div class="logo-top">Westring</div>
    </div>
    <a href="#" class="logo"><img src="img/logo-icon.png" alt="Westring-kbh logo" width="70" height="70"></a>
    <nav class="menu">
        <div class="menu_item">
            <a href="#" class="menu_links"><span class="hidetext">Grafisk </span>Design<span class="menu_line"></span></a>
            <div class="menu_item_fix1">
                <a href="#" class="menu_expand_item"><span class="link_border_effekt">Branding</span></a>
                <a href="#" class="menu_expand_item">Produktion</a>
                <a href="#" class="menu_expand_item">Ngo'er</a>
                <a href="#" class="menu_expand_item">Kampagner</a>
            </div>
        </div>
        <div class="menu_item">
            <a href="#" class="menu_links">Web<span class="menu_line"></span></a>
            <div class="menu_item_fix2">
                <a href="#" class="menu_expand_item">Design</a>
                <a href="#" class="menu_expand_item">Shops</a>
                <a href="#" class="menu_expand_item">Optimering</a>
                <a href="#" class="menu_expand_item">Udvikling</a>
            </div>
        </div>
        <div class="menu_item">
            <a href="#" class="menu_links">Marketing<span class="menu_line"></span></a>
            <div class="menu_item_fix2">
                <a href="#" class="menu_expand_item">Seo</a>
                <a href="#" class="menu_expand_item">Sem</a>
                <a href="#" class="menu_expand_item">Sociale medier</a>
                <a href="#" class="menu_expand_item">Direct mail</a>
            </div>
        </div>
        <div class="menu_item">
            <a href="kontakt.html">Kontakt</a>
        </div>
    </nav>
    <div class="social_section">
        <a href="#" class="social_expand">
            <div class="facebook">
                <p class="social_share">Facebook</p>
            </div>
        </a>
        <a href="#" class="social_expand">
            <div class="twitter">
                <p class="social_share">Twitter</p>
            </div>
        </a>
    </div>
</header>

CSS：

.header-top {
    width: 100%;
    max-width: 1280px;
    height: 90px;
    margin: 0 auto;
    background: #F8F8F8;
}
.logo-top {
    font-size:40px; 
    color:#333;
    margin: 0 auto;
}
.header {
    width: 96%;
    max-width: 1280px;
    height: auto;
    top: 0;
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
}
.logo {
    width: 70px;
    height: 70px;
    float: left;
}
/******* Menu ********/
.menu {
    float: left;
    display: inherit;
}
.menu_item {
    float: left;
    width: 110px;
    height: 70px;
    border-right: 1px solid #303F4A;
    overflow: hidden;
    position: relative;
}
.menu_links::after {
    content: " :";
    color: #171F29;

}
.menu_links {
    position: relative;
}
.menu_line {
    position: absolute;
    right: 0;
    top: 15px;
    width: 1px;
    background-color: #161E28;
    height: 40px;
    opacity: 0;
}
.menu_item:hover .menu_line {
    opacity: 1;
}
.menu_item:hover .menu_links::after {
    height: 50px;
    margin-top: 10px;
    content: " :";
    text-align: center;
    color: #fff;
}
.menu_item a {
    text-decoration: none;
    float: left;
    color: #fff;
    width: 110px;
    line-height: 70px;
    text-align: center;
}
.menu_item:hover .menu_expand_item {
    opacity: 1;
}
.menu_item:nth-child(1):hover {
    width: 490px;
}
.menu_item:nth-child(2):hover,
.menu_item:nth-child(3):hover {
    width: 460px;
}
.menu_item_fix1 {
    width: 490px;
}
.menu_item_fix2 {
    width: 460px;
}

.menu_item .menu_expand_item {
    opacity: 0;
    margin-left: 10px;
    height: 13px;
    padding:10px;
    margin-top: 19px;
    width: auto;
    line-height: 13px;
    border-radius: 15px;
}
.menu_expand_item:hover {
    background-color: #171F29;
    border-radius: 15px;
    width: auto;
}

/******* Social share in menu ********/
.social_section {
    float: right;
    width: auto;
    display: inherit;
}
.social_expand {
    float: left;
    width: 60px;
    height: 70px;
    color: #fff;
    border-left: 1px solid #303F4A;
    overflow: hidden;
}
.social_expand:hover {
    width: 130px;
}
.social_share {
    color: #fff;
    opacity: 0;
    margin-left: 50px;
    height: 70px;
    float: left;
    line-height: 70px;
    vertical-align: middle;
    text-decoration: none;
}
.social_expand:hover .social_share {
    opacity: 1;
}
.facebook {
    background: url(../img/facebook_icon.png) no-repeat center center;
}
.twitter {
    background: url(../img/twitter_icon.png) no-repeat center center;
}

JS：

<script>
    $(window).scroll(function(){
        if($(window).scrollTop() > 40){
            $(".header-top").slideUp();
        }
    });
</script>

以下是Fiddle Demo