固定导航滚动

Question

当用户滚过该模板以便于导航时，寻找此模板的侧面导航以固定。我用的东西似乎不起作用，需要另外一双眼睛。

由于某些原因我无法弄清楚，任何帮助都会非常感激P：我对javascript / jquery几乎没有任何影响。几乎没有强调;）

或者，当元素到达页面上的某个点时，如何使元素停止？

＆＃13;

＆＃13;

$(document).ready(function() {
  
  $(window).scroll(function () {
      console.log($(window).scrollTop())
    if ($(window).scrollTop() > 280) {
      $('#fixed').addClass('stick');
    }
    if ($(window).scrollTop() < 281) {
      $('#fixed').removeClass('stick');
    }
  });
});

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Open+Sans|Oswald);
body {
  background: url(http://orig02.deviantart.net/240a/f/2016/162/7/f/into_the_white__by_thehartless-da5x0or.png) center fixed no-repeat;
  background-size: cover;
  background-position-y: 0%;
  color: #333;
  text-align: center;
  line-height: 1.4;
  margin: 0;
  font-family: Tahoma, Verdana, Arial, Sans-Serif;
  font-size: 13px;
}

a:link {
	color: #8ac3e4;
	text-decoration: none;
	transition: 1s;
}

a:visited {
	color: #8ac3e4;
	text-decoration: none;
}

a:hover,
a:active {
	color: #bde7ff;
	text-decoration: none;
	transition: 1s;
}

#logo {
  color: #fff;
  font: 65px Oswald;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 8%;
}

#container {
  background: rgba(219, 227, 230, 0.80);
  color: #333;
  text-align: left;
  line-height: 1.4;
  margin-top: 10%;
  font: 15px Open Sans;
  min-width: 850px;
  box-shadow: 0 0 3px rgba(0, 0, 0, .5);
}

#content {
  overflow: hidden;
  padding: 1% 22%;
}

.thead {
  padding: 3% 0;
  color: #fff;
  font: 25px Open Sans;
  text-transform: lowercase;
}

.trow1 {
  overflow: hidden;
  background: rgb(243, 243, 243);
  box-shadow: 0 0 3px rgba(0, 0, 0, .3);
}

.guide {
  display: table;
}

.guide .title {
  background: url('http://orig01.deviantart.net/57d2/f/2016/236/b/0/itw_map_sigless_by_marinatedmermaid_dabhbyl_by_thehartless-daf57xe.png') #ddd no-repeat;
  background-size: cover;
  filter: grayscale(100%);
  font: 25px Oswald;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.guide .overlay {
  background: rgba(250, 250, 250, .7);
  padding: 3%;
  
}

.guide_row {
  display: table-row;
}

.guide_nav {
  width: 25%;
  max-width: 225px;
  display: table-cell;
  vertical-align: top;
  background: #c8cacc;
  padding: 3%;
  color: #fff;
}

#fixed {
  width: auto;
}

#fixed.stick {
  position: fixed;
  top: 0px;
}

.guide_nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.guide_nav li {
  background: #9a9b9b;
  padding: 3px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  margin: 10px 0;
}

.guide_nav a:link {
	color: #fff;
	text-decoration: none;
	transition: 1s;
}

.guide_nav a:visited {
	color: #fff;
	text-decoration: none;
}

.guide_nav a:hover,
a:active {
	color: #fff;
	text-decoration: none;
	transition: 1s;
}

.guide_content {
  display: table_cell;
  vertical-align: top;
  background-size: cover;
  padding: 3%;
  font-size: 13px;
  border-bottom: 1px solid #ddd;
}

.guide_content:last-child {
  border-bottom: 0;
}


.guide_sep {
  opacity: .2;
  width: 100%;
  padding-bottom: 1%;
  border-bottom: 1px solid;
  margin-bottom: 3%;
}

.guide_map {
  width: 100%;
  height: 662px;
  background: url('http://orig01.deviantart.net/57d2/f/2016/236/b/0/itw_map_sigless_by_marinatedmermaid_dabhbyl_by_thehartless-daf57xe.png') no-repeat bottom;
  background-size: cover;
  border-bottom: 1px solid #ddd;
}

＆＃13;

<div id="logo">into the white</div>

<div id="container">
  <div id="content">
    <div class="thead">guide</div>
    <div class="trow1">
      <div class="guide">
        <div class="guide_row">
          <div class="guide_nav">
            <div id="fixed">
            <ul>
              <li><a href="#setting">Setting</a></li>
              <li><a href="#map">Map</a></li>
              <li><a href="#lore">Religion & Lore</a></li>
              <li><a href="#culture">Culture</a></li>
              <li><a href="#characters">Characters</a></li>
              <li><a href="#strains">Strains</a></li>
              <li><a href="#ethyr">Ethyr</a></li>
              <li><a href="#leveling">Leveling</a></li>             
              <li><a href="#beastiary">Beastiary</a></li>
              <li><a href="#fauna">Fauna</a></li>
              <li><a href="#rules">Rules</a></li>
              <li><a href="#mechanics">Game Mechanics</a></li>
            </ul>
          </div>
          </div>
          <div id="introduction" class="title"><div class="overlay">Introduction</div></div>
          <div class="guide_content">
<p>Phasellus sed metus rhoncus, suscipit odio eu, congue ex. Cras eget velit vitae metus placerat varius sed eget libero. In vestibulum lobortis risus, sed molestie dui commodo id. Vivamus nec placerat nisi, a sollicitudin risus. Vivamus non risus arcu. Morbi ex ante, tincidunt vel rutrum vel, dapibus nec felis. Pellentesque sed ipsum nisl. Fusce volutpat erat tristique dolor congue, ac porttitor mi venenatis. Phasellus tincidunt, nibh sed semper ornare, velit ligula vehicula tortor, et pulvinar urna nunc laoreet augue. Morbi ac justo eu lorem blandit suscipit sit amet in nisl. Suspendisse egestas ipsum sed elit commodo congue. Nullam ultricies egestas interdum. Proin dolor velit, pharetra in imperdiet placerat, malesuada vitae nisi. Phasellus vel rhoncus nunc.</p>
          </div>
          <div id="map" class="title"><div class="overlay">Map</div></div>
          <div class="guide_map">
            </div>
          <div id="setting" class="title"><div class="overlay">Setting</div></div>
          <div class="guide_content">
<p>Phasellus sed metus rhoncus, suscipit odio eu, congue ex. Cras eget velit vitae metus placerat varius sed eget libero. In vestibulum lobortis risus, sed molestie dui commodo id. Vivamus nec placerat nisi, a sollicitudin risus. Vivamus non risus arcu. Morbi ex ante, tincidunt vel rutrum vel, dapibus nec felis. Pellentesque sed ipsum nisl. Fusce volutpat erat tristique dolor congue, ac porttitor mi venenatis. Phasellus tincidunt, nibh sed semper ornare, velit ligula vehicula tortor, et pulvinar urna nunc laoreet augue. Morbi ac justo eu lorem blandit suscipit sit amet in nisl. Suspendisse egestas ipsum sed elit commodo congue. Nullam ultricies egestas interdum. Proin dolor velit, pharetra in imperdiet placerat, malesuada vitae nisi. Phasellus vel rhoncus nunc.</p>

<p>Vestibulum tincidunt sem arcu, sit amet mollis dolor volutpat at. Integer tincidunt vel augue at efficitur. Aenean semper mi urna, sit amet suscipit augue tristique nec. Fusce in metus venenatis, volutpat libero ut, porta sapien. Vestibulum auctor, purus id consequat condimentum, orci sem dignissim velit, vel fermentum libero diam venenatis lorem. Aliquam lacinia scelerisque accumsan. Proin sed euismod lacus. Fusce et leo auctor, efficitur odio et, pellentesque risus. Etiam ultrices arcu ac ipsum rhoncus ullamcorper. Phasellus vel condimentum orci. Aliquam erat volutpat. Nullam pulvinar euismod vestibulum. Nam nec lorem lobortis, lobortis dui luctus, ullamcorper tellus. Duis et erat pretium eros blandit aliquet id vel mi.</p>
          </div>
          <div id="lore" class="title"><div class="overlay">Religion & Lore</div></div>
          <div class="guide_content">
