滚动时将菜单栏固定在顶部[关闭]

2024-05-18

我见过一些网站,当用户向下滚动页面时,会在右侧或左侧弹出一个框......

另外,注意到这个模板:http://www.mvpthemes.com/maxmag/ http://www.mvpthemes.com/maxmag/设计师做得很好,将导航栏固定在顶部。

现在,这些是如何完成的?我猜它使用 jquery 来获取页面的位置并显示框。

您能否指导我在哪里可以找到片段,以便我可以学习做类似的事情。


这种效果通常是通过一些 jquery 逻辑来实现的,如下所示:

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > 50) {
        $('.menu').addClass('fixed');
    } else {
        $('.menu').removeClass('fixed');
    }
});

这表示一旦窗口滚动超过一定数量的垂直像素,它就会向菜单添加一个类,将其位置值更改为“固定”。

有关完整的实施细节,请参阅:http://jsfiddle.net/adamb/F4BmP/ http://jsfiddle.net/adamb/F4BmP/

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

滚动时将菜单栏固定在顶部[关闭] 的相关文章

  • 使用 CSS 动画完成后从 DOM 中删除/隐藏 div?

    我有一个动画 其中 div 滑出视图 但是当动画完成时 div 只是返回到其在视图中的原始位置 如何仅使用 CSS 完全删除 div 或在动画结束后隐藏它 这是标记 div class container div class slide b
  • 当父元素具有visibility:hidden时CSS3动画是否运行?

    我有一个 CSS3动画片 https developer mozilla org en docs Web CSS animation定义的 和相关的 keyframes animation myAnimation 2 1s cubic be
  • 将无序列表转换为目录

    参考这个小提琴 http jsfiddle net exGnZ http jsfiddle net exGnZ 你好 我正在尝试用无序列表和前导点重现目录 不幸的是 当内容很长时 格式就会崩溃 有谁知道如何让下图中的第二章与点出现在同一行
  • 如何重置弹性项目的“显示”属性

    我试图通过保留旧浏览器 特别是 IE8 IE9 和 Opera 10 的表格 将基于表格和 JS 的旧布局转换为具有向后兼容性的新 Flexbox 问题是没有display flex item覆盖旧样式display table cell
  • 使用 json.js 字符串化多维数组时出现问题

    我有以下问题 stringify 但我认为我的 JavaScript 数组一定是错误的 这是我的代码 var questions new Array Valid hover function for i 0 i lt Questions l
  • 如何使用 :nth-child() 选择所有子项中的所有其他

    我正在开发一个评论系统 我需要拥有其他所有孩子 div 甚至是第一个孩子的孩子 用 CSS 选择 例如 假设我有这个标记 为了简单起见 省略了不需要的结束标签 div class comment div class comment div
  • 选择倒数第二个元素

    我需要选择倒数第二个输入可选元素的值 tr td td tr
  • CSS 中的 Data-URI SVG 背景在 Firefox 中不起作用

    好的 这就是我想做的 我的 css 文件中有这段代码 form row textfield hover textfield m hover background image url data image svg xml base64 PHN
  • 向客户报告模型状态和应用程序错误的推荐方法是什么?

    我想知道向浏览器报告将显示给用户的应用程序或模型状态错误的最佳实践是什么 你能抛出一个异常并在jquery post的错误处理程序中处理它吗 例如 考虑这个方法 HandlerErrorWithAjaxFilter HttpPost pub
  • 图表.js.如何更改“标签”数组的字体样式?

    我从 Chart JS 库中获取了一个图表 截屏 https i stack imgur com DnuRq png var ctx document getElementById myChart var data labels HTML
  • 验证动态字段jquery

    下午好 我遇到了以下问题 我正在使用 jQuery 验证插件来验证我的表单 v1 13 0 客户端 工作得很好 但我无法解决的问题是 我有一个字段名称 product 它是一个数组 在这个阵列中我可能有一种或可能有 20 种产品 这是我的代
  • 我可以使用 jQuery 的 AJAX 将表单信息提交到 Google Spreadsheets 吗?

    我喜欢能够使用谷歌电子表格 但以视觉方式集成到我的网站中很棘手 所以我想我会重新创建他们的表单 一个简单的剪切 粘贴 通过 AJAX 提交表单 数据将转到电子表格 我可以将我的用户重定向到比谷歌默认的 谢谢你所做的一切 更漂亮的东西你刚刚做
  • 在 PhoneGap 应用程序中打开用 HTML 和 CSS 制作的 PDF

    我的 iPad 应用程序在 Phone Gap 中遇到一个奇怪的问题 问题是我必须通过链接在我的应用程序中打开 PDF 文档 当我单击打开 PDF 的链接时 它会向我显示没有反向链接的 PDF 文档 因此 当我通过链接在应用程序中打开 PD
  • Windows 与 MacOS 上的不同大小字体渲染。怎么解决?

    我一直想知道为什么在 Windows 上我的字体看起来比 OSX 上更小 而且更蹩脚 Mac 与 Windows 的屏幕截图 http screencast com t UUxqLRhM http screencast com t UUxq
  • 带有覆盖CSS的背景图像

    我如何在 CSS 中设计带有叠加层的背景图像 就像这个示例图像一样 这是代码 我想添加tour类到背景图像和叠加效果 div class tour div class container div class row div class co
  • 如何在数据表角度中基于 JSON 动态填充表值?

    我在用着Angular 数据表 https l lin github io angular datatables 我需要能够根据返回的数据动态创建表 换句话说 我不想指定列标题 Example json数据 id 2 city Baltim
  • “$(document).ready”函数的替代方案

    我在 aspx 页面中使用 fancybox 对于灯箱 文档就绪功能在此页面中不起作用 有人告诉我编写一个新的 JavaScript 代码来加载该页面中的灯箱 包括 jQuery 检查网络选项卡 确保您没有收到 404 检查控制台是否没有收
  • 基本 jQuery 动画:省略号(三个点依次出现)

    我需要的 我需要一个动画省略号 一个点一个接一个地出现 动画需要循环播放 我想通过 jQuery 实现这一点 动画序列 Frame 1 等待您的选择 Frame 2 等待您的选择 Frame 3 等待您的选择 Frame 4 等待您的选择
  • 粘性背景图像/使用 CSS

    我目前正在创建我的第一个网站 并且即将完成 我在标题下为主体使用背景图像 我发现每个页面都有一个问题 因为它们的高度都不同 这使得我背景图像的当前设置放大图片以适合整个页面 我想做的是将背景图像设置为 粘性 我的想法是 背景图像将直接位于标
  • jQuery appendTo(), json 在 IE 6,7,8 中不起作用

    我这两天绞尽脑汁想找到解决办法 我使用 jQuery ajax 从数据库中获取值 以便在另一个框发生更改时更新一个框 php 脚本从数据库中获取值 然后输出 json 它在 FF 中工作正常 但在所有版本的 IE 中 选择框都不会更新 我已

随机推荐