【发布时间】：2014-12-01 02:00:43
【问题描述】：
好吧，我有一个页面，其顶部横幅为 100% 宽和 500 像素高，其下方是内容区域，例如 4000 像素高。在该内容区域内有一个框（100 x 100），我想以某种方式行事。当我向下滚动页面到该框触及屏幕顶部时，我希望它固定在顶部，直到我向上滚动并且它在父容器的顶部变得不固定（所以它是从哪里开始的） .任何人有任何示例或简单的修复？？？？
编辑：
我发现了这个我认为可行的修复程序，但我不知道我做错了什么：
<script>
var $window = $(window),
$sticky = $('#contentSideIner'),
elTop = $sticky.offset().top;
$window.scroll(function() {
$sticky.toggleClass('sticky', $window.scrollTop() > elTop);
});
</script>
（代码在html文档的头部）
#contentSide {
background: black;
margin: 10px;
float: right;
width: 300px;
}
#contentSideIner {
width: 280px;
height: 400px;
margin: 0 auto;
background: red;
}
.sticky {
position: fixed;
top: 0;
}
我知道这段代码是为了向#contentSideIner div 添加一个类，.sticky {position: fixed;顶部：0； }。我在这里犯了一种脑死亡的错误吗？
这就是我所拥有的 jfiddel http://jsfiddle.net/07xe5tLf/
我正在使用的更多代码：
<!DOCTYPE HTML>
<html>
<head>
<title>Project Website: full review pages</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var $window = $(window),
$sticky = $('#contentSideIner'),
elTop = $sticky.offset().top;
$window.scroll(function() {
$sticky.toggleClass('sticky', $window.scrollTop() > elTop);
});
</script>
<link rel="stylesheet" href="css/stylesMainReveiw.css" />
<style>
#banner { background-image: url("images/Destiny_Banner.jpg"); }
.playableOn {}
.rateBox { background-image: url("img/rating/rating3-big.png"); background-size: 150px 150px; }
#contentSide { height: 5100px; }
</style>
</head>
<body class="landing">
<!-- Header -->
<header id="header">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Monthly Spotlight</a>
<ul>
<li><a href="reviewDestiny.html">Destiny</a></li>
<li><a href="reviewDiablo.html">Diablo III</a></li>
<li><a href="reviewShadow.html">Shadow Of Mordor</a></li>
<li><a href="reviewTheLastOfUs.html">The Last Of Us</a>
<li><a href="reviewBayonetta.html">Bayonetta 2</a></li>
</ul>
</li>
<li><a href="#">Older Reviews</a></li>
</ul>
</header>
<!-- Banner -->
<section id="banner">
<h1>destiny</h1>
<h2>"Same Quote for the game as seen in js-load"</h2>
<div class="playableOn"><p>Playable On:</p></div>
<div class="rateBox"></div>
</section>
<!-- Main -->
<section id="main" class="container">
<div id="contentSide">
<div id="contentSideIner">
</div>
</div>
【问题讨论】：
-
请参阅帮助中心，了解如何提出问题：“请求（家庭作业）帮助的问题必须包括您迄今为止为解决问题所做的工作总结，以及对你有解决它的困难”。如果您正在寻找有人为您编写代码，我认为您来对地方了。
-
不，你完全误解了，1.) 我不认为这个网站允许我发布数百行与我遇到的问题无关的代码 2.) 这是一个很好的资源我只是不知道获得这种效果的最快最简单最好的方法。
-
问题很简单，我只是不知道在基于页面滚动修复div时要寻找什么
-
问题是您提出的问题不完整且不符合社区要求的质量标准。如果您不愿意先尝试解决问题，然后再按照社区准则提出一个清晰、简洁的问题，那么不要指望社区提供帮助。
-
在您的编辑中：您是否包括 jQuery？
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>（这里使用的是Googles hosted libraries）
标签： javascript jquery html css