<p>Phasellus sed metus rhoncus, suscipit odio eu, congue ex. Cras eget velit vitae metus placerat varius sed eget libero. In vestibulum lobortis risus, sed molestie dui commodo id. Vivamus nec placerat nisi, a sollicitudin risus. Vivamus non risus arcu. Morbi ex ante, tincidunt vel rutrum vel, dapibus nec felis. Pellentesque sed ipsum nisl. Fusce volutpat erat tristique dolor congue, ac porttitor mi venenatis. Phasellus tincidunt, nibh sed semper ornare, velit ligula vehicula tortor, et pulvinar urna nunc laoreet augue. Morbi ac justo eu lorem blandit suscipit sit amet in nisl. Suspendisse egestas ipsum sed elit commodo congue. Nullam ultricies egestas interdum. Proin dolor velit, pharetra in imperdiet placerat, malesuada vitae nisi. Phasellus vel rhoncus nunc.</p>

<p>Vestibulum tincidunt sem arcu, sit amet mollis dolor volutpat at. Integer tincidunt vel augue at efficitur. Aenean semper mi urna, sit amet suscipit augue tristique nec. Fusce in metus venenatis, volutpat libero ut, porta sapien. Vestibulum auctor, purus id consequat condimentum, orci sem dignissim velit, vel fermentum libero diam venenatis lorem. Aliquam lacinia scelerisque accumsan. Proin sed euismod lacus. Fusce et leo auctor, efficitur odio et, pellentesque risus. Etiam ultrices arcu ac ipsum rhoncus ullamcorper. Phasellus vel condimentum orci. Aliquam erat volutpat. Nullam pulvinar euismod vestibulum. Nam nec lorem lobortis, lobortis dui luctus, ullamcorper tellus. Duis et erat pretium eros blandit aliquet id vel mi.</p>
          </div>
          <div id="culture" class="title"><div class="overlay">Culture</div></div>
          <div class="guide_content">
<p>Phasellus sed metus rhoncus, suscipit odio eu, congue ex. Cras eget velit vitae metus placerat varius sed eget libero. In vestibulum lobortis risus, sed molestie dui commodo id. Vivamus nec placerat nisi, a sollicitudin risus. Vivamus non risus arcu. Morbi ex ante, tincidunt vel rutrum vel, dapibus nec felis. Pellentesque sed ipsum nisl. Fusce volutpat erat tristique dolor congue, ac porttitor mi venenatis. Phasellus tincidunt, nibh sed semper ornare, velit ligula vehicula tortor, et pulvinar urna nunc laoreet augue. Morbi ac justo eu lorem blandit suscipit sit amet in nisl. Suspendisse egestas ipsum sed elit commodo congue. Nullam ultricies egestas interdum. Proin dolor velit, pharetra in imperdiet placerat, malesuada vitae nisi. Phasellus vel rhoncus nunc.</p>

<p>Vestibulum tincidunt sem arcu, sit amet mollis dolor volutpat at. Integer tincidunt vel augue at efficitur. Aenean semper mi urna, sit amet suscipit augue tristique nec. Fusce in metus venenatis, volutpat libero ut, porta sapien. Vestibulum auctor, purus id consequat condimentum, orci sem dignissim velit, vel fermentum libero diam venenatis lorem. Aliquam lacinia scelerisque accumsan. Proin sed euismod lacus. Fusce et leo auctor, efficitur odio et, pellentesque risus. Etiam ultrices arcu ac ipsum rhoncus ullamcorper. Phasellus vel condimentum orci. Aliquam erat volutpat. Nullam pulvinar euismod vestibulum. Nam nec lorem lobortis, lobortis dui luctus, ullamcorper tellus. Duis et erat pretium eros blandit aliquet id vel mi.</p>
          </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

它有效，你只需要在html上添加jquery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$(document).ready(function() {
  
  $(window).scroll(function () {
    if ($(window).scrollTop() > 280) {
      $('#fixed').addClass('stick');
    }
    if ($(window).scrollTop() < 281) {
      $('#fixed').removeClass('stick');
    }
  });
});

@import url(https://fonts.googleapis.com/css?family=Open+Sans|Oswald);
body {
  background: url(http://orig02.deviantart.net/240a/f/2016/162/7/f/into_the_white__by_thehartless-da5x0or.png) center fixed no-repeat;
  background-size: cover;
  background-position-y: 0%;
  color: #333;
  text-align: center;
  line-height: 1.4;
  margin: 0;
  font-family: Tahoma, Verdana, Arial, Sans-Serif;
  font-size: 13px;
}

a:link {
	color: #8ac3e4;
	text-decoration: none;
	transition: 1s;
}

a:visited {
	color: #8ac3e4;
	text-decoration: none;
}

a:hover,
a:active {
	color: #bde7ff;
	text-decoration: none;
	transition: 1s;
}

#logo {
  color: #fff;
  font: 65px Oswald;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 8%;
}

#container {
  background: rgba(219, 227, 230, 0.80);
  color: #333;
  text-align: left;
  line-height: 1.4;
  margin-top: 10%;
  font: 15px Open Sans;
  min-width: 850px;
  box-shadow: 0 0 3px rgba(0, 0, 0, .5);
}

#content {
  overflow: hidden;
  padding: 1% 22%;
}

.thead {
  padding: 3% 0;
  color: #fff;
  font: 25px Open Sans;
  text-transform: lowercase;
}

.trow1 {
  overflow: hidden;
  background: rgb(243, 243, 243);
  box-shadow: 0 0 3px rgba(0, 0, 0, .3);
}

.guide {
  display: table;
}

.guide .title {
  background: url('http://orig01.deviantart.net/57d2/f/2016/236/b/0/itw_map_sigless_by_marinatedmermaid_dabhbyl_by_thehartless-daf57xe.png') #ddd no-repeat;
  background-size: cover;
  filter: grayscale(100%);
  font: 25px Oswald;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.guide .overlay {
  background: rgba(250, 250, 250, .7);
  padding: 3%;
  
}

.guide_row {
  display: table-row;
}

.guide_nav {
  width: 25%;
  max-width: 225px;
  display: table-cell;
  vertical-align: top;
  background: #c8cacc;
  padding: 3%;
  color: #fff;
}

#fixed {
  width: auto;
}

#fixed.stick {
  position: fixed;
  top: 0px;
}

.guide_nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.guide_nav li {
  background: #9a9b9b;
  padding: 3px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  margin: 10px 0;
}

.guide_nav a:link {
	color: #fff;
	text-decoration: none;
	transition: 1s;
}

.guide_nav a:visited {
	color: #fff;
	text-decoration: none;
}

.guide_nav a:hover,
a:active {
	color: #fff;
	text-decoration: none;
	transition: 1s;
}

.guide_content {
  display: table_cell;
  vertical-align: top;
  background-size: cover;
  padding: 3%;
  font-size: 13px;
  border-bottom: 1px solid #ddd;
}

.guide_content:last-child {
  border-bottom: 0;
}


.guide_sep {
  opacity: .2;
  width: 100%;
  padding-bottom: 1%;
  border-bottom: 1px solid;
  margin-bottom: 3%;
}

