javascript - 需要获得一个滑动 div 以留在页面上的同一位置(包括 JSFiddle)

Question

我知道这是一个已解决的问题，但我很难让它工作，所以我需要一些帮助。

我有以下设置:http://jsfiddle.net/yHPTv/3656/

问题是，用户将滚动到该 slider 旁边。我需要 slider 保持在页面上的相同位置。

我尝试过使用类方法(有一个名为 sticky with position: fixed 的类；)但不幸的是它对我不起作用。

如有任何帮助，我们将不胜感激。

来自 JSFiddle 的 JS:

$(function () {
$("#slideout").click(function () {
        if($(this).hasClass("popped")){
        $(this).animate({left:'-280px'}, {queue: false, duration: 200}).removeClass("popped");
        } else {
        $(this).animate({left: "20px" }, {queue: false, duration: 200}).addClass("popped")
    }
});
$("#slideout").delay(500).animate({left: "20px" }, {queue: true, duration: 200}).addClass("popped");
});

来自 JSFiddle 的 CSS:

body {
  overflow-x: hidden;
}

#slideout {
  background: #666;
  position: absolute;
  width: 280px;
  height: 80px;
  top: 45%;
  left: -280px;
  padding-right: 20px
}

#clickme {
  position: absolute;
  top: 0;
  right: 0;
  height: 20px;
  width: 20px;
  background: #ff0000;
}

#slidecontent {
  float: right;
}

.stick {
  position: fixed;
  top: 0px;
}

Answer 1

你的当前位置设置为 absolute 而它应该是 fixed.

你试过这个吗？

#slideout {position:fixed;}

这里对我来说效果很好: JS FIDDLE