javascript - jQuery 查找元素相对于容器的位置-6ren

javascript - jQuery 查找元素相对于容器的位置

转载作者：行者123 更新时间：2023-11-28 07:43:37

所以我在制作我的网站时遇到了一些障碍，我需要通过添加动画来为其增添趣味，但我似乎无法使这种效果发挥作用:https://youtu.be/bToBgJYI8Pc .我正在使用教程 ( https://css-tricks.com/slide-in-as-you-scroll-down-boxes/ ) 因为我不知道 jQuery，因为我认为我不需要它。我的问题是 jQuery 似乎没有找到我想要设置动画的元素的正确位置(它们使用 position: relative; 重新定位)

示例 1。就像 jQuery 在 css 之前运行并且没有考虑任何样式。

示例 2。就像元素的 anchor 是页面下方它们应该位于的第 4 个位置(我什至不知道 anchor 是否存在于 css/html/jquery 中)

示例 3。这是一个 GIF，向您展示我的意思。 http://gyazo.com/fe72b683031e88d4247e62ae9e9fe5e8查看“Screamer”“Swezii”和“KINZU”下的正文

请记住，我是 jQuery 的新手，所以如果它与 jQuery 有关，您需要向我详细解释您所谈论的内容。

这是代码

$(document).ready(function() {

  (function($) {

    /**
     * Copyright 2012, Digital Fusion
     * Licensed under the MIT license.
     * http://teamdf.com/jquery-plugins/license/
     *
     * @author Sam Sehnert
     * @desc A small plugin that checks whether elements are within
     *     the user visible viewport of a web browser.
     *     only accounts for vertical position, not horizontal.
     */

    $.fn.visible = function(partial) {

      var $t = $(this),
        $w = $(window),
        viewTop = $w.scrollTop(),
        viewBottom = viewTop + $w.height(),
        _top = $t.offset().top,
        _bottom = _top + $t.height(),
        compareTop = partial === true ? _bottom : _top,
        compareBottom = partial === true ? _top : _bottom;

      return ((compareBottom <= viewBottom) && (compareTop >= viewTop));

    };

  })(jQuery);

  var win = $(window);

  var allMods = $(".animated");

  allMods.each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.addClass("already-visible");
    }
  });

  win.scroll(function(event) {

    allMods.each(function(i, el) {
      var el = $(el);
      if (el.visible(true)) {
        el.addClass("come-in");
      }
    });

  });

});

/* Managers */

/* 278 PX */

#managersbg {
  background-color: rgba(255, 153, 0, 0.79);
  position: absolute;
  left: 0px;
  top: 495px;
  width: 100%;
}
@media (min-width: 288px) {
  #managersbg {
    top: 495px;
  }
}
@media (min-width: 295px) {
  #managersbg {
    top: 470px;
  }
}
@media (min-width: 350px) {
  #managersbg {
    top: 455px;
  }
}
@media (min-width: 358px) {
  #managersbg {
    top: 460px;
  }
}
@media (min-width: 364px) {
  #managersbg {
    top: 435px;
  }
}
@media (min-width: 416px) {
  #managersbg {
    top: 410px;
  }
}
@media (min-width: 450px) {
  #managersbg {
    top: 420px;
  }
}
@media (min-width: 485px) {
  #managersbg {
    top: 400px;
  }
}
@media (min-width: 510px) {
  #managersbg {
    top: 410px;
  }
}
@media (min-width: 540px) {
  #managersbg {
    top: 420px;
  }
}
@media (min-width: 550px) {
  #managersbg {
    top: 470px;
  }
}
@media (min-width: 624px) {
  #managersbg {
    top: 450px;
  }
}
@media (min-width: 650px) {
  #managersbg {
    top: 460px;
  }
}
@media (min-width: 671px) {
  #managersbg {
    top: 435px;
  }
}
@media (min-width: 775px) {
  #managersbg {
    top: 410px;
  }
}
@media (min-width: 850px) {
  #managersbg {
    top: 420px;
  }
}
@media (min-width: 914px) {
  #managersbg {
    top: 400px;
  }
}
h4 {
  text-align: center;
  font-weight: 500
}
#managers {
  position: relative;
  top: 15px;
}
#screamer,
#swezii,
#kinzu {
  background-image: url(../images/screamer.png);
  background-size: 100%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border-color: rgba(255, 153, 0, 0);
  margin: 0 auto;
}
#screamer {
  margin-top: 20px;
}
#swezii {
  position: relative;
  top: 125px;
}
#kinzu {
  position: relative;
  top: 275px;
}
#manager1,
#manager2,
#manager3 {
  position: relative;
}
#manager1 {
  top: -115px;
}
#manager1,
#manager2,
#manager3 {
  font-weight: 600
}
#manager2 {
  top: 45px;
}
#manager3 {
  top: 195px;
}
#text1 {
  position: relative;
  top: -165px;
}
#text2 {
  position: relative;
  top: -50px;
}
@media (min-width: 550px) {
  #text1,
  #text2,
  #text3 {
    position: relative;
    left: 50%;
    transform: translateX(-25%);
    text-align: center;
  }
}
p {
  margin: 0 auto;
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">

<head>

  <!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8">
  <title>TheVersionArts Studio</title>
  <meta name="description" content="TheVersionArts is a private design studio. We provide clients with quality design at a small cost.">
  <meta name="author" content="TheVersionArts">

  <!-- Mobile Specific Metas
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- FONT
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link href='http://fonts.googleapis.com/css?family=Raleway:400,500,600,700' rel='stylesheet' type='text/css'>

  <!-- CSS
    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/skeleton.css">
  <link rel="stylesheet" href="css/base.css">

  <!-- Favicon
    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="icon" type="image/png" href="images/favicon.png">

  <!-- Scripts
	-------------------------------------------------- -->
  <script src="jquery-1.11.3.min.js"></script>
  <script type="text/javascript" src="javascript/animated.js"></script>

</head>

<body>

  <!-- Primary Page Layout
	–––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <img src="images/bg.png" id="background">

  <div id="headerbg">
    <div class="container">
      <div class="row">
        <div class="five columns">
          <img src="images/thv-header.png" id="header">
        </div>
        <div class="seven columns">
          <nav>
            <ul>
              <li><a href="#about">About</a>
              </li>
              <li><a href="#contact">Contact</a>
              </li>
              <li><a href="#designers">Designers</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
  <div id="aboutbg">
    <div class="container2">
      <div class="row">
        <div class="twelve columns">
          <h4 id="about">About Us</h4>
        </div>
        <div class="animated">
          <div class="twelve columns">
            <p>TheVersionArts is a private design studio. We were founded in the winter of 2014. We connect clients to the designers they need. Our goal is to serve high quality design at an affordable price through the internet. We strive to impress our
              clients. We don't sell graphics, or designs. We sell art and colours.</p>
          </div>
        </div>
        <div class="animated">
          <div class="seven columns" id="aboutbar"></div>
        </div>
      </div>
    </div>
  </div>
  <div id="managersbg">
    <div class="container3">
      <div class="row">
        <div class="animated">
          <h4 id="managers">Our Managers</h4>
        </div>
      </div>
      <div class="row">
        <div class="animated">
          <div class="one-third-column" id="screamer">
          </div>
        </div>
        <div class="animated">
          <div class="one-third-column" id="swezii">
          </div>
        </div>
        <div class="animated">
          <div class="one-third-column" id="kinzu">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="animated">
          <div class="one-third-column">
            <p id="manager1">Screamer</p>
          </div>
        </div>
        <div class="animated">
          <div class="one-third-column">
            <p id="manager2">Swezii</p>
          </div>
        </div>
        <div class="animated">
          <div class="one-third-column">
            <p id="manager3">KINZU</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="animated">
          <div class="seven columns">
            <p id="text1">I am a guy who loves to get the things in my head onto paper. I have some great ideas that will blow your minds! Get ready!</p>
          </div>
        </div>
        <div class="animated">
          <div class="seven columns">
            <p id="text2">I love the fliudity of art, of any kind!. It is my goal to become a bettter designer myself so I can share my knowldge with others. I am one of the best designers for my price.</p>
          </div>
        </div>
        <div class="animated">
          <div class="seven columns">
            <p id="text3">I'm that guy chilling on his computer, creating fantastic art for you. You can bet you'll get what you ask for!</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>

</html>

最佳答案

我注释掉了你的定位代码，这似乎是主要问题。这是 css(我添加了进入类以使其在 jsfiddle 中工作:http://jsfiddle.net/kaemgm6y/

我根本没有改变 javascript。这是我使用的 css 文件。

我还为视觉/调试效果添加了边框 - 您可以稍后删除它们。

 /* Managers */

/* 278 PX */

#managersbg {
  background-color: rgba(255, 153, 0, 0.79);
  position: absolute;
  left: 0px;
  top: 495px;
  width: 100%;
}
@media (min-width: 288px) {
  #managersbg {
    top: 495px;
  }
}
@media (min-width: 295px) {
  #managersbg {
    top: 470px;
  }
}
@media (min-width: 350px) {
  #managersbg {
    top: 455px;
  }
}
@media (min-width: 358px) {
  #managersbg {
    top: 460px;
  }
}
@media (min-width: 364px) {
  #managersbg {
    top: 435px;
  }
}
@media (min-width: 416px) {
  #managersbg {
    top: 410px;
  }
}
@media (min-width: 450px) {
  #managersbg {
    top: 420px;
  }
}
@media (min-width: 485px) {
  #managersbg {
    top: 400px;
  }
}
@media (min-width: 510px) {
  #managersbg {
    top: 410px;
  }
}
@media (min-width: 540px) {
  #managersbg {
    top: 420px;
  }
}
@media (min-width: 550px) {
  #managersbg {
    top: 470px;
  }
}
@media (min-width: 624px) {
  #managersbg {
    top: 450px;
  }
}
@media (min-width: 650px) {
  #managersbg {
    top: 460px;
  }
}
@media (min-width: 671px) {
  #managersbg {
    top: 435px;
  }
}
@media (min-width: 775px) {
  #managersbg {
    top: 410px;
  }
}
@media (min-width: 850px) {
  #managersbg {
    top: 420px;
  }
}
@media (min-width: 914px) {
  #managersbg {
    top: 400px;
  }
}
h4 {
  text-align: center;
  font-weight: 500
}
h2{
    text-align:center;
}
div.animated{
    border-width:1px;
    border-style:solid;
}
#managers {
  position: relative;
  top: 15px;
}
#screamer,
#swezii,
#kinzu {
  background-image: url(../images/screamer.png);
  background-size: 100%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border-color: rgba(255, 153, 0, 0);
  margin: 0 auto;
}
/*#screamer {
  margin-top: 20px;
}
#swezii {
  position: relative;
  top: 125px;
}
#kinzu {
  position: relative;
  top: 275px;
}
#manager1,
#manager2,
#manager3 {
  position: relative;
}*/
/*#manager1 {
  top: -115px;
}
#manager1,
#manager2,
#manager3 {
  font-weight: 600
}
#manager2 {
  top: 45px;
}
#manager3 {
  top: 195px;
}*/
/*#text1 {
  position: relative;
  top: -165px;
}
#text2 {
  position: relative;
  top: -50px;
}*/
@media (min-width: 550px) {
  #text1,
  #text2,
  #text3 {
    position: relative;
    left: 50%;
    /*transform: translateX(-25%);*/
    text-align: center;
  }
}
p {
  margin: 0 auto;
  text-align: center;
}
.come-in {
  transform: translateY(150px);
  animation: come-in 0.8s ease forwards;
}
.come-in:nth-child(odd) {
  animation-duration: 0.6s;
}
.already-visible {
  transform: translateY(0);
  animation: none;
}
@keyframes come-in {
  to { transform: translateY(0); }
}

我还更改了 HTML。我结合了一些div。他们可以在同一个 div 中有多个类，如下所示:

<div class="animated one-third-column" id="kinzu">

</div>

另一件有用的事情是将标题(经理姓名和段落放在同一个 div 中 - 这几乎不可能将它们错误地放在彼此之上。

这是我修改后的 HTML(需要更多清理，但你明白了):

<body>

  <!-- Primary Page Layout
    –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <img src="images/bg.png" id="background">

  <div id="headerbg">
    <div class="container">
      <div class="row">
        <div class="five columns">
          <img src="images/thv-header.png" id="header">
        </div>
        <div class="seven columns">
          <nav>
            <ul>
              <li><a href="#about">About</a>
              </li>
              <li><a href="#contact">Contact</a>
              </li>
              <li><a href="#designers">Designers</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
  <div id="aboutbg">
    <div class="container2">
      <div class="row">
        <div class="twelve columns">
          <h4 id="about">About Us</h4>
        </div>
        <div class="animated">
          <div class="twelve columns">
            <p>TheVersionArts is a private design studio. We were founded in the winter of 2014. We connect clients to the designers they need. Our goal is to serve high quality design at an affordable price through the internet. We strive to impress our
              clients. We don't sell graphics, or designs. We sell art and colours.</p>
          </div>
        </div>
        <div class="animated">
          <div class="seven columns" id="aboutbar"></div>
        </div>
      </div>
    </div>
  </div>
  <div id="managersbg">
    <div class="container3">
      <div class="row">
        <div class="animated">
          <h4 id="managers">Our Managers</h4>
        </div>
      </div>
      <div class="row">
        <div class="animated one-third-column" id="screamer">

        </div>
        <div class="animated one-third-column" id="swezii">

        </div>
        <div class="animated one-third-column" id="kinzu">

        </div>
      </div>
      <div class="row">
        <div class="animated">
          <div class="one-third-column">
            <h2 id="manager1">Screamer</h2>
              <p id="text1">I am a guy who loves to get the things in my head onto paper. I have some great ideas that will blow your minds! Get ready!</p>
          </div>
        </div>
        <div class="animated">
          <div class="one-third-column">
            <h2 id="manager2">Swezii</h2>
              <p id="text2">I love the fliudity of art, of any kind!. It is my goal to become a bettter designer myself so I can share my knowldge with others. I am one of the best designers for my price.</p>
          </div>
        </div>
        <div class="animated">
          <div class="one-third-column">
            <h2 id="manager3">KINZU</h2>
              <p id="text3">I'm that guy chilling on his computer, creating fantastic art for you. You can bet you'll get what you ask for!</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="animated">
          <div class="seven columns">

          </div>
        </div>
        <div class="animated">
          <div class="seven columns">

          </div>
        </div>
        <div class="animated">
          <div class="seven columns">

          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>

关于javascript - jQuery 查找元素相对于容器的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30833545/

文章推荐： javascript - 使隐藏字段不再为必填项

文章推荐： javascript - SIPML5 和 Node-Webkit - Websocket 错误

文章推荐： c++ - 将文件读入字符串缓冲区并检测 EOF

javascript - 单击 [提交] -> 隐藏 DIV 容器 1 -> 显示 DIV 容器 2 -> 加载在 DIV 容器 2 中的 .PHP 文件中找到的 DIV
这是我想做的 1 - 点击提交 2 - 隐藏 DIV 容器 1 3 - 显示 DIV 容器 2 4 - 将“PricingDisclaimer.php”中找到的所有 DIV 加载到 Div 容器 2
ios - 如何访问另一个应用程序的 iCloud 容器(使用另一个开发人员配置文件开发的应用程序和在该配置文件中创建的 icloud 容器)？
我有一个 ios 应用程序，它使用 iCloudcontainer 来保存用户的一些数据，例如用户的“到期日期”。我要用不同的方式创建应用程序的副本开发者账号。我要将用户从第一个应用程序迁移到第二个应
docker - 如何从一个 docker 容器 ssh 到另一个 docker 容器？
这是场景。我有三个容器。 Container1、container2 和 container3(基于 Ubuntu 的镜像)，其中 container2 充当容器 1 和容器 2 之间的路由器。我
java - 容器是什么意思？ Web 容器、JSP 容器还是 Spring 容器？
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 9 年前。 Improve this ques
docker - Jenkins:从与代理(另一个 Docker 容器)一起运行的阶段连接到 Docker 容器
我正在改造管道以使用声明式管道方法，以便我能够 to use Docker images在每个阶段。目前我有以下工作代码，它执行连接到在 Docker 容器中运行的数据库的集成测试。 node {
java - 部署到 Web 容器、捆绑 Web 容器或嵌入 Web 容器
我正在开发一个需要尽可能简单地为最终用户安装的应用程序。虽然最终用户可能是经验丰富的 Linux 用户(或销售工程师)，但他们对 Tomcat、Jetty 等并不真正了解，我认为他们也不应该了解。所
kubernetes - 无法获取cpu pod指标，k8s-容器-容器-shim-runsc-v1-gvisor
我从gvisor-containerd-shim(Shim V1)移到了containerd-shim-runsc-v1(Shim V2)。在使用gvisor-containerd-shim的情况下，
docker-compose - docker 容器 A 可以使用什么 URL 访问另一个 docker 容器 B(相同的开发机器，不同的项目)
假设我们只在某些开发阶段很少需要这样做(冒烟测试几个 api 调用)，让项目 Bar 中的 dockerized web 服务访问 Project Foo 中的 dockerized web 服务的最
docker - 使用 Windows 容器(而不是 Linux 容器)时如何在 Docker for Windows 10 中创建数据卷
各位，我的操作系统是 Windows 10，运行的是 Docker 版本 17.06.0-ce-win19。我在 Windows 容器中运行 SQL Server Express，并且希望将 SQL
Azure 容器
谁能告诉我，为什么我们不能在 Azure 存储中的容器内创建容器？还有什么方法可以处理，我们需要在 azure 存储中创建目录层次结构？最佳答案您无法在容器中创建容器，因为 Windows Azu
另一个容器内的c++容器
#include template struct Row { Row() { puts("Row default"); } Row(const Row& other) { puts
tomcat - 容器
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
06、RDF 容器
RDF容器用于描述一组事物例如，把一本书的所有作者列在一起 RDF容器有三种类型： <Bag> <Seq> <Alt> <rdf:
仅当基础类型执行相等时才实现相等的 F# 容器
编辑:从到目前为止添加的答案和评论看来，我没有正确解释我想要什么。下面是一个例子: // type not supporting any type of comparison [] [] type b
php - 有没有办法在子进程中传递服务/容器？
我正在测试 spatie 的异步项目。我创建了一个这样的任务。 use Spatie\Async\Task; class ServiceTask extends Task { protecte
Azure Blob 容器
我想使用 Azure Blob 存储来上传和下载文档。有一些公司可以上传和下载他们的文档。我想保证这些文件的安全。这意味着公司只能看到他们的文件。不是别人的。我可以在 blob 容器中创建多个文件夹
Azure 容器 - 与远程容器实例上的文件交互
我正在尝试与 Azure 中的容器实例进行远程交互。我已执行以下步骤: 已在本地注册表中加载本地镜像 docker load -i ima.tar 登录远程 ACR docker登录--用户名--密码
docker - 带有Dockerfile项目的Dokku多进程(容器)
我正在研究http://progrium.viewdocs.io/dokku/process-management/，并试图弄清楚如何从单个项目中运行多个服务。我有一个Dockerfile的仓库:
依赖于其他容器中的文件的 Docker 容器
我有一个想要容器化的单体应用程序。文件夹结构是这样的: --app | |-file.py <-has a variable foo that is passed in --configs
保留数据的 Docker 容器
我正在学习 Docker，并且一直在为 Ubuntu 容器制作 Dockerfile。我的问题是我不断获取不同容器之间的持久信息。我已经退出，移除了容器，然后移除了它的图像。在对 Dockerfil

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - jQuery 查找元素相对于容器的位置