試圖在粘菜單來實現平穩過渡

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>