滚动时将20％的图像粘贴在顶部

Question

我有一个Bootstrap模态窗口，包括：

1. 图片和列表，其中包含对该图片的评论。（可以overflow:auto滚动）
2. “模态”窗口底部还有一个添加注释Textarea。

我想实现以下功能： 当评论部分向上滚动时，我想将图像的底部20％粘在顶部，然后滚动下面的评论

请参阅小提琴：http://jsfiddle.net/9u9mztqs/1/

供参考的图像

Answer 1

所以，我创造了一个小提琴做这个工作，但它看起来不是很漂亮......这是你的工作;）

http://jsfiddle.net/9u9mztqs/2/

我希望这能解决你的问题。

if (windowpos == 0) {
               s.removeClass('stick_in');
               s.addClass('stick_out');}
        }

图像将通过向上滚动来调整大小。当然，您可以在此处插入任何您想要的值。

Answer 2

这是您想要的功能的简单 基础 。我想代码是不言自明的，但如果你对实现有疑问，请问。

建议您限制滚动事件处理，否则它可能会对您的应用程序造成巨大的性能损失。

详细了解throttling an event。并考虑在potential problem that may arise if you do not throttle上阅读此讨论。

最后，here's an update to your original fiddle, containing the solution。以下是小提琴内容的摘要。

脚本

$(document).ready(function() {
  var imageHeight, scrollTopThreshold;
  var heading = $("#heading"),
    body = $("body"),
    img = $("#heading img");

  img.on("load", function() {
    imageHeight = $(this).height();
    // actually sticks (100 - 70)% of picture
    // if you really want 20%, then change 70 with 80.
    scrollTopThreshold = Math.ceil(imageHeight * 70 / 100);
  });

  $(window).on("scroll", function(e) {
    if (body.scrollTop() >= scrollTopThreshold) {
      heading.css({
        position: "fixed",
        top: -scrollTopThreshold + "px"
      });
    } else {
      heading.css({
        position: "inherit",
        top: 0
      });
    }
  });
});

风格

#heading,
#heading img {
  width: 100%;
}
#comment-form textarea {
  width: 100%;
  height: 90px;
  resize: none;
}

标记

<div id="heading">
  <img src="http://www.rtacpa.com/wp-content/themes/thesis_18/custom/rotator/sample-1.jpg" alt="" />
</div>
<ol class="main">
  <li>I didn't think it was that bad</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
  <li>So bad that you ate it all</li>
</ol>
<form name="comment-form" id="comment-form" action="" method="post">
  <textarea name="comment" id="comment" style="" class="form-control pull-left" placeholder="Say something..." maxlength="250"></textarea>
  <button type="button">Post</button>
</form>