将元素与窗口底部对齐,但允许滚动到下方的内容

2024-02-22

我现在正在编写一个 jquery 滑块,并将宽度设置为 100%,并且无论窗口如何调整大小,我都希望它与窗口底部对齐。我已经找到了让它在向下滚动时一直粘在底部的方法,但我不希望这样。我希望能够滚动到此滑块下方以获取更多内容。

这个网站展示了我正在寻找的功能。我试图用萤火虫检查它以找到它是如何发生的部分,但我无法弄清楚。

http://pixelthemes.net/immersion/ http://pixelthemes.net/immersion/

谢谢您的帮助!


您可以简单地通过计算大小而不是将图库与底部对齐来实现此目的。

var resize = function () {
    var availHeight = window.innerHeight;
    // you need to either calculate
    // or set a fixed offset from the top for content above
    var offset = 80;

    document.getElementById("slider").style.height = availHeight - offset + "px";
}

window.addEventListener("resize", resize, false);
window.addEventListener("load", resize, false);

假设您的滑块具有 100% 宽度,它应该完全符合您的要求。如果滑块上方的内容高度为 80 像素,那么当它一直向上滚动时,它应该恰好粘在窗口底部。

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

将元素与窗口底部对齐,但允许滚动到下方的内容 的相关文章

  • JSON 和 JavaScript 对象有什么区别? [复制]

    这个问题在这里已经有答案了 我对 JSON 和 JavaScript 对象很陌生 有人可以解释一下 JSON 和 JavaScript 对象之间的区别吗 它们的用途是什么 这个比那个好吗 还是要看情况而定 何时使用哪一个 在什么情况下使用
  • 如何在 Web 浏览器中捕获“JavaScript SetCookie 事件”?

    如何在浏览器中捕获 JavaScript SetCookie 事件 我想当 javascript setcookie 事件同时发生时将 cookie 同步到 CookieContainer 例如 有与此相关的事件吗 谢谢 环境 Net 2
  • 无法使用服务帐户查询 Google Search Console API

    我需要使用服务帐户从 Google Search Console 网站管理员工具 检索一些数据 到目前为止我已经能够检索到access token对于我需要附加到请求的 url 的服务帐户 问题是我找不到办法这样做 这是我正在使用的代码 f
  • 告诉 ember.js 对其模型的“id”使用不同的密钥

    我陷入了不应该回来的境地idAPI 端点中的字段 我需要告诉 ember 使用slug字段为 而不是id I tried DS RESTAdapter map App Post id key slug 虽然这对于App Post find
  • 运行 gulp 会给出“path.js:7 throw new TypeError('Path must be a string. Received ' +spect(path));”

    在我的 WordPress 项目中我使用Laravel Elixir来处理资产 直到今天一切都正常 现在每次我跑步gulp我越来越 gulp path js 7 throw new TypeError Path must be a stri
  • Ajax - 下载前获取文件大小

    基本上 我想弄清楚是否应该使用 AJAX 下载文件 具体取决于文件大小有多大 我想这个问题也可以改写为 如何仅获取ajax请求的标头 EDIT ultima rat0 https stackoverflow com users 239962
  • onClick 在 p 标签上无法正常工作

    我想为每个绑定一个点击事件 p 但它似乎不能正常工作 当我运行脚本时 我立即收到三个警报 我只想在单击三个中的任何一个时获得它们 p p s 谁能告诉我我做错了什么 编辑 抱歉 这就是它的样子 HTML 应该是这样的 p p class s
  • 使 div 更大并在悬停时向上动画更大的部分

    当用户将鼠标悬停在 div 上时 我试图将 div 向上设置动画 我可以对 div 进行动画处理 使其变大 但动画是向下发生的 我试图将 div 的底部保持在同一位置 并平滑地向上增加 div 的大小 请参阅 jsfiddle 这里 htt
  • 锁定 contenteditable="true" div 中的元素

    我有一个用于用户输入的 contenteditable div 当单击按钮时 它会显示替换某些单词的选项 首先 它删除所有 html 并创建可以替换单词的 span 元素 这些词的标记不同 我面临一些问题 当直接在跨度之前或之后单击并键入文
  • Javascript 中繁重计算的最佳实践?

    我正在处理客户端脚本 需要进行繁重的计算 例如将大量对象推送到数组中 这会导致 JavaScript 停止响应并且浏览器挂起并发出警报 是否有任何最佳实践或设计模式来处理这些计算 我搜索并找到许多不同的方法来处理这些情况 但解决方案很难实现
  • 为什么在 Javascript 中添加两位小数会产生错误的结果? [复制]

    这个问题在这里已经有答案了 可能的重复 JavaScript 的数学有问题吗 https stackoverflow com questions 588004 is javascripts math broken 为什么 JS 搞砸了这个简
  • 如何在 div 中加载页面?

    我被告知使用 Div 代替 iframe 是前进的方向 所以我使用横幅和主体中的框架 如何将我的index html加载到我的div中 你尝试过 jquery 的 load 吗 通过服务器端技术 您可以轻松地做到这一点
  • 将美元金额动态转换为文本以包含“美元”和“美分”一词

    我需要将输入字段中输入的美元金额动态转换为文本 我能找到的最接近的解决方案几乎可以满足我的需求 但是 我希望结果文本包含 美元 一词 并删除句子末尾带有 美分 的 点 一词 这是起始原型和当前结果 function amountToWord
  • 如何最高效地更新MongoDB中的大量文档?

    我想要最有效地更新大量 gt 100 000 文档 我的第一个天真的方法是在 JS 级别上进行 编写脚本 首先获取 ids 然后循环 ids 并通过 id 调用更新 完整 文档或 set 补丁 我遇到了内存问题 还将数据分成了最大块 500
  • JavaScript:发送 POST,重定向到响应

    我有一个带有 onclick 的图像 当单击事件触发时 我想发送 HTTP POST 并将 window location 重定向到 POST 的响应 我怎样才能做到这一点 只需将按钮绑定到表单元素的提交方法 重定向就会自然发生
  • 为什么 JavaScript 原型属性在新对象上未定义?

    我对 JavaScript 原型概念还很陌生 考虑以下代码 var x function func x prototype log function console log 1 var b new x 据我了解 b log 应该返回 1 因
  • Object.assign 方法不绑定“this”

    我正在尝试绑定this变量到一个新对象 function Parent sub component constructors this components node function this name jordan subcompone
  • 将文本字段输入限制为仅数字

    我搜索过谷歌 但我能找到的所有解决方案都非常复杂和冗长 我需要的是将我正在进行的调查中的文本字段的输入限制为仅数字 最快 最干净的方法是什么 我使用的是严格的 HTML 4 01 和 ECMAScript 提前致谢 最快
  • 创建一个跨浏览器 mixin 进行转换:旋转

    我想为 sass 创建一个 mixin 它将对指定元素应用旋转 mixin 应采用一个参数 表示要应用的旋转度数 从 css3please com 我找到了一种使用 CSS 实现此功能的跨浏览器方法 box rotate moz trans
  • 将 JS 文件导入 Typescript

    我正在考虑转向 Typescript 目前正在考虑慢慢地 如果可能的话 逐个文件地执行此操作 现在我目前拥有的系统是用 Webpack 构建的 我想继续这个来构建我的整个包 我有一个用于定义的 d ts 文件 但我需要继续导入当前引发错误的

随机推荐

  • 如何从一组用户中提取电子邮件

    If I do User all pluck email 然后就可以正常工作了 但如果我这样做 arr Array new arr User all and then arr pluck email 这引发了以下错误 undefined m
  • 重写构造函数类

    下面是我的代码 我不明白这是什么错误 有谁可以指导一下吗 class State static String country static String capital State Constructor country America s
  • 连接两个向量同时转换一个向量的元素的最佳方法是什么?

    假设我有 std vector
  • wget:无法解析主机地址“github.com”

    我正在使用 Redhat UBI 映像构建 dockerfile 当我构建映像时 我得到 wget 无法解析主机地址 github com 我尝试添加一个不以 GitHub 开头的不同 URL 但该 URL 有效 不确定是什么问题 以下是我
  • NSFetchedResultsController 在 objectAtIndexPath 上崩溃?

    我在尝试访问以下对象时发生崩溃NSFetchedResultsController 2013 11 10 15 15 06 568 Social 11503 70b CoreData error Serious application er
  • 在 C#.NET 中动态转换为类型

    替代标题 在运行时动态转换为类型 我想将对象转换为将在运行时分配的类型 例如 假设我有一个分配字符串值的函数 来自TextBox or Dropdownlist to an Object Property 我如何将值转换为正确的类型 例如
  • 如何设置包装给定函数的函数的类型

    我正在做一个简单的memoize函数 它的作用是接受一个函数 并在缓存返回结果的地方做一些魔法 但基本上返回函数的类型memoize与给定的完全相同 但我遇到了错误 我不知道如何修复 当使用该函数并忽略我遇到的错误时 这些类型可以工作 我已
  • 用户代理字符串可以有多大?

    如果您要将用户代理存储在数据库中 您会容纳多大的数据库 我找到了这个技术网文章 http technet microsoft com en us library bb496341 aspx建议将 UA 保持在 200 以下 HTTP 规范中
  • PHP base64_decode C# 等效项

    我正在尝试模仿执行以下操作的 php 脚本 用 号替换 GET 变量的每个空格 var preg replace s GET var 解码为 Base64 base64 decode var 首先我添加了一个执行 Base64 解码的方法
  • 无符号整数取负值[重复]

    这个问题在这里已经有答案了 有人可以解释为什么 unsigned int 取负值吗 一个unsigned int应该只取正值 From 维基百科 http en wikipedia org wiki Integer 28computer s
  • 更改 nginx 工作进程运行的用户(Ubuntu 12.04)

    我在 Ubuntu 12 04 上手动安装了 nginx 当我跑的时候 configure我使用了以下选项 configure user www data group www data with http ssl module with h
  • 如何将此 csv 数据转换为条形图?

    旅游 旅游名称 开始 开始时的可用预订 结束 剩余预订量 csv 文件列 ID Tour Start End 12345 Italy 100 80 13579 China 50 30 24680 France 50 30 到目前为止我有这个
  • Ruby——寻找某种“Regexp unescape”方法

    我有一堆带有特殊转义代码的字符串 我想存储未转义的代码 例如 解释器显示 014 000 016smoothing 011mean 022color 011zero 016 但我希望它显示 检查时 为 014 000 016smoothin
  • 为了使用 Scrapy 正确发送电子邮件,我忘记了什么

    我想使用 Scrapy 发送电子邮件 我看了 throw 官网 发现可以这样做 from scrapy mail import MailSender from scrapy utils project import get project
  • 如何返回我在嵌套数组中查找的元素?

    我有一个这样的数据库 universe comics saga name x men characters character wolverine picture 618035022351 png character cyclops pic
  • Python 自由变量。为什么会失败?

    以下代码打印 123 gt gt gt a 123 gt gt gt def f print a gt gt gt f 123 gt gt gt 但以下失败 gt gt gt a 123 gt gt gt def f print a a 4
  • 比较内部消息传递的两种数据库设计

    以下哪种数据库设计更适合内部消息系统 三张表 MessageThread models Model subject timestamp creator Message models Model thread pk content times
  • 从右到左数据网格视图单元格

    如何将属性从右到左设置为 Datagridview 单元格 我尝试设置 Alignment 属性为 MiddleRight 但由于我的 DatagridviewCell 值为 阿拉伯语和英语没有按照我想要的从右到左显示 我找到了一个带有 C
  • 限制后获取另一个订单

    想象一下 我有一个表 用户 其中包含两个字段 年龄 和 姓名 我想检索前十名老用户 然后我希望这十个用户的列表按名称排序 可以用MySQL来做吗 我试过这个 不起作用 SELECT FROM users order by age name
  • 将元素与窗口底部对齐,但允许滚动到下方的内容

    我现在正在编写一个 jquery 滑块 并将宽度设置为 100 并且无论窗口如何调整大小 我都希望它与窗口底部对齐 我已经找到了让它在向下滚动时一直粘在底部的方法 但我不希望这样 我希望能够滚动到此滑块下方以获取更多内容 这个网站展示了我正