保持侧边导航与页面滚动固定

2024-04-08

我有一个客户网站 - www.stagecraft.co.uk,他们想要在租用页面 http://www.stagecraft.co.uk/hire.html (较长的页面 http://www.stagecraft.co.uk/lighting/genericlanterns.html)当您向下滚动页面时仍然存在。我已经快速移动(不是实时),位置固定,但这样做时,左侧导航距离窗口顶部大约 200px 左右。滚动时何时将其置于窗口顶部?

提前致谢....


仅当滚动达到某个点时,您可以将其位置固定:

$(window).scroll(function() {
    if ($(this).scrollTop() > 200) { //I just used 200 for testing
        $("#tester").css({ "position": "fixed", "top": 0 });
    } else {
        $("#tester").css({ "position": "absolute", "top": "200px" }); //same here
    }               
});

div 的 CSS 如下:

#tester {
    position: absolute;
    right: 20px;
    top: 200px;
    height: 200px;
    width: 100px;
    background: red;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

保持侧边导航与页面滚动固定 的相关文章

  • 简单的html css块结构,不能对内容div使用-headerHeight底部边距来避免滚动条吗?

    以下是我的简单 html css 结构
  • css 适用于 Firefox/Chrome,但不适用于 IE

    我有这个 HTML 和 css 在 chrome firefox 中工作正常 但在 IE 上 标题布局超出了位置 并且悬停时未显示子菜单 您能帮忙吗
  • 有没有办法编写屏幕阅读器会忽略的内容?

    我刚刚开发了一个需要视力正常和视障用户都可以访问的页面 内容的某些元素仅与视觉元素相关 因此根本不适用于使用屏幕阅读器的人 例如 链接在新窗口中打开视听演示文稿 但由于我无法控制的情况 窗口的大小被笨拙地调整 因此有一条消息说您应该调整窗口
  • 如何设置 jQuery DataTables 中特定列的最大宽度

    如何设置一个特定列的最大宽度 所有其他列应自动调整大小 我已经尝试了下面的代码 但它不起作用 因为我认为没有 最大宽度 属性 table dataTable paging false info false searching false c
  • 自动调整Google网站嵌入代码的高度(html)

    我正在使用 Google 协作平台嵌入 HTML 代码 将代码粘贴到 从网络嵌入 窗口中 输出的长度是可变的 我希望有一种方法可以动态调整父级的高度iframeGoogle 协作平台用于托管我的 HTML 我知道我可以使用 Google 协
  • ajaxStop() 不触发

    这是不起作用的代码 document ajaxStop function this unbind ajaxStop prevent running again when other calls finish Display everythi
  • 创建后将事件处理程序添加到 jQuery UI 日期选择器

    我有以下场景 在我的母版页中我有 datepicker datepicker changeYear true changeMonth true dateFormat dd mm yy duration fast 这样 我分配 datepic
  • 是否可以使用 Flying Saucer (XHTML-Renderer) 将 css 解析为类路径资源?

    我正在尝试将资源打包到 jar 中 但我无法让 Flying Saucer 在类路径上找到 css 我无法轻松构建 URL 来无缝解决此问题 https stackoverflow com questions 861500 url to l
  • 确定元素是在页面折叠上方还是下方

    我有一些页面有多个输入框 用户可以在其中输入文本 在单击 下一步 按钮之前 需要填写其中一些内容 我弹出验证错误供用户查看 但是如果问题不在页面上 我希望页面滚动到它 而不是他们必须搜索丢失 错误的字段 我有一个滚动到位 但我无法确定要滚动
  • IE 中的 HR 标签 - 删除边框

    在除 IE7 及更低版本之外的其他浏览器中 hr 在 hr 标签周围显示边框 但我不希望它出现 我已经尝试过这个解决方案 但它周围似乎仍然有边框 它看起来像这样 我该如何摆脱它 See http webdesign about com od
  • 在 jQuery 可排序中对多个选定项目进行排序?

    我试图在 jQuery 可排序集中选择多个项目 然后将选定的项目一起移动 这是我的弱点开始尝试使其发挥作用 http jsfiddle net benstenson CgD8Y 这是代码 HTML div class container d
  • 扩展位置绝对div超出溢出隐藏div

    我已经好几个月没有做过CSS了 所以我可能会错过一些简单的东西 但无论解决方案是什么 我都无法弄清楚 所以问题就在这里 这是我的代码的简化版本 div style height 100 width 200px div style margi
  • 如何更改自动完成中的结果过滤器?

    我不想进行字面匹配 而是想通过正则表达式选择结果 我可以覆盖自动完成的默认行为来完成此任务还是需要替代结构 有一个内置的方法可以做到这一点 只需提供一个函数source http jqueryui com demos autocomplet
  • ToggleClass 动画 jQuery?

    我的网站上有一个部分 当用户单击时我希望它展开 我正在使用 jQuerytoggleClass为了这 expandable function e e preventDefault this closest article toggleCla
  • html css 下拉菜单

    这是我第一次在 Stack Overflow 上发帖 我不熟悉论坛发帖规定 所以请让我知道我做错了什么 我在论坛中研究过这个问题 但我所遇到的一切都没有给我明确的答案 我试图从 新闻 元素创建一个下拉菜单 但在运行代码时我从未得到任何可见的
  • Jquery 在 DIV 中进行多重加载

    这是我的代码 right load textes html nicolas right load textes html antoine 问题是内容divantoine覆盖了右边div nicolas加载的内容div div right l
  • 如何使用 vanilla JS 实现可维护的反应式 UI

    今天我遇到了一个问题 可以通过使用像 Vue 这样的反应式和状态管理框架来轻松解决 遗憾的是 无法使用它 以下 简化 情况 链接到代码笔 https codepen io theiaz pen BazErKV 我们有一个服务器渲染的页面 其
  • 即使在包裹后也具有等宽的弹性项目

    是否可以制作一个像这样的纯 CSS 解决方案 物品有一些min width 它们应该动态增长以填充所有容器宽度 然后换行到新行 列表中的所有项目都应具有相同的宽度 现在看起来是这样的 这就是我希望它看起来像的样子 我已经手动管理这些底部项目
  • 禁用特定 div 上的 Tab 键

    我有以下结构 div div Some content div div Some content div div 我想 禁用 div2 上的 tab 键 我的意思是按下 tab 键时 div2 的元素不会获得焦点 有没有简单的方法可以使用
  • 在 PHP 中模拟 jQuery.ajax 请求

    我必须在 PHP 中模拟 AJAX 请求 就像在 jQuery 中一样 我当前的代码在这里 原始 AJAX 调用 不得修改 ajax type POST url someFile php data data success function

