Question

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

问题是，用户将滚动浏览该滑块。我需要滑块停留在页面上的相同位置。

我已经尝试过使用类方法（有一个名为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

需要一个滑动div来保持在页面上的相同位置（包括JSFiddle）

1 个答案: