如何使内容在固定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中顺利滚动以及滚动页面

回答

相关问题