如何使內容在固定div中順利滾動以及滾動頁面

我正嘗試創建一個固定的頂部導航菜單，並在向下滾動頁面時更改菜單。當您滾動某個y點時，當您向下滾動頁面時，菜單將滾動顯示將變粘的第二個菜單。我實現了一個粗略的版本在這裏：http://jsfiddle.net/hSpLQ/如何使內容在固定div中順利滾動以及滾動頁面

我有兩個主要問題

1）內容並不順利滾動。如果您快速滾動，您會注意到內容移動不順暢。

2）我不確定這是實現這種類型的動畫/效果的最佳方式。代碼很粗糙，但我想知道是否有更好/更優化的方法來實現這一點。

感謝

下面是粗糙的原型代碼（相同的jsfiddle鏈接）

<html lang="en"> 
    <head> 
     <style type="text/css"> 
      body{ 
       height: 2000px; 
      } 

      .container { 
       position: fixed; 
       top: 0px; 
       left: 0px; 
       width: 100%; 
       background-color: #CCC; 
       height: 80px; 
       overflow: hidden; 
      } 

      .content1, .content2 { 
       height: 40px; 
       margin: 40px; 
      } 
     </style> 

    </head> 
    <body> 
     <div class="container"> 
      <div class="content"> 
       <div class="content1"> 
        lots of text 
       </div> 
       <div class="content2"> 
        more text 
       </div> 
      </div> 
     </div> 
    </body> 

    <script src="js/jquery.min.js"></script> 

    <script type="text/javascript"> 
     $(window).scroll(function() { 
      var scrollYpos = $(document).scrollTop(); 
      if (scrollYpos > 200 && scrollYpos < 300) { 
       var y = 200-scrollYpos; 
       $(".content").css({'position': 'relative', 'top': y}); 
      } 
     }); 
    </script> 

</html>

來源

2013-07-21 user41293

既然你無法控制用戶的CPU，瀏覽器，瀏覽器版本，甚至顯卡等有你可以做的並不多。您可以嘗試使用vanilla JavaScript而不是jQuery來提高性能，但它可能不會有太大的幫助（它可能不會改變任何事情，取決於渲染或腳本解釋器是否緩慢）。例如，
在我的瀏覽器中，您的示例運行得非常順利。
這真的取決於你的客戶如何看，這只是網絡。不要太擔心。

最後有兩件事我注意到：

你不必設置「位置：親屬」每收到一個滾動的事件，就在你的樣式設置一次
如果一個卷軸過快的菜單卡在一個奇怪的位置

這裏是解決上述問題，雖然它可能不修復平整度問題的代碼：

$(window).scroll(function() { 
    var scrollYpos = $(document).scrollTop(); 

    var y; 
    if (scrollYpos > 200 && scrollYpos < 300) { 
     y = 200 - scrollYpos; 
    } else if (scrollYpos > 300) { 
     y = -100; 
    } else { 
     y = 0; 
    } 

    console.log(y); 
    $(".content").css({'top': y}); 
});

如果你只是想平滑滾動間隔位之間的差距，試試這個：

$(window).scroll(function() { 
    var scrollYpos = $(document).scrollTop(); 

    var y; 
    if (scrollYpos > 200 && scrollYpos < 300) { 
     y = 200 - scrollYpos; 
    } else if (scrollYpos > 300) { 
     y = -100; 
    } else { 
     y = 0; 
    } 

    var position = parseInt($(".content").css('top')); 
    if((scrollYpos < 300 && scrollYpos > 200) 
    || (position < 0 && position > -100)) { 
     $(".content").stop().animate({'top': y}, 50); 
    } 
});

來源

2013-07-21 21:04:50 alexander255

感謝編輯的JavaScript。我最終改變了它的工作方式，使它滾動更順暢。不是根據滾動的像素數來移動內容，而是在特定的滾動點上進行動畫製作。我很感激幫助。 – user41293

如何使內容在固定div中順利滾動以及滾動頁面

回答

相關問題