javascript - 在某个时候停止滚动-6ren

javascript - 在某个时候停止滚动

转载作者：行者123 更新时间：2023-11-28 09:16:47

我在使 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/

文章推荐：使用 calc() 的 CSS 操作

文章推荐： Swift SpriteKit 物理碰撞问题

文章推荐： javascript - CSS/SVG 描边动画

python - 停止 Winsound/停止 Python 上的线程
我正在使用 Tkinter 在 python 上写一个小游戏(顺便说一下，我不允许使用任何其他非内置模块)并且我想在主窗口上播放背景歌曲，这是那个包含标题，以及转到其他窗口和内容的按钮... 所以问题
azure - 停止 Azure 服务*不会*停止 WebJob 在其后面持续运行
我有一个 Azure WebJob，它在一个非常简单的应用服务标准:1 Small(计划)上运行。现在，我的 WebJob(有 5 个函数正在运行)出现问题 - 我想停止 5 个正在运行的函数中的
objective-c - XCode 调试器在“停止”按钮上使用 SIGKILL 停止
我在 MacOS Lion 上使用 XCode 4.2。在模拟器中调试 iPhone/iPad 应用程序时，我使用 XCode 工具栏上的“停止”按钮(产品 | 停止)退出应用程序。在此之后，XCod
makefile - ***配方在第一个目标之前开始。停止
我刚刚下载了android开放源代码项目，并尝试使用make来构建它，我收到了以下消息: build/core/prebuilt.mk:91: *** recipe commences before
Makefile 缺少分隔符。停止
我以前从未制作过 makefile，但我们已经收到了这个，但是，如果我尝试运行它，它只会说， missing separator. stop. 我不知道可能出了什么问题 - 我已经确保空格只按制表符。
iphone - 停止 NSTimer
好吧，这段代码非常基本。用户将答案输入文本框，如果等于“第一+第二”，他们就得到一分。然后，他们有 5 秒钟的时间回答下一个数学问题。如果他们这样做了，函数“doCalculation”将再次运行，他
ios - 停止 animateWithDuration
我在 viewController 中有一个循环动画 - (void)moveAnimating { [UIView animateWithDuration:2.0f animations:^
Iphone 停止 ASIFormDataRequest
当我有一个待处理的 ASIFormDataRequest(作为异步任务启动)仍在执行并且用户按下后退按钮(为了弹出 View )时，我的 viewController 出现问题。有什么方法可以停止该
flashdevelop 停止，没有明确的编译错误
我们正在使用 flashdevelop 和 flash CS 3 开发基于 flash 的游戏。我们正在使用 flash CS3 发布 swc，swc 将作为库在 flashdevlop 中使用。一
cocoa - 停止 NSRunLoop
我在线程中有一个连接，因此我将其添加到运行循环中以获取所有数据: [[NSRunLoop currentRunLoop] run]; [connection scheduleInRunLoop
php socket_accept 停止
你好，我做了一个 php 套接字服务器来从 plc 获取数据，plc 被配置为 tcp 套接字客户端。我有一个严重的问题，如果本地网络出现故障，似乎功能 socket_accept 停止，plc 无
javascript - 停止 setTimeOut();
这个问题已经有答案了: How to stop a setTimeout loop? (10 个回答) 已关闭 8 年前。请帮助获得正确的函数或方法来停止 setTimeout 函数。我一直在尝试
scala - 设置使SBT在错误时快速失败(停止)
我正在运行一个多项目SBT(v0.13)构建，并且希望它在子项目中遇到的第一个错误(编译)时快速失败(停止)。当前的行为是，当某项无法在子项目中进行编译时，构建将继续(以编译所有其他子项目)。一旦
java - 停止.wav
我有播放.wav文件中声音的代码，但是我无法停止播放歌曲，甚至无法退出程序直到播放结束。因为这是一首5分钟的歌曲，所以这是一个问题。这是我如何播放wav的代码: public class EasySo
jsf - 通过JSF应用播放音频并控制开始/停止
我正在寻找一种解决方案，该如何控制从JSF应用程序播放音频文件。我不需要完整的解决方案，只需引用我可以用来控制播放音频文件(开始/停止/更改声音)的组件即可。我尝试搜索过去的问题，但没有成功。我
powershell - Powershell用arg启动/停止
我已经在test.ps1中编写了以下函数，在运行该脚本以启动/停止/ ..时我想做一个选择: function getState($SeviceName) { $server = @('hos
javascript - vuejs定时器组件重启/停止
我必须设置一个 10 分钟的计时器，它会重定向到主屏幕。此外，它必须在每个操作(例如按下按钮)时重置。我找到了这个计时器:https://github.com/fengyuanchen/vue-cou
audio - HTML音频播放/停止
我正在制作一个聊天应用程序，功能之一就是发送声音。发送的HTML如下: LOL Stop Play 第一次发送时，“自动播放”效果很好。因此，现在我
带有开始/停止/重置和用户输入时间的javascript倒计时
我基本上希望页面能够接受用户输入的时间(以秒为单位)。之后我希望当用户按下“开始”按钮时开始倒计时按下暂停按钮时“暂停”。还有一个重置按钮，以便用户可以从头开始倒计时。这是我到目前为止得到的:
javascript - 停止$.each，加载图像然后继续循环
我需要停止 $.each 循环，加载图像，然后继续循环。我有 Canvas ，可以在其中加载对象图像。对象以正确的顺序排列在数组中。现在，当我尝试从数组加载对象时，存在一个问题:由于尺寸不同，并且它们

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在某个时候停止滚动