Div 使用 Jquery 滚动页面答案

【问题标题】：Div Scroll With Page Using JqueryDiv 使用 Jquery 滚动页面
【发布时间】：2016-09-13 05:51:34
【问题描述】：

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

这相对简单地使用：

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

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

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

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

【问题讨论】：

一定要动画吗？当用户滚动超过导航初始状态的高度时，为什么您无法修复导航（具有更高的 z-index）？（当他们滚动回页面顶部时，当然会删除）。我就是这样做的，它对我来说很可靠。您需要添加一个边距底部，以抵消当它固定时丢失的标题的高度，以便下面的内容不会跳转。
只是为了美观。我让它按照我想要的方式工作，但我觉得有一种“更清洁”的方法。我的解决方案似乎是凌乱的 jquery。

标签： jquery css

【解决方案1】：

为了达到效果，我把st <= lastScrollTop处的代码去掉了。然后，我将marginTop 改为top，当动画完成后，我将位置设置为fixed，top 和left 等于0px。附上sn-p代码。希望这是您想要的效果。

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>

【讨论】：

太完美了！非常感激。 :)