带滚动条显示/隐藏 div

2023-12-23

我知道标题不是最具描述性的,还有很多类似问题的主题,但我找不到任何答案。事实上,我能走到这一步多亏了你们,所以这就是我想做的。

我有一个 DIV,我想在页面滚动到某个位置(触发)时显示它,标记为#othdiv。当您进一步向下滚动到标记为的下一个位置(触发)时,该 DIV 消失#othdiv2.

这感觉像是一个非常简单的解决方案,但我就是无法弄清楚。我尝试过条件 if 语句、重复代码、删除行、新变量...叹息...请帮助。

$(document).ready(function() {
$("#dvid").hide(); //hide your div initially
var topOfOthDiv = $("#othdiv").offset().top;
var topOfOthDiv2 = $("#othdiv2").offset().top;
$(window).scroll(function() {
    if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
        $("#dvid").show(); //reached the desired point -- show div
    }
        else
    if($(window).scrollTop() < topOfOthDiv) { //scrolled past the other div?                
        $("#dvid").hide(); //reached the desired point -- show div            
    }           
    });
});

当前代码示例:http://jsfiddle.net/DnJ2z/124/ http://jsfiddle.net/DnJ2z/124/

底线: 我正在尝试做类似的事情:http://mailchimp.com/2012/ http://mailchimp.com/2012/(注意标题[应用程序、支持、操作等])


尝试使用&&如:如果(这个和那个){做某事}否则{不做}

工作示例 http://jsfiddle.net/apaul34208/DnJ2z/127/

$(document).ready(function () {
    var topOfOthDiv = $("#othdiv").offset().top;
    var topOfOthDiv2 = $("#othdiv2").offset().top;
    $(window).scroll(function () {
        if ($(window).scrollTop() > topOfOthDiv && $(window).scrollTop() < topOfOthDiv2) {
            $("#dvid").show();
        } else {
            $("#dvid").hide();
        }
    });
});

为了更好地解释逻辑运算符,请查看:逻辑运算符 MDN https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Logical_Operators

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

