试图在粘菜单来实现平稳过渡

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

你需要修复固定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

1. 不要使用id选择（#）是CSS。它倾向于创建您已经遇到的特定性问题，并迫使您在.fixed选择器中使用!important（您应该使用几乎从不使用）。详细了解它here或here。是的，有一些有效的例外情况，但只有在确切知道您在那里做了什么以及为什么这样做后，您才需要应用这些例外。

2. 您不能动画position属性，因此您需要找到一个解决方案，其中position: fixed;不会更改。切换到固定位置可能会导致不平滑的行为。

3. 使用此更正的代码段的代码工作的方式来解决方案。

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

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

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