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解决方案，菜单栏在用户停止滚动后从顶部向下滑动。

但是当用户向上滚动时，条形图显示为＆＃34; stick＆＃34;在向上滚动之前到页面。

我想要实现的是向下滚动动画仍然按原样运行，但如果用户向上滚动则根本没有动画。在整个滚动期间，栏位于页面顶部。

Codepen：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等于{{1 }}。附上代码段。希望这是你想要的效果。

＆＃13;

0px

＆＃13;

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

＆＃13;

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

＆＃13;

Div使用Jquery滚动页面

1 个答案: