如何让顶部的大图片变小并最终粘在顶部?

2024-03-15

我想将我的网站分为两部分:包含大图像的标题和包含其他图像、文本等的主要部分。

当我滚动页面时,标题上的大图像应该与主要部分一起滚动。在某一时刻,图像应该变得固定,并且主要部分在其后面滚动。

我尝试了一些不同的方法,但我无法获得位置、显示、顶部等的正确组合来工作。

这是迄今为止我最接近的:https://jsfiddle.net/aor0abhf/ https://jsfiddle.net/aor0abhf/

HTML

<body onscroll='scroll(event)'>
  <div class='top' id='top'><img src='http://www.vejanomapa.net.br/wp-content/uploads/2013/03/Maria-Fuma%C3%A7a-em-Tiradentes-MG.jpg'></div>
  <div class='bottom'>
    <div class='menu'>Menu</div>
    <div class='main'><img src='http://tvulavras.com.br/wp-content/uploads/2017/04/maria-fuma%C3%A7a.jpg'></div>
  </div>
</body>

JavaScript

function scroll(e) {
    var T = document.getElementById('top');
    var imgH = T.clientHeight; // header image height
    var hH = 200; // fixed header height
    if (imgH-e.pageY > hH) { // image is scrolling
        T.style.top = '-'+e.pageY+'px';
        T.style.position = 'sticky';
    } else { // image should remain fixed
        T.style.top = '-'+(imgH-hH)+'px';
        T.style.position = 'fixed';
    }
}

CSS

html, body {
    margin:0;
}
body {
    overflow-y:scroll;
    overflow-x:hidden;
}
img {
    display:block;
}
.top {
    background:#FCC;
  display:block;
    top:0;
}
.bottom {
    display:flex;
    min-height:1500px;
    background:#CFC;
}
.menu {
    width:100px;
    background:#CCF;
}

但滚动/固定位置之间的转换仍然存在问题。如果左侧菜单(浅蓝色)可以粘在一起,那就太好了! (也许还有另一个问题?)


我将你的小提琴更新为以下内容:

HTML 没有变化

<body onscroll='scroll(event)'>
  <div class='top' id='top'><img src='http://www.vejanomapa.net.br/wp-content/uploads/2013/03/Maria-Fuma%C3%A7a-em-Tiradentes-MG.jpg'></div>
  <div class='bottom' id='bottom'>
    <div class='menu'>Menu</div>
    <div class='main'><img src='http://tvulavras.com.br/wp-content/uploads/2017/04/maria-fuma%C3%A7a.jpg'></div>
  </div>
</body>

CSS

html, body {
    margin:0;
}
body {
    overflow-y:scroll;
    overflow-x:hidden;
}
img {
    display:block;
}

.top {
    background:#FCC;
    display:block;
    top:0;
}

/* start new rules */

.active{
  position: fixed;
}

.active ~ .bottom {
  margin-top: 386px;
  padding-left: 100px;
}

.active ~ .bottom .menu {
  position: fixed;
  top: 200px;
  bottom: 0;
  left: 0;
}

/* end new rules */

.bottom {
    display:flex;
    min-height:1500px;
    background:#CFC;
}
.menu {
    min-width:100px;
    background:#CCF;
}

JavaScript