.guide_map {
  width: 100%;
  height: 662px;
  background: url('http://orig01.deviantart.net/57d2/f/2016/236/b/0/itw_map_sigless_by_marinatedmermaid_dabhbyl_by_thehartless-daf57xe.png') no-repeat bottom;
  background-size: cover;
  border-bottom: 1px solid #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="logo">into the white</div>

<div id="container">
  <div id="content">
    <div class="thead">guide</div>
    <div class="trow1">
      <div class="guide">
        <div class="guide_row">
          <div class="guide_nav">
            <div id="fixed">
            <ul>
              <li><a href="#setting">Setting</a></li>
              <li><a href="#map">Map</a></li>
              <li><a href="#lore">Religion & Lore</a></li>
              <li><a href="#culture">Culture</a></li>
              <li><a href="#characters">Characters</a></li>
              <li><a href="#strains">Strains</a></li>
              <li><a href="#ethyr">Ethyr</a></li>
              <li><a href="#leveling">Leveling</a></li>             
              <li><a href="#beastiary">Beastiary</a></li>
              <li><a href="#fauna">Fauna</a></li>
              <li><a href="#rules">Rules</a></li>
              <li><a href="#mechanics">Game Mechanics</a></li>
            </ul>
          </div>
          </div>
          <div id="introduction" class="title"><div class="overlay">Introduction</div></div>
          <div class="guide_content">
<p>Phasellus sed metus rhoncus, suscipit odio eu, congue ex. Cras eget velit vitae metus placerat varius sed eget libero. In vestibulum lobortis risus, sed molestie dui commodo id. Vivamus nec placerat nisi, a sollicitudin risus. Vivamus non risus arcu. Morbi ex ante, tincidunt vel rutrum vel, dapibus nec felis. Pellentesque sed ipsum nisl. Fusce volutpat erat tristique dolor congue, ac porttitor mi venenatis. Phasellus tincidunt, nibh sed semper ornare, velit ligula vehicula tortor, et pulvinar urna nunc laoreet augue. Morbi ac justo eu lorem blandit suscipit sit amet in nisl. Suspendisse egestas ipsum sed elit commodo congue. Nullam ultricies egestas interdum. Proin dolor velit, pharetra in imperdiet placerat, malesuada vitae nisi. Phasellus vel rhoncus nunc.</p>
          </div>
          <div id="map" class="title"><div class="overlay">Map</div></div>
          <div class="guide_map">
            </div>
          <div id="setting" class="title"><div class="overlay">Setting</div></div>
          <div class="guide_content">
<p>Phasellus sed metus rhoncus, suscipit odio eu, congue ex. Cras eget velit vitae metus placerat varius sed eget libero. In vestibulum lobortis risus, sed molestie dui commodo id. Vivamus nec placerat nisi, a sollicitudin risus. Vivamus non risus arcu. Morbi ex ante, tincidunt vel rutrum vel, dapibus nec felis. Pellentesque sed ipsum nisl. Fusce volutpat erat tristique dolor congue, ac porttitor mi venenatis. Phasellus tincidunt, nibh sed semper ornare, velit ligula vehicula tortor, et pulvinar urna nunc laoreet augue. Morbi ac justo eu lorem blandit suscipit sit amet in nisl. Suspendisse egestas ipsum sed elit commodo congue. Nullam ultricies egestas interdum. Proin dolor velit, pharetra in imperdiet placerat, malesuada vitae nisi. Phasellus vel rhoncus nunc.</p>

<p>Vestibulum tincidunt sem arcu, sit amet mollis dolor volutpat at. Integer tincidunt vel augue at efficitur. Aenean semper mi urna, sit amet suscipit augue tristique nec. Fusce in metus venenatis, volutpat libero ut, porta sapien. Vestibulum auctor, purus id consequat condimentum, orci sem dignissim velit, vel fermentum libero diam venenatis lorem. Aliquam lacinia scelerisque accumsan. Proin sed euismod lacus. Fusce et leo auctor, efficitur odio et, pellentesque risus. Etiam ultrices arcu ac ipsum rhoncus ullamcorper. Phasellus vel condimentum orci. Aliquam erat volutpat. Nullam pulvinar euismod vestibulum. Nam nec lorem lobortis, lobortis dui luctus, ullamcorper tellus. Duis et erat pretium eros blandit aliquet id vel mi.</p>
          </div>
          <div id="lore" class="title"><div class="overlay">Religion & Lore</div></div>
          <div class="guide_content">
<p>Phasellus sed metus rhoncus, suscipit odio eu, congue ex. Cras eget velit vitae metus placerat varius sed eget libero. In vestibulum lobortis risus, sed molestie dui commodo id. Vivamus nec placerat nisi, a sollicitudin risus. Vivamus non risus arcu. Morbi ex ante, tincidunt vel rutrum vel, dapibus nec felis. Pellentesque sed ipsum nisl. Fusce volutpat erat tristique dolor congue, ac porttitor mi venenatis. Phasellus tincidunt, nibh sed semper ornare, velit ligula vehicula tortor, et pulvinar urna nunc laoreet augue. Morbi ac justo eu lorem blandit suscipit sit amet in nisl. Suspendisse egestas ipsum sed elit commodo congue. Nullam ultricies egestas interdum. Proin dolor velit, pharetra in imperdiet placerat, malesuada vitae nisi. Phasellus vel rhoncus nunc.</p>

<p>Vestibulum tincidunt sem arcu, sit amet mollis dolor volutpat at. Integer tincidunt vel augue at efficitur. Aenean semper mi urna, sit amet suscipit augue tristique nec. Fusce in metus venenatis, volutpat libero ut, porta sapien. Vestibulum auctor, purus id consequat condimentum, orci sem dignissim velit, vel fermentum libero diam venenatis lorem. Aliquam lacinia scelerisque accumsan. Proin sed euismod lacus. Fusce et leo auctor, efficitur odio et, pellentesque risus. Etiam ultrices arcu ac ipsum rhoncus ullamcorper. Phasellus vel condimentum orci. Aliquam erat volutpat. Nullam pulvinar euismod vestibulum. Nam nec lorem lobortis, lobortis dui luctus, ullamcorper tellus. Duis et erat pretium eros blandit aliquet id vel mi.</p>
          </div>
          <div id="culture" class="title"><div class="overlay">Culture</div></div>
          <div class="guide_content">
<p>Phasellus sed metus rhoncus, suscipit odio eu, congue ex. Cras eget velit vitae metus placerat varius sed eget libero. In vestibulum lobortis risus, sed molestie dui commodo id. Vivamus nec placerat nisi, a sollicitudin risus. Vivamus non risus arcu. Morbi ex ante, tincidunt vel rutrum vel, dapibus nec felis. Pellentesque sed ipsum nisl. Fusce volutpat erat tristique dolor congue, ac porttitor mi venenatis. Phasellus tincidunt, nibh sed semper ornare, velit ligula vehicula tortor, et pulvinar urna nunc laoreet augue. Morbi ac justo eu lorem blandit suscipit sit amet in nisl. Suspendisse egestas ipsum sed elit commodo congue. Nullam ultricies egestas interdum. Proin dolor velit, pharetra in imperdiet placerat, malesuada vitae nisi. Phasellus vel rhoncus nunc.</p>

<p>Vestibulum tincidunt sem arcu, sit amet mollis dolor volutpat at. Integer tincidunt vel augue at efficitur. Aenean semper mi urna, sit amet suscipit augue tristique nec. Fusce in metus venenatis, volutpat libero ut, porta sapien. Vestibulum auctor, purus id consequat condimentum, orci sem dignissim velit, vel fermentum libero diam venenatis lorem. Aliquam lacinia scelerisque accumsan. Proin sed euismod lacus. Fusce et leo auctor, efficitur odio et, pellentesque risus. Etiam ultrices arcu ac ipsum rhoncus ullamcorper. Phasellus vel condimentum orci. Aliquam erat volutpat. Nullam pulvinar euismod vestibulum. Nam nec lorem lobortis, lobortis dui luctus, ullamcorper tellus. Duis et erat pretium eros blandit aliquet id vel mi.</p>
          </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>