随机推荐

  • 如何在 Javascript 的脚本元素中添加局部变量和不同的函数[关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 我需要创建一个脚本元素 如下所示 div class abcd div 我尝试通过首先通过 document Createelement 选
  • 如何查找特定

    环境 美丽的汤4 Python 2 7 5 Logic 找到所有 li 内的实例 ul 与一类my class eg ul class my class li thing one li li thing two li ul 澄清 只需获取之
  • Flutter - 自动调整 AlertDialog 大小以适合列表内容

    我需要从休息网络服务动态加载列表城市 并让用户从警报对话框中选择一个城市 我的代码 createDialog fetchCities then response showDialog context context builder Buil
  • VSCode 显示文件夹 /run/user/1000/doc 中路径的问题

    我最近在更新到 v1 77 3 后在 VSCode 中遇到了一个问题 新项目的路径是错误的 而旧项目的路径是正确的 特别是 新项目在前缀为的文件夹中打开 run user 100 doc 接下来是类似于 sha256 的摘要 每个文件夹都不
  • \ 对非转义字符有何作用?

    I 又问了一个不好的问题 https stackoverflow com questions 4380386 fix escape javascript escape character所以我会问别的事情 根据http www c poin
  • 存储值以便在以后的函数中使用的最佳方法是什么?我听说全局变量很邪恶

    所以我使用的代码位于http jsfiddle net 8j947 10 http jsfiddle net 8j947 10 它为变量 isLive 返回 true 或 false 值 如何在稍后的函数中使用变量 onLive 我在以下位
  • 使用Jackson写yaml?

    我正在使用 Jackson 来读取和修改 yaml 文件 效果很好 不过 我找不到编写 yaml 所需的魔法 ObjectMapper mapper new ObjectMapper new YAMLFactory ObjectNode r
  • 使用 docker-compose 时如何为 mongodb 镜像添加 --auth ?

    我正在使用 docker compose 来运行由 node mongodb nginx 创建的项目 我已经使用构建了该项目docker build 然后我用docker up d nginx开始我的项目 但我还没有找到使用 auth 运行
  • 我应该在 Common Lisp 中使用哪些正则表达式库? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • Python 列表索引效率

    关于内置 python 列表对象的快速问题 假设您有一个包含数字 0 99 的列表 您正在编写一个程序 该程序获取列表中的最后一项并将其用于其他目的 使用list 1 比使用list 99 更有效吗 换句话说 无论哪种情况 python 都
  • Python-从另一个列表中删除一组列表

    array1 1 2 3 4 5 6 7 8 9 array2 1 2 2 2 5 6 6 6 9 temp set array2 array1 remove temp Traceback most recent call last Fil
  • JqG​​rid 搜索字段的多个文本框

    我想知道 JqGrid 高级搜索是否可以为我想要搜索的某些字段显示多个文本框 例如 如果我有一个 电话号码 字段 我希望能够可视化 2 个框 一个用于区号 另一个用于电话号码的其余部分 然后按 查找 后 我希望能够获取两个值并将它们合并或执
  • 将事件分配给事件处理程序的两种不同类型之间的区别

    我在 SO 中看到了这个示例代码 它说一种做法不好 另一种做法很好 但我不明白为什么 事实上 我收到了著名的 RCW COM 对象错误 该帖子说这可能是一个原因 public class SomeClass private Interop
  • 如何在单击项目时检查ListView的复选框?

    如何在单击项目时检查ListView的复选框 我有一个带有复选框 文本视图 按钮的列表视图 这里我想选择ListView的多行 所以使用了CheckBox 如果我点击一行 我想让它对应的CheckBox被选中并获取ListView中被点击项
  • 每个Android的location.Address方法返回什么?

    我试图弄清楚如何使用 Android SDK 和 android location Address 类获取地址组件 有些方法非常简单 其他方法很容易通过示例中的示例来理解文档 http developer android com refer
  • .Net Core - CS0012“对象”在未引用的程序集中定义

    我是 Net Core 的新手 我正在尝试基于它构建一个构建系统 作为该项目的一部分 我创建了一个抽象类 它详细说明了构建任务应实现的内容 并将其填充到共享库中 可执行项目引用该库并扫描项目目录以查找特殊命名的目录 然后检查是否有任何 cs
  • Play Framework Form“折叠”方法命名原理

    Play 框架 2 x 表格类 http www playframework com documentation 2 0 api scala index html play api data Form有一个方法叫做foldwho 的用法表示
  • 所需的后台模式 iOS6 Xcode 4.5

    我注意到在 Xcode 4 5 和 iOS6 中 必需的背景模式 应用程序播放音频 不起作用 有其他人注意到这一点吗 如果是的话 您找到解决办法了吗 Thanks 我相信它可能取决于您为 AVAudioSession 指定的类别类型 确保将
  • 测试递归方法

    我想测试一个方法 public function get key if time this gt driver gt get key if key self LAST UPDATE KEY time new DateTime this gt
  • 保持侧边导航与页面滚动固定

    我有一个客户网站 www stagecraft co uk 他们想要在租用页面 http www stagecraft co uk hire html 较长的页面 http www stagecraft co uk lighting gen