function scroll(e) {
    var T = document.getElementById('top');
    var B = document.getElementById('bottom');
    var imgH = T.clientHeight; // header image height
    var hH = 200; // fixed header height

    if (imgH-e.pageY > hH) { // image is scrolling
        T.classList.remove('active') // remove class active as applicable
        T.style.top = '-'+e.pageY+'px';
        T.style.position = 'sticky';
        B.style['margin-top'] = '0';
    } else { // image should remain fixed
        T.classList.add('active') // add class active as applicable
        T.style.top = '-'+(imgH-hH)+'px';
    }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何让顶部的大图片变小并最终粘在顶部? 的相关文章

  • 如何使用 Promise.all 获取 URL 数组?

    如果我有一个 url 数组 var urls 1 txt 2 txt 3 txt these text files contain one two three respectively 我想构建一个如下所示的对象 var text one
  • 为什么 Chrome 中存在 Document.prototype.getElementsByName?

    我所知 getElementsByName是一个定义在中的函数HTMLDocument and HTMLDocument继承自Document and Document继承自Node 那为什么我能看到Document prototype g
  • 随机字体颜色

    我需要用 2 或 3 种随机颜色为文本着色 我如何在 PHP 或 JavaScript 中执行此操作 color str pad sprintf x x x rand 0 255 rand 0 255 rand 0 255 6 rand 0
  • 如何从网上获取源代码?

    我正在尝试从 Web 获取 HTML 源代码 我尝试这样做 u new URL url URLConnection con u openConnection con setRequestProperty User Agent Mozilla
  • 如何在 *ngFor 中停止属性绑定到 Angular 中的每个元素

    在我的 html 中 我想将属性绑定应用于每个元素 我有一个点击和悬停事件 每当用户 将鼠标悬停或单击单个元素 但现在悬停或 单击发生在其中的每个元素上 ngFor 我想要它只 发生在他们选择 悬停的元素上 我需要什么 改变 我看到了另一个
  • 使用 jQuery 从字符中获取文本

    我想在出现特定字符后从字符串中获取文本 比方说 文本文本文本 abc 我想得到 abc jquery 中这是如何完成的 这对某些人来说可能是微不足道的 但我对 jQuery 没有什么经验 你可以这样做 var text texttextte
  • 如何在不同位置显示验证错误消息?

    我在用knockout js knockout validation插件 我正在添加示例小提琴 http jsfiddle net hsnCW 1 http jsfiddle net hsnCW 1 在此示例中 对数组进行了自定义验证以检查
  • React hooks 需要返回值吗?

    我最近开始在我的 React 应用程序中构建自定义挂钩 并一直在关注 React 网站上的文档 然而 我正在构建的钩子不需要返回值 因为它们在初始化时为 Redux 设置数据 Example custom hook export const
  • 如何将base64字符串转换为文件?

    我使用 jquery 插件来裁剪图像 该插件将裁剪图像并将其作为 Base64 编码字符串提供给我 为了将其上传到 S3 我需要将其转换为文件并将该文件传递到上传函数中 我怎样才能做到这一点 我尝试了很多事情 包括使用解码字符串atob 没
  • innerHTML 未写入 svg 组 Firefox 和 IE

    我正在做一个项目 遇到了障碍 在 Chrome 中 它按预期工作 但在 Firefox 和 IE 中则不然 下面的代码实际上只是真实项目代码的非常简化的版本 基本上我正在尝试替换 svg 的每组中的圆圈 因此 我从预编码的圆圈开始 然后删除
  • 仅底部的框阴影

    我有一盒内容 需要为其提供阴影 但我只想为盒子的底部提供阴影 我用过这个css box shadow 0 3px 5px 000000 如果我给出这个代码 它会显示左 右和底部 我只需要底部 任何人都可以建议解决这个问题吗 多谢 添加类后您
  • BigVideo.js 播放结束时 URL 重定向

    我已经使用基于 Video js 的 BigVideo 在页面上实现了背景视频 单击 div 时 视频会在后台播放 我一生都无法弄清楚如何在视频播放完毕后重定向到另一个 URL 这是我正在使用的代码 视频播放链接 a href vids g
  • 无法使用 Jsoup HTML 解析器 Java 实现某些功能

    我无法使用 Jsoup Java 库解析以下场景的一些文本 1 This is b My Text b some other b b text as well b b b non empty tag1 b other text 预期输出 s
  • 未捕获的类型错误:lang 不是函数[重复]

    这个问题在这里已经有答案了 在我的 HTML 中我定义了lang函数在script标签并添加 试射 必须调用的按钮lang点击时
  • 谷歌地图使用值 BESbswy 在内部创建隐藏的 div 和 span 并降低角度性能

    我在我的角度项目上使用谷歌地图 API v3 但是当我将地图添加到我的项目时 谷歌地图会创建一个隐藏的 div style height 1px width 1px span style font size 48px width 1 hei
  • 通过使用 Jquery 添加类来触发 CSS3 转换

    目前我有一个正在运行的小提琴 当我向它添加一个类时 我试图让 css3 不透明过渡触发 基本设置是我单击一个按钮 然后通过 jquery 添加一个 div 到 dom 然后将该元素添加到 dom 然后向其中添加一个类 向该新 dom 元素添
  • 图像右边缘淡入/模糊 CSS

    我有一个简单的 CSS 相关问题 如何获得如图所示的右端模糊 淡入淡出 两种方法 让我们这样做 1 使用盒子阴影 浏览器兼容性 IE 9 为盒子阴影 http caniuse com feat css boxshadow 放置适当box s
  • iOS 6 上的 Safari 是否缓存 $.ajax 结果?

    自从升级到 iOS 6 以来 我们看到 Safari 的网页视图擅自缓存 ajax来电 这是在 PhoneGap 应用程序的上下文中 因此它使用 Safari WebView 我们的 ajax电话是POST方法并且我们将缓存设置为 fals
  • 为什么 asmjs 代码即使在 Firefox 中也较慢?

    我创建了一个 jsPref 来测试这个 asm js 的东西 http jsperf com asm diag http jsperf com asm diag 我想我做错了什么 因为asmjs代码的运行速度比常规js代码慢两倍 即使在fi
  • Sass 与 BEM,继承选择器

    我正在使用 Sass 3 4 1 和 BEM 所以我的 scss 是 photo of the day title font size 16px 我希望每次将鼠标悬停在 photo of the day标题发生了一些事情 这很常见 所以通常

随机推荐

  • 使用owin中间件替换响应体

    有没有办法使用 OWIN 中间件覆盖响应内容 我的自定义错误类 public class Error public string error get set public string description get set public
  • RxJs - forkJoin 与空数组

    我目前正在使用forkJoin等待数组Observable s 之前完成pipe 英 和tap ping 我注意到如果数组为空 则不会发出任何信号 我什至不能tap 我该如何解决这种问题 我应该检查数组是否为空吗 myFirstFuncti
  • AspNetCore 2.0 声明始终为空

    我正在努力将 DotNet 4 5 MVC WebAPI 应用程序转换为 AspNetCore 2 0 但在让 Cookie 身份验证再次工作时遇到一些问题 当我设置 cookie 并尝试访问安全方法时 我无法到达那里 当我进入匿名方法并检
  • 空比较

    有一个查询 UPDATE MyTable SET nvarchar1 blahblah WHERE Id 096fe792 7313 416f b3c8 327f46be73b6 AND nvarchar1 lt gt blablah 当
  • 使用 Delphi 检测互联网连接激活

    我使用 3G 无线卡已经有一段时间了 每次连接时 我的防病毒软件都会启动更新 我想知道我可以使用哪些 Win32 API 函数集来获取通知或查询即将出现的 Internet 连接事件 Delphi 已经有一组移植的标头了吗 我参与了一个项目
  • 如何将无边框表单对齐到屏幕边缘?

    当我将窗体的边框样式设置为无时 我无法再将窗口捕捉到屏幕边缘 我怎样才能两者兼得 Aero Snap 需要一个有边框的窗口 没有后门 您可以使用以下代码来模拟捕捉这个帖子 https stackoverflow com a 591734 1
  • ruby/ruby on Rails 内存泄漏检测

    我使用 ruby on Rails 编写了一个小型 Web 应用程序 其主要目的是上传 存储和显示 xml 文件最多可达几 MB 文件的结果 运行大约 2 个月后 我注意到杂种进程使用了 大约 4GB 内存 我做了一些关于调试 ruby 内
  • 单页网站上复杂的活动状态导航

    HTML div class logo ribbon a href top a div
  • 为什么用 p.then(resolve) 比用resolve(p) 更早地解决新的 Promise?

    Code 1 和 Code 2 之间的区别是 Code 1 使用resolve p 和代码 2 使用p then gt resolve 我希望输出的序列是不变的 但它们会生成不同的序列 我不明白为什么 代码 1 resolve p cons
  • javac 类路径顺序与 Oracle 文档相矛盾?

    In 塞拉 贝茨 SCJP https rads stackoverflow com amzn click com 0071591060本书第 797 页 java 和 javac 首先查看包含 Java SE 标准类的目录 然后他们查看类
  • AJAX 按钮提交的 HTML5 表单验证

    我有以下表格 我喜欢新的 HTML5 表单验证 并且更愿意保留它 然而 我不喜欢按下按钮时刷新页面 表单提交 的方式 相反 我更愿意使用按钮触发一些 AJAX 来刷新页面元素 而不刷新整个页面 然而 当我设置type button 发生的情
  • Android - 使用 LocationManager.requestLocationUpdates 时,我需要 WakeLock 吗?

    我的应用程序使用警报定期检查位置BroastcastReceiver启动一个服务 我知道我应该在启动服务之前获取唤醒锁 但我的问题是我什么时候可以释放它 如果我在调用后释放唤醒锁requestLocationUpdates 设备是否可以进入
  • 将一次性代码交换为刷新令牌时出现 Google OAuth redirect_uri_mismatch

    我正在实现 Google OAuth2 服务器一次性代码流程 如下所述 https developers google com identity sign in web server side flow https developers g
  • 如何处理 iOS 中的 Firebase 数据库错误? #AskFirebase

    我需要以不同于所有其他错误的方式处理 权限被拒绝 错误 在 Android 中我已经做到了 Kotlin override fun onCancelled error DatabaseError if error code Database
  • AVAudioPlayer 声音未播放

    在 iOS 8 Xcode 6 中 我有一个包含声音效果的功能 多次更改代码后 它在 iOS 9 中不再起作用 这是我尝试过的 原来的 let bangSoundEffect SKAction playSoundFileNamed Bang
  • Android Studio 2 错误:app:compileDebugJavaWithJack

    这是 Android Studio 2 1 1 的完整错误 我知道这段代码可以编译 因为在其他 PC 上它可以编译 但在 Windows 10 x64 的这台 PC 上却不行 所有其他项目都以类似的结果失败 Error Execution
  • php代码到mysql数据库导出[重复]

    这个问题在这里已经有答案了 可能的重复 最佳实践 在 PHP 中导入 mySQL 文件 分割查询 https stackoverflow com questions 1883079 best practice import mysql fi
  • hibernate 主键的原语或包装器

    我一直在查看各种 hibernate 教程和示例 对于它们的标识 主键属性 有些使用 Java 原始类型 有些使用包装类型 即 private int id vs private Integer id 为什么以及何时使用其中一个作为实体键
  • Asp.net Core 电子邮件确认有时会显示 InvalidToken

    我正在使用 asp net core Identity 2 1 我遇到了电子邮件确认的随机问题 而电子邮件确认有时会说结果 Error InvalidToken 令牌也没有过期 Note 我们正在使用多个服务器 并且我们还将密钥存储在一个地
  • 如何让顶部的大图片变小并最终粘在顶部?

    我想将我的网站分为两部分 包含大图像的标题和包含其他图像 文本等的主要部分 当我滚动页面时 标题上的大图像应该与主要部分一起滚动 在某一时刻 图像应该变得固定 并且主要部分在其后面滚动 我尝试了一些不同的方法 但我无法获得位置 显示 顶部等