SO scrollspy

by panchroma

HTML

<!DOCTYPE html>
<html>
    
    <head>
        <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
    </head>
    
    <body>
        <div id="wrap">
            <div class="navbar">
                <div class="navbar-inner">
                    <div class="container">
                        <!-- .btn-navbar is used as the toggle for collapsed navbar content --> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

                        <!-- Be sure to leave the brand out there if you want it shown
                        -->
                        <!-- Everything you want hidden at 940px or less, place within here -->
                        <div class="nav-collapse collapse">
                            <!-- .nav, .navbar-search, .navbar-form, etc -->
                            <ul class="nav">
                                <li></li>
                                <li></li>
                                <li><a href="/users/sign_in" class="links">Sign Me In</a>
                                </li>
                                <li><a href="/users/sign_up" class="links">Sign up</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <header id="header">
                <div class="container">
                    <div class="row ">
                        <div class="span12 mb20">
                             <h1 class="mainTitle"><a href="/">Movie Release Reminder</a></h1>

                        </div>
                    </div>
                </div>
            </header>
            <!--<div class="container">
  <div class="row">
    <div class="span12 center pad20">
     <a href="/" class="links button">Back to Search</a>
    </div>
 ...

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css');

#wrap {
    margin-bottom:90px;
}
#push {
    heignt:50px;
}
body {
    background:#46494F;
}
a {
    font-family:'BebasRegular';
    word-spacing:3px;
    color:#FFFFFF;
}
a:hover {
    color:white;
    text-decoration:none;
}
ul {
    list-style-type:none;
}
li {
    display:inline-block;
}
h3 {
    line-height: 30px;
}
header {
    background:#242426;
}
select {
    margin-top:10px;
    width:30%;
}
.button {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #FFBE00;
    background-repeat: repeat-x;
    border-color: #FFBE00;
    border-image: none;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 0;
    padding: 4px 12px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    background-image: -webkit-linear-gradient(to bottom, #FFBE00, #FFBE00);
    background-image: -moz-linear-gradient(to bottom, #FFBE00, #FFBE00);
    background-image: -o-linear-gradient(to bottom, #FFBE00, #FFBE00);
    background-image: -ms-linear-gradient(to bottom, #FFBE00, #FFBE00);
    background-image: linear-gradient(to bottom, #FFBE00, #FFBE00);
    color:#333;
}
.navbar .btn-navbar:hover, .navbar .btn-navbar:active {
    background-color: #FFBE00;
}
input[type="submit"] {
    width:50%;
    height:60px;
    font-family:'BebasRegular';
    font-size:1.4em;
    color: #F2F9F9;
    word-spacing:7px;
}
/* Thumbnail */
 .thumbnail > img {
    margin-left:0px;
    margin-right:0px;
    width:180px;
    height:250px;
   ...