关于右侧楼层导航,到底部距离400px时,自动隐藏。怎么继续写这个JavaScript呢?

	/*监听滚动条和左侧菜单点击事件 */
            var _arr = [];
            window.onscroll = function(){
                if(800 < $(document).scrollTop()){
                    $('.nav_Sidebar').fadeIn('slow');
                }else{
                    $('.nav_Sidebar').fadeOut('slow');
                }
                scrollBottomTest();
                $('.home-standard-layout').each(function(index){
                    var that = $(this);
                    that.index = index;
                    if($(document).scrollTop() + $(window).height()/2 > that.offset().top){
                        _arr.push(index);
                    }
                }); 
                if(_arr.length){
                    $('.nav_Sidebar a').eq(_arr[_arr.length-1]).css({'backgroundImage':'url('+SHOP_SITE_URL+'/templates/default/images/home-nav-icon-hover.png)'}).addClass('current').siblings().css({'backgroundImage':'url('+SHOP_SITE_URL+'/templates/default/images/home-nav-icon.png)'}).removeClass('current');
                    _arr = [];
                }
            }
            $('.nav_Sidebar a').each(function(index){
                $(this).click(function(){
                    $('html,body').animate({scrollTop: $('.home-standard-layout').eq(index).offset().top - 20 + 'px'}, 500);
                }).mouseover(function(){
                    if($(this).hasClass('current')){
                        return;
                    }else{
                        $(this).css({'backgroundImage':'url('+SHOP_SITE_URL+'/templates/default/images/home-nav-icon-hover2.png)'});
                    }
                }).mouseout(function(){
                    if($(this).hasClass('current')){
                        return;
                    }else{
                        $(this).css({'backgroundImage':'url('+SHOP_SITE_URL+'/templates/default/images/home-nav-icon.png)'});
                    }
                });
            });
              /* 距离顶部 楼层消失 */
            window.onload = window.onresize = function(){
                if($(window).width() < 1300 || 800 > $(document).scrollTop()){
                    $('.nav_Sidebar').fadeOut('slow');
                }else{
                    $('.nav_Sidebar').fadeIn('slow');
                }
            }
			/*end*/
				//$("#js_banner_top").show();
				$("#js_banner_top").slideDown(800);

});
<div class="nav_Sidebar" style="display: block;">
    <a class="nav_Sidebar_1" href="javascript:;" style="background-image: url(    mplates/default/images/home-nav-icon.png);"></a>
    <a class="nav_Sidebar_2" href="javascript:;"></a>
    <a class="nav_Sidebar_3" href="javascript:;"></a>
    <a class="nav_Sidebar_4" href="javascript:;"></a>
    <a class="nav_Sidebar_5" href="javascript:;"></a>
    <a class="nav_Sidebar_6" href="javascript:;"></a> 
    <a class="nav_Sidebar_7" href="javascript:;"></a>
    <a class="nav_Sidebar_8" href="javascript:;"></a>
</div>
.nav_Sidebar {
    width: 50px;
    height: 396px;
    position: fixed;
    bottom: 100px;
    left: 50%;
    margin-left: -660px;
    display: none;
}

顶部的实现了,到底部时,隐藏,我写了几次,实现不了,求大神帮助。  测试网站 shopnc.96567.com 

班大人
浏览 1871回答 1
1回答

躺平的momo

获取整个页面的高度减去400,鼠标滑动到这个位置时设置隐藏
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript