jquery - 尝试在粘性菜单中实现平滑过渡

Question

你好，

我有一个 Logo ，一旦用户开始向下滚动并且 Logo 从屏幕上移开，它就会固定在顶部。 Logo 也变小了。

这是我的代码:

//<![CDATA[
    $(function(){
            // Check the initial Poistion of the Sticky Header
            var stickyHeaderTop = $('#logo').offset().top + 160;
     
            $(window).scroll(function(){
                    if( $(window).scrollTop() > stickyHeaderTop ) {
                            $('#logo').addClass('fixed');
                    } else {
                            $('#logo').removeClass('fixed');
                    }
            });
      });//]]>

    #logo {
        height: 145px;
        margin: 10px 0 0;
        transition:all 1s ease 0s;
        top: -160px;
        color:black;
        background-color:yellow;
    }
    .fixed {
        height: 55px !important;
        position: fixed;
        top: 0!important;
        z-index: 3;
    }

    body {min-height:1000px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="logo">SOME LOGO HERE</div>

向下滚动时一切正常，因为动画很流畅。然而，当您向上滚动时，过渡是不稳定的，因为该元素只是消失并重新出现，而不是逐渐回到原来的位置。

我该如何解决这个问题？

谢谢。

Answer 1

你需要修复 Fixed class.update 的宽度并添加以下内容到 .fixed

//<![CDATA[
    $(function(){
            // Check the initial Poistion of the Sticky Header
            var stickyHeaderTop = $('#logo').offset().top + 160;
     
            $(window).scroll(function(){
                    if( $(window).scrollTop() > stickyHeaderTop ) {
                            $('#logo').addClass('fixed');
                    } else {
                            $('#logo').removeClass('fixed');
                    }
            });
      });//]]>

#logo {
        height: 145px;
        margin: 10px 0 0;
        transition:all 1s ease 0s;
        top: -160px;
        color:black;
        background-color:yellow;
    }
    .fixed {
        height: 55px !important;
        width: 100%;
        width: -moz-available;          /* WebKit-based browsers will ignore this. */
        width: -webkit-fill-available; 
        position: fixed;
        top: 0!important;
        z-index: 3;
    }

    body {min-height:1000px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="logo">SOME LOGO HERE</div>