2015-10-06 29 views
0

我想实现一个类似于亚马逊或沃尔玛的固定标题。 我使用下面的代码固定标题滑动效果不起作用

<script> 

$(window).scroll(function(){ 
     var sticky = $('#pts-mainnav') 
    var sticky2 = $('#pts-verticalmenu'), 
     scroll = $(window).scrollTop(); 
     if (scroll >= 220){ 
      sticky.slideDown('2000', "swing"); 
      sticky.addClass('fixed'); 
     sticky2.addClass('dropdown-fixed'); 
    $('#b').show(); 
    $('#fixed-usermenu').show(); 
    $('#fixed-verticalmenuid').show(); 
    $("#categoriesname").html("&nbsp;"); 
     }else{ 
      sticky.removeClass('fixed'); 
     sticky2.removeClass('dropdown-fixed'); 
    $('#b').hide(); 
    $('#fixed-usermenu').hide(); 
    $('#fixed-verticalmenuid').hide(); 
    $("#categoriesname").html("Όλα τα προϊόντα"); 
      sticky.removeAttr("style"); 
     sticky.removeAttr("class"); 
     } 
    }); 


    </script> 

,然后将下面的.css

@media all and (min-width: 780px){ 
    .fixed { 
     position:fixed; 
     top:0; 
     z-index:9999; 
     width:100%; 
     max-width:1250px; 
     -webkit-transition: all 0.5s ease-in-out 0s; 
     -o-transition: all 0.5s ease-in-out 0s; 
     transition: all 0.5s ease-in-out 0s; 
     -webkit-box-shadow: 0 0 3px #333333; 
     box-shadow: 0 0 3px #333333; 
    } 
    .dropdown-fixed {width:68px;} 
} 

而且althoug固定头的工作,我不能ajust下拉作用的行为类似于亚马逊或沃尔玛。

代码是否正确? 我会真的很高兴,如果有人能帮助我

您可以在以下网址here

回答

0

在行动中看到的头打转转之后,并从IRC频道的一些提示:所有我需要添加了顶部: -95px;到.css的pts-mainnav部分