/*监听滚动条和左侧菜单点击事件 */ 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
躺平的momo
相关分类