带滚动条显示/隐藏 div 的相关文章

  • 雷达扫描仪旋转效果

    我正在尝试找出一个可能的解决方案 如何使用 jQuery 和 CSS 创建雷达扫描仪效果 本质上 半透明三角形光束将围绕 div 的中点旋转 这可以用 jQuery 实现吗 还是我应该采取其他方法 我不喜欢使用 gif 动画 你不需要 jQ
  • 固定宽度可变高度网格CSS

    我们如何在网格布局中实现固定宽度和可变高度 就像www pinterest com http www pinterest com主页布局 我认为他们正在使用 Javascript 只是想知道是否还有其他方法 只需使用float left不管
  • 输入类型=图像 - onclick(),将触发其事件,但在 jquery 中的函数上表现不佳

    我认为这可能是两篇文章 2个问题 所以如果你对此发表评论 我会将它们分开 主要问题实际上是 我怎样才能为按钮设置图像背景 简单且正确 我想现在我可以确定这些事实了 因为我在将图像设置为按钮背景时遇到了 小 问题 我想 好吧 如果很难设置的话
  • 如何在文本区域中使用除“文本插入符号”之外的透明字体?

    我有一个简单的文本区域 我需要制作透明字母 同时允许文本插入符可见 当我应用以下规则时 我会得到隐形插入符 textarea background transparent opacity 0 当我键入不可见文本时 我需要看到文本插入符移动
  • div 边框上的内边距

    我想在 css 边框上添加填充 将其拉入 div 内 远离边缘 使用 css 可以吗 css3 很好 webkit 这是设计 我通过将一个 div 放在一个 div 中 然后给内部 div 一个边框来做到这一点 我想让标记尽可能精简 所以如
  • RegisterForEventValidation 只能在 Render 期间调用

    我有一个将从 jquery ajax 调用的 webmethod WebMethod public string TestMethod string param1 string param2 StringBuilder b new Stri
  • 调整文本区域大小

    我需要使用文本区域来显示一些文本 问题是 如果我放置 4 5 行文本 就会出现滚动条 如何使用 CSS HTML 使文本区域与其内容一样大 没有滚动条 文本区域不需要动态更改其大小 我仅使用它来显示文本 我也可以使用禁用的文本区域 我希望文
  • 动态速度计 javascript 或 jquery 插件

    我希望有动态ajax插件在页面上显示速度计 一个想法是我设置一个背景并旋转针 有人知道相关插件吗 这里有一些供您参考 http bernii github com gauge js http bernii github com gauge
  • 防止浮动换行,直到元素达到最小宽度

    我有可变宽度的 HTML 布局 内容左侧有一个固定宽度的菜单 div 可变宽度 由 css max width 和 min width 设置 对于非常窄的浏览器窗口 我希望内容包裹在菜单下方 我目前通过设置来实现这一点float left在
  • Jquery从下拉列表中获取所选值的id

    我有一个下拉列表 可以从数据库获取值 如下所示 get getJobs function jobs seljobs jobs var i 0 jobs forEach function n alert job id n id 32 67 4
  • 如何为背景图像添加边距?

    我想向背景图像添加边距 以便将其与屏幕中间保持距离 但将其添加到该类中会为整个主体添加边距 body poppage background url Imagenes tip3 png 50 200px no repeat E2E4E9 我怎
  • 如何并排放置两个

    我有两个 div 我想要并排放置的元素 如下所示 navigation content 我想要导航 div 根据需要尽可能大 但不能更大 收缩以适应行为 内容 div 然后应该填充剩余的空间 如何在不指定百分比 例如 20 80 的情况下使
  • 如何更改 Bootstrap 3 div 列顺序

    正在做我的第一个响应式设计 在 Bootstrap 3 中可能会出现类似的情况 在 lg 上更改此设置 a b c sm 上的这个 a c b 您可以使用两个 div 一个用于第一类型的布置 另一个用于第二类型的布置 第一个仅在 lg 中显
  • 未捕获的错误:找不到模块“jquery”

    我在用Electron https github com atom electron制作桌面应用程序 在我的应用程序中 我正在加载一个外部站点 Atom 应用程序之外 可以说http mydummysite index html http
  • 如何在背景剪辑中包含文本装饰:文本;影响?

    我在用 webkit background clip text border and color transparent在锚标记上 下划线似乎永远不可见 我想要的是将文本装饰包含在背景剪辑中 这是我的CSS background clip
  • 淡出和循环一组 div 的最佳方式

    假设我有以下 div div class a You are funny div div class b You are smart div div class c You are cool div 最好的展示方式是什么div a持续 5
  • 悬停时为 SVG 制作动画

    我正在尝试在悬停时为 SVG 文件设置动画 默认情况下 它可以使用 svg 函数实现出色的动画效果 例如
  • Jquery - 通过在字符串中构建 id 的 id 获取元素

    我在使用 jquery 元素时遇到问题 我正在 var 中构造名称 例如 var myId myGotId myId attr title changed myId 返回空 我想通过 id 获取我的元素 但动态构建我的 Id 连接字符串 编
  • 闪亮井板宽度

    library shiny library shinydashboard ui lt dashboardPage dashboardHeader dashboardSidebar dashboardBody wellPanel tags d
  • 带显示块的SPAN

    和默认有什么区别 div 元素和默认值 span 元素与display block HTML 元素的有效性和语义存在差异 否则它们是相同的 div and span两者都被定义为通用容器 在 HTML 方面没有更深层次的含义 一个默认为块显

