Question

我正在尝试实现类似亚马逊或沃尔玛的固定标头。我使用以下代码

    <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;}
}

虽然固定标头正常工作但我不能将下拉效果调整为亚马逊或沃尔玛。

代码是否正确？如果有人能帮助我，我真的很高兴

您可以在以下网址here

中查看标题

Answer 1

从irc频道玩了一些提示之后：我需要添加的所有内容都是顶级：-95px;到.css

的pts-mainnav部分

固定标题滑动效果不起作用

1 个答案: