如何在用户滚动时动态设置固定 div 的上限和下限？答案

【问题标题】：how do i put upper and lower limits on a fixed div that is dynamic to when a user scrolls?如何在用户滚动时动态设置固定 div 的上限和下限？
【发布时间】：2014-06-20 23:14:53
【问题描述】：

我到处搜索，到目前为止找不到特定于我想要做什么的答案。

这是一个网站，其中包含我想要复制的内容： http://theeverygirl.com/feature/emily-henderson-of-secrets-of-a-stylist

您看到左侧的贡献者文本区域了吗？它随博客文章浮动，但在到达博客文章/页脚区域的末尾时停止浮动，并且直到页面上向下滚动到足以查看博客文章时才会出现。

这是我当前想要使用的 html/css：

<html>
<head>
<style>
   a:link{
       color: black;
   }
   a:hover{
       color: #83D3E8;
   }
   a:active{
       color: #01B1D1;
   }
p.small {line-height:70%;}
</style>
</head>
<body>
<div style="background:clear;border:1px clear;padding:5px 10px;margin: 5px; position:   fixed; left: 0%; bottom: 12%; max-width: 130px; height: 280px;opacity: 0.6;">
<h1><span style="font-family:andada,serif;">CONTRIBUTORS</span></h1>

<hr />
<p><span style="font-family:andada,serif;">PHOTOGRAPHY BY</span></p>

<p class="small"><span style="font-family:andada,serif;"><a href="http://www.braelynjanesmith.blogspot.com" target="_blank">braelyn jane smith</a></span> 
</p>

<p><span style="font-family:andada,serif;">STYLING BY</span></p>

<p class="small"><span style="font-family:andada,serif;"><a href="http://www.bluecactusstyling.com" target="_blank">joanna lynne smith</a></span></p>

<p><span style="font-family:andada,serif;">COPY BY</span></p>

<p class="small"><span style="font-family:andada,serif;"><a href="http://www.bluecactusstyling.com/about" target="_blank">joanna lynne smith</a></span>       
</p>
</div>
</body>
</html>

您可以在此处实时查看：http://bluecactusstyling.com/2014/06/05/test-2-2/

有什么建议吗？请记住，我不是程序员。到目前为止，我已经通过 google 搜索和 html 构建器完成了所有这些工作。

【问题讨论】：

Stop fixed position at footer的可能重复

标签： javascript html css fixed

【解决方案1】：

它用来执行此操作的脚本在这里：

http://theeverygirl.com/sites/all/themes/everygirl/js/layout.js?n549sa

（从“//使文章左侧边栏变粘”位开始）

基本上，它通过计算您是否比文章开头向下滚动屏幕来工作。如果是，它会将“position:fixed”css 添加到贡献者区域，将其固定在屏幕上的静态位置。

【讨论】：

在此处编写了一个基本脚本来执行您在此处所追求的工作 - jsfiddle.net/a6A78/1 - 请注意，这需要 jquery 库才能工作（您的实时站点具有）。
然而，我是如此的菜鸟，我真的不知道如何处理 javascript。我在哪里输入我的帖子？在过去的几周里，我已经弄清楚了，我知道 CSS 样式会在头部样式之后出现，而 HTML 围绕着我想要风格化的内容。但是我在哪里放 javascript？
javascript 在头部的