随机推荐

  • 如何使用 ROCR 包计算 AUC

    我已经安装了 SVM 模型并使用 ROCR 包创建了 ROC 曲线 如何计算曲线下面积 AUC set seed 1 tune out tune svm Negative Positive data trainSparse kernel r
  • 查找定义了方法的类

    我想从方法本身中找出定义某个方法的类的类型 本质上是该方法的封闭静态范围 并且无需明确指定它 例如 class SomeClass def do it self cls enclosing class lt I need this prin
  • 如何加密 JavaScript 代码以使其不可解密?

    我有一些 JavaScript 代码需要加密 但我想确保没有人可以解密它 我可以使用什么工具来执行此操作 编辑 我仍然想在我的网站上运行代码 我只是想确保没有其他人可以解密代码 Javascript 代码在浏览器 即客户端 中执行 这意味着
  • IBM.Data.DB2“连接处理失败;未找到有效的产品许可证”

    我使用连接到 z OS 上的 IMB DB2 的 IBM Data DB2 提供程序在 NET C 中制作了一个小型桌面应用程序 当我在机器上部署这个应用程序时 我遇到了 IBM DB Connect 运行时问题 然后我发现我必须安装 DB
  • Rails - 如何验证外键引用的行是否存在

    鉴于 Rails Way 似乎不使用外键约束 我正在寻找一种替代方案 它允许我在将对象保存在 TableB 中之前验证外键引用的行确实存在于 TableA 中与 table a id 到目前为止 我发现的唯一可以做到这一点的资源 找不到它提
  • 不同XSD文档中的Key、KeyRef

    这可能吗 比如说我有 客户 xml
  • Android编程中无法从Fragment切换到Activity/Activity切换到Fragment

    目前 我主要使用 Fragments 来连接 Facebook 但是 对于其他代码 我使用正常的活动 无片段 我现在的问题是 我希望有一个按钮可以从我的 主页 链接到片段 并从片段链接回我的 主页 我无法这样做 我尝试使用相同的代码在活动之
  • 将字符串直接传递给角度指令?

    我试图了解如何使用 Angular 中的指令 在示例中angularjs org http angularjs org 值在 JavaScript 中的作用域中设置 然后在匹配指令时引用该作用域 模板
  • 如何在 Rails 测试中指定 POST 参数?

    使用 Test Unit 和 Shoulda 尝试测试Users create 我的理解是 Rails 表单发送如下对象的参数 user email 这会在你的操作中变成哈希 对吧 params user email 好的 所以在我的测试中
  • 如何从 Chrome 开发者工具下载/提取字体?

    我厌倦了很多事情 但即使我的电脑有 我也无法得到它 我怎样才能访问这个不会的文件 它们具有 woff 扩展名 在 chrome 检查器中双击它们只会显示一些 url 这是行不通的 我的电脑上也没有安装此字体 事实上 这是我一生中第一次遇到
  • REST API 的 spring-boot-starter-web 和 spring-boot-starter-data-rest 的差异 [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我正在尝试找出 Spring 中开发 REST API 的最佳实践 我找到了这两个包 据我了解它们之间的区别是 Web 支持 REST API
  • Google Collections 不同谓词

    如何实现与 Google Collections Collections2 filter 方法一起使用的不同谓词 如果我理解正确 我不确定 Predicate 是正确的解决方案 创建这样的谓词需要维护某种状态 即 维护一组它已经看到的东西
  • 如何在 Guzzle 5 中发送 PUT 请求的参数?

    我有这段代码用于发送 POST 请求的参数 它的工作原理是 client new GuzzleHttp Client request client gt createRequest POST http example com test ph
  • 是否有任何 Java VM 可以将其状态保存到文件中,然后重新加载该状态?

    是否有任何 Java VM 可以将其状态保存到文件中 然后重新加载该状态 如果有 是哪些 另一种选择 与您的情况可能相关也可能不相关 是在虚拟机内运行 JVM 任何 JVM 大多数虚拟机都提供存储和恢复状态的选项 因此您should能够重新
  • 入口点未定义 = 使用 HtmlWebpackPlugin 的 index.html

    我正在使用 Webpack 4 并且正在创建配置文件 当尝试使用HtmlWebpackPlugin它在控制台上得到了这个 Entrypoint undefined index html 它会打开浏览器并且 HTML 确实出现 但我在控制台上
  • 当我将应用程序设置在 docker 容器内运行时,为什么我的应用程序侦听端口 80 而不是端口 3000?

    我在努力什么 我正在尝试在 docker 容器内运行我的 nodejs 应用程序 并希望在容器外部使用它 通过端口 3000 上的浏览 器 Docker文件 FROM node 8 WORKDIR usr src app COPY pack
  • Spring Security 5 OAuth 2 社交注销

    我已添加到我的 Spring Boot MVC Web 应用程序社交登录功能 它允许用户使用 GitHub Facebook 或 Google 帐户登录我的应用程序 但我正在努力让 logout 功能正常工作 即使调用 logout 并加载
  • 为什么没有触发DataGridView的CellEndEdit事件

    所有 我知道我们可以设置一个可编辑的列DataGridView 当完成编辑单元格时 这CellEndEdit事件将被触发 但我只是想知道为什么当我点击空白区域时没有结束单元格的编辑DataGridView 然后单击该区域DataGridVi
  • React 和 Firebase Firestore V9 上一页分页返回“首页”

    我在这里不知所措 我觉得我已经尝试了一切 并使用了其他帖子 教程中解释的确切方法 我知道您需要使用光标并设置第一个和最后一个可见文档 以便在向前移动的情况下可以在最后一个文档之后开始 在向后移动的情况下可以在第一个文档之前开始 在我的实现中
  • 带滚动条显示/隐藏 div

    我知道标题不是最具描述性的 还有很多类似问题的主题 但我找不到任何答案 事实上 我能走到这一步多亏了你们 所以这就是我想做的 我有一个 DIV 我想在页面滚动到某个位置 触发 时显示它 标记为 othdiv 当您进一步向下滚动到标记为的下一