Question

您好，

当用户开始向下滚动并且徽标从屏幕上移开时，我有一个固定在顶部的徽标。徽标也变小了。

这是我的代码：

//<![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>

Answer 2

不使用id选择器（#）是CSS。它往往会产生您已经遇到的特殊性问题，并迫使您在!important选择器中使用.fixed（您应该几乎从不使用）。详细了解here或here。是的，有一些有效的例外情况，但只有在您确切知道自己在那里做什么以及为什么这样做之后，您才需要应用这些例外。
您无法为position属性设置动画，因此您需要找到position: fixed;不会更改的解决方案。切换到固定位置可能会导致行为不顺畅。
使用此更正的代码段代码来解决问题。

＆＃13;

$(document).ready(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');
    }
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: