Question

我试图让一个元素坚持到页面顶部，我的代码看起来有点像......

  <nav>
    <ul>
      <li id="1"><a href="index.html">Home</a></li>
      <li id="2"><a href="services.html"><i class="fa fa-breifcase"></i> Services</a></li>
      <li id="3"><a href="about.html"><i class="fa fa-info-circle"></i> About</a></li>
      <li id="4"><a href="contact.html"><i class="fa fa-paper-plane"></i> Contact</a></li>
      <br><hr color='black' height='5px'>
    </ul>
  </nav>
  <content>
    <div class="intro">
      <h1 class="shadow">Hello</h1>
      <form name="intro-form" action="">
        <input type="text" class="intro-text" placeholder="Hey what's your name?"></input>
        <input type="submit" class="intro-submit" value="Go!" onclick="function val()"></input>
      </form>
      <div id='menu' class="menu">
        <h2 class="togglemenu"><i class='fa fa-cog fa-spin'></i> Options</p>
      </div>
      <a class="down">Scroll <i class="fa fa-arrow-down"></i> Down</a>
    </div>
    <script src='https://lirancohen.github.io/stickUp/js/stickUp.min.js'></script>
<script src='https://lirancohen.github.io/stickUp/js/jquery.js'></script>
    <script type="text/javascript">
      //initiating jQuery
      jQuery(function($) {
        $(document).ready( function() {
          //enabling stickUp on the '.navbar-wrapper' class
          $('.menu').stickUp();
        });
      });

    </script>

唯一的问题是它不能像我预期的那样工作，我尝试了很多东西 - 从谷歌CDN 和下载的stickUp加载以前版本的jquery。任何帮助或替代方法将不胜感激。

Answer 1

除了jquery之外，不需要另一个插件：

var $window = $(window),
  $stickyEl = $('.sticky_div'), //here you specify class of the thing you want to be
  //sticky
  elTop = $stickyEl.offset().top;

$window.scroll(function() {
  $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
});

div {
  height: 100px;
  width: 100px;
}
.sticky_div {
  background: red
}
.sticky {
  position: fixed;
  top: 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <nav>
    <ul>
      <li id="1"><a href="index.html">Home</a>
      </li>
      <li id="2"><a href="services.html"><i class="fa fa-breifcase"></i> Services</a>
      </li>
      <li id="3"><a href="about.html"><i class="fa fa-info-circle"></i> About</a>
      </li>
      <li id="4"><a href="contact.html"><i class="fa fa-paper-plane"></i> Contact</a>
      </li>
      <br>
      <hr color='black' height='5px'>
    </ul>
  </nav>
  <content>
    <div class="intro">
      <h1 class="shadow">Hello</h1>
      <form name="intro-form" action="">
        <input type="text" class="intro-text" placeholder="Hey what's your name?"></input>
        <input type="submit" class="intro-submit" value="Go!" onclick="function val()"></input>
      </form>
      <div id='menu' class="menu sticky_div">
        <h2 class="togglemenu"><i class='fa fa-cog fa-spin'></i> Options</p>
      </div>
      <a class="down">Scroll <i class="fa fa-arrow-down"></i> Down</a>
    </div>
    <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
    <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
    <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  
</body>
</body>  
</body>

编辑你的例子:)

Answer 2

我可以建议你：

如果stickUp库需要jQuery，那么它应该在jQuery之后加载。
如果元素最初不在那里，那么你可以有一个条件。

<script src='https://lirancohen.github.io/stickUp/js/jquery.js'></script>
<script src='https://lirancohen.github.io/stickUp/js/stickUp.min.js'></script>
<script type="text/javascript">
  //initiating jQuery
  jQuery(function($) {
    $(document).ready( function() {
      //enabling stickUp on the '.navbar-wrapper' class
      if($('.menu').length){
         $('.menu').stickUp();
      }
    });
  });
</script>

如何使元素粘在页面顶部，记住它最初不在那里

2 个答案: