jquery - Div 使用 Jquery 滚动页面

Question

我正在尝试让我的菜单随用户滚动。

这相对简单地使用:

#main-header-wrapper {
    width: 100vw;
    height: 75px;
    position: absolute;
    top: 0;
    left: 0;
}

我想要的是一种动画类型的滚动，它可以使用 JQuery 实现:

$(window).scroll(function(){
  $("#main-header-wrapper").stop().animate({"marginTop": ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
});

使用此 Jquery 解决方案，菜单栏会在用户停止滚动后从顶部向下滑动。

但是当用户向上滚动时，在向上滚动之前，该栏似乎“粘”在页面上。

我想要实现的是向下滚动动画仍然按原样工作，但如果用户向上滚动则根本没有动画。在整个滚动过程中，该栏仅位于页面顶部。

代码笔:http://codepen.io/think123/pen/mAxlb

Jquery 取自:How do I make a <div> move up and down when I'm scrolling the page?

我确实通过使用此处接受的答案提出了一个解决方案:How can I determine the direction of a jQuery scroll event?

但这种方法看似简陋，却达到了预期的效果。

有没有更好的方法来实现这一目标？

我的解决方案:

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
        $("#div").stop().animate({"marginTop":  ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
   } else {
      $("#div").css({"margin-top": ($(window).scrollTop()) + "px", "margin-left":($(window).scrollLeft()) + "px"});
   }
   lastScrollTop = st;
});

我将一个 CodePen 放在一起，这样您就可以使用我的解决方案查看所需的效果:http://codepen.io/anon/pen/XjXpZv

Answer 1

为了达到这个效果，我去掉了st <= lastScrollTop处的代码.然后，我更改了 marginTop至 top相反，当动画完成后，我将位置设置为 fixed与 top和 left等于 0px .附上代码片段。希望这是您想要的效果。

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
        $("#div").css("position", "absolute");
        $("#div").stop().animate({"top":  ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, {duration: "slow", done: function(){
     $("#div").css("position", "fixed");
     $("#div").css("top", "0px");
     $("#div").css("left", "0px");
        }});
   } else {

   }
   lastScrollTop = st;
});
var totaltext = "";
for (var i = 0; i < 100; i++) {
  totaltext += "scroll!<br />";
}
$("#div2").html(totaltext);

#div {
  background-color: #fca9a9;
  width: 100%;
  height: 50px;
  line-height: 50px;
  position: absolute;
  top: 0;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div">Tralalalala</div>
<div id="div2"></div>