javascript - 在某个时候停止滚动

标签 javascript jquery html css

我在使 div 在某个点停止滚动时遇到问题。我看过其他解决方案，但无法在我的解决方案上使用。有人愿意看一下并告诉我我做错了什么吗？

我的代码:

var windw = this;

$.fn.followTo = function(pos) {
  var $this = this,
    $window = $(windw);

  $window.scroll(function(e) {
    if ($window.scrollTop() > pos) {
      $this.css({
        position: 'absolute',
        top: pos
      });
    } else {
      $this.css({
        position: 'fixed',
        top: 0
      });
    }
  });
};

$('#header').followTo(250);
@charset "utf-8";

/* CSS Document */

/*Index*/

#index {
  background-image: url(../img/metallica/Metallica_London_2008-09-15_Kirk_and_JamesBL.jpg);
  background-repeat: no-repeat;
  background-position: center 10;
  background-attachment: fixed;
}
#venstre {
  float: left;
}
#midt {
  float: left;
}
#header {
  position: fixed;
  top: 0;
  left: 0;
  height: auto;
}
#header a {
  list-style-type: none;
  text-decoration: none;
  color: #FFFFFF;
  font-family: 'Cinzel', serif, 'Cinzel Decorative', cursive;
  font-size: 60px;
  float: left;
  margin-top: 32px;
  margin-left: 40px;
  margin-right: 650px;
  position: relative;
}
#header form {
  float: right;
  margin-top: 26px;
  margin-right: 49px;
}
#righto {
  float: right;
}
#lefto {
  float: left;
}
#Wrapper {
  clear: both;
}
.anker {
  width: 67px;
  height: 52px;
  padding: 10px;
  margin-left: 147px;
  margin-top: 207px;
  float: left;
  position: fixed;
}
.anker a {
  text-decoration: none;
  text-align: center;
}
.anker ul li {
  list-style-type: none;
}
.undercirkel {
  margin-top: 0;
  margin-left: 20px;
  list-style-type: none;
}
.undercirkelt {
  margin-top: 0;
  margin-left: 800px;
  list-style-type: none;
}
.box {
  background-color: #FFFFFF;
  float: left;
  width: 700px;
  height: 390px;
  margin-left: 428px;
  margin-top: 187px;
  opacity: 0.4;
  z-index: -1;
}
.boxt {
  background-color: #FFFFFF;
  float: left;
  width: 700px;
  height: 390px;
  margin-left: 428px;
  opacity: 0.4;
  z-index: -1;
}
.dropdown {
  width: auto;
  float: left;
  position: fixed;
  margin-top: 190px;
}
.dropdown a {
  text-decoration: none;
  color: #FFFFFF;
  font-family: 'Cinzel', serif, 'Cinzel Decorative', cursive;
  text-align: center;
  font-size: 18px;
  margin: 2px 0 2px 0;
}
.dropdown a:hover {
  color: #282828;
}
.dropdown ul a {
  display: block;
}
.dropdown ul {
  list-style-type: none;
  margin: 0 auto;
}
.drop {
  background-color: #393939;
  border: #D4D4D4;
}
.drop li:hover {
  background-color: #808080;
  border: #D4D4D4;
}
.undermenu {
  display: none;
}
.undermenu li a {
  display: block;
  text-decoration: none;
  margin-left: 50px;
}
.undermenu li {
  clear: both;
  background-color: #393939;
}
.dropdown li:hover .undermenu {
  display: block;
  position: absolute;
}
.dropdown li:hover .undermenu li {
  float: left;
  font-size: 13px;
}
.dropdown ul li ul li a {
  padding-left: 10px !important;
  padding-right: 10px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
#right {
  width: 300px;
  background-color: #FFFFFF;
  float: right;
  margin-right: 52px;
  margin-top: 200px;
  position: fixed;
  margin-left: 1250px;
  opacity: 0.4;
}
#right img {
  padding: 15px;
}
.footer {
  clear: both;
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Rockentusiasterne</title>
  <link rel="stylesheet" type="text/css" href="../css/main.css">
  <link href='http://fonts.googleapis.com/css?family=Cinzel' rel='stylesheet' type='text/css'>
  <script src="../js/jquery-2.1.1.min.js"></script>
  <script src="../js/js.js"></script>
  <script>
    var windw = this;

    $.fn.followTo = function(pos) {
      var $this = this,
        $window = $(windw);

      $window.scroll(function(e) {
        if ($window.scrollTop() > pos) {
          $this.css({
            position: 'absolute',
            top: pos
          });
        } else {
          $this.css({
            position: 'fixed',
            top: 40
          });
        }
      });
    };

    $('#scrollto-menu-nav').followTo(250);
  </script>
</head>

<body id="index">
  <div id="header">
    <div id="lefto"><a href="index.html">Rockentusiasterne</a>
    </div>
    <div id="righto">
      <form>
        <label>
          <img src="../img/search.png">
        </label>
        <input type="search" name="search" placeholder="Søg">
        </input>
      </form>
    </div>
  </div>
  <div id="Wrapper">
    <div id="left">
      <div class="dropdown">
        <ul>
          <div class="drop">
            <li><a href="#">Forside</a>
            </li>
          </div>
          <div class="drop">
            <li><a href="#">Genrer</a>
              <ul class="undermenu">
                <li><a href="#">Rock'n'Roll</a>
                </li>
                <li><a href="#">Alternativ musik</a>
                </li>
                <li><a href="#">Grunge</a>
                </li>
              </ul>
            </li>
          </div>
          <div class="drop">
            <li><a href="#">Om os</a>
            </li>
          </div>
          <div class="drop">
            <li><a href="#">Forum</a>
              <ul class="undermenu">
                <li><a href="#">Opret bruger</a>
                </li>
                <li><a href="#">FAQ</a>
                </li>
              </ul>
            </li>
          </div>
          <div class="drop">
            <li><a href="#">Kontakt os</a>
            </li>
          </div>
        </ul>
      </div>
    </div>
    <div id="innerwrapper">
      <div id="midt">
        <div class="anker">
          <ul>
            <li>
              <a href="#1">
                <img src="../img/cirkel.png">
              </a>
            </li>
            <div class="undercirkel">
              <li>
                <img src="../img/undercirkel.png">
              </li>
            </div>
            <div class="undercirkel">
              <li>
                <img src="../img/undercirkel.png">
              </li>
            </div>
            <li>
              <a href="#2">
                <img src="../img/cirkel.png">
              </a>
            </li>
            <div class="undercirkel">
              <li>
                <img src="../img/undercirkel.png">
              </li>
            </div>
            <div class="undercirkel">
              <li>
                <img src="../img/undercirkel.png">
              </li>
            </div>
            <li>
              <a href="3">
                <img src="../img/cirkel.png">
              </a>
            </li>
            <div class="undercirkel">
              <li>
                <img src="../img/undercirkel.png">
              </li>
            </div>
            <div class="undercirkel">
              <li>
                <img src="../img/undercirkel.png">
              </li>
            </div>
            <li>
              <a href="4">
                <img src="../img/cirkel.png">
              </a>
            </li>
        </div>
        <div class="box">
          <a name="1"></a>
        </div>
        <div class="undercirkelt">
          <li>
            <img src="../img/undercirkelt.png">
          </li>
        </div>
        <div class="undercirkelt">
          <li>
            <img src="../img/undercirkelt.png">
          </li>
        </div>
        <div class="undercirkelt">
          <li>
            <img src="../img/undercirkelt.png">
          </li>
        </div>
        <div class="undercirkelt">
          <li>
            <img src="../img/undercirkelt.png">
          </li>
        </div>
        <div class="undercirkelt">
          <li>
            <img src="../img/undercirkelt.png">
          </li>
        </div>
        <div class="undercirkelt">
          <li>
            <img src="../img/undercirkelt.png">
          </li>
        </div>
        <div class="undercirkelt">
          <li>
            <img src="../img/undercirkelt.png">
          </li>
        </div>
        <div class="undercirkelt">
          <li>
            <img src="../img/undercirkelt.png">
          </li>
        </div>
        <div class="undercirkelt">
          <li>
            <img src="../img/undercirkelt.png">
          </li>
        </div>
        <div class="undercirkelt">
          <li>
            <img src="../img/undercirkelt.png">
          </li>
        </div>

        <div class="boxt">
          <a name="2"></a>
        </div>
      </div>
      <div id="right">
        <img src="../img/metallica/Metallica-on-Howard-Stern-Show-Wallpaper.png" width="81" height="60">
      </div>
      <div class="footer"></div>

</body>

</html>

最佳答案

取消绑定(bind)滚动事件。有点像

$(window).unbind('scroll');

希望这对您有所帮助。

关于javascript - 在某个时候停止滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26273725/

上一篇：javascript - CSS/SVG 描边动画

下一篇：jQuery 快速悬停即使在停止鼠标后也会继续触发事件

相关文章：

javascript - 使用一个函数在 JavaScript 中分配多个全局变量

html - html iframe在多列中

javascript - HTML 数据列表中的动态数组

html - 我的网站菜单在 IE 上无法正确显示

ExtJS 窗口位置在调整大小时发生变化

javascript - midori js框架支持chrome浏览器吗？

javascript - 当我在 Chrome 中单击 "Allow"时，为什么 getUserMedia 会抛出 [object NavigatorUserMediaError]？

php - 意外 token 非法

jquery - 以编程方式选择单选按钮时，单选按钮更改事件不会触发

php - jQuery SlideShow 中的 HTML 文本错误

©2024 IT工具网  联系我们