草庐IT

javascript - 滚动上的 jQuery 粘性标题

coder 2025-01-03 原文

我制作了一个非常小的片段，使子标题固定在顶部。 但是，就像我说的那样——我绝不是 js 天才或 jQuery 天才——实际上远非如此——我怀疑自己的编码能力..

问题:

  • 1 - 似乎有很多插件(还有很多问题 在这个网站上)比我的代码片段多得多的代码 - 我是什么 失踪 ？？我做错了什么？
  • 2 - 这能跨浏览器工作吗？
  • 3 .. 这是一个小问题，如何避免发生小的“跳跃”？ (如果你去 fiddle ，并慢慢地滚动 - 你会看到主 div 在脚本被调用时“跳跃”.. 我试图将另一个 .pad 类添加到较低的 div -

添加类:.pad 当脚本被调用时。

.pad{padding-top:42px;}

但它似乎无法正常工作:http://jsfiddle.net/obmerk99/VvKq3/2/

  • 5 .如何计算 div 的实际位置？当我尝试 像这样:
var top = jQuery(window).scrollTop();

var div_top =  jQuery('#header_stick').offset().top;

if (top > div_top) // height of float header;

神经质... http://jsfiddle.net/obmerk99/VvKq3/4/

  • 6 欢迎任何其他建议..

最佳答案

“跳跃”的发生是因为该元素在父元素中占据了空间，当您将其位置更改为 fixed 时，它突然不再存在了。 我不知道处理它的最佳方法，但一个选择是在你的 #header_stick 之前添加一个小跨度(可能只有一个空格)，具有相同的高度，所以当它的类发生变化时，仍然会有一些东西来解释高度差异。(更新:你的 pad 解决方案可能是最好的，一次 done right ；见下文)

您的填充解决方案也可能有效，前提是:1)您记得在用户滚动到顶部时删除该类(在您的 fiddle 中我看到您添加了它，但没有看到您删除它)； 2) 你的高度是正确的——我仍然无法仔细查看你的代码，所以我不知道你哪里错了。 (编辑: 问题是您的 .pad 类使用的是 float header 的高度，而不是棒状 header - 修复它并删除该类产生了我认为成为 correct result )

关于div的真实位置，你试过用父元素的偏移量减去div的偏移量吗？这样你就会有它相对于父级的位置(不过要注意边界之类的东西 - 我最近 answered 另一个问题，其中的细节很重要)。

更新:您的问题似乎是，当位置更改为固定时，偏移量也会发生很大变化。我建议计算一次正确的高度，然后将其存储在某个地方，以便滚动功能可以使用它。换句话说，不要在滚动时计算它，这使得找到正确的阈值来进行类切换变得更加困难。

除此之外，我认为您的代码很好，而且我相信它也可以跨浏览器工作(至少是符合标准的浏览器；不能说旧版本的 IE)。也很有见地，我一直想知道这个“技巧”是如何工作的，现在我发现它比我想象的要简单......

关于javascript - 滚动上的 jQuery 粘性标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9870491/

javascriptjQueryjsfiddlenoreferrersection

有关javascript - 滚动上的 jQuery 粘性标题的更多相关文章

  1. ruby-on-rails - date_field_tag，如何设置默认日期？ [ rails 上的 ruby ] - 2

    我想设置一个默认日期，例如实际日期，我该如何设置？还有如何在组合框中设置默认值顺便问一下，date_field_tag和date_field之间有什么区别？ 最佳答案 试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag，如何设置默认日期？[rails上的ruby]，我们在StackOverflow上找到一个类似的问

  2. ruby-on-rails - openshift 上的 rails 控制台 - 2

    我将我的Rails应用程序部署到OpenShift，它运行良好，但我无法在生产服务器上运行“Rails控制台”。它给了我这个错误。我该如何解决这个问题？我尝试更新ruby​​gems，但它也给出了权限被拒绝的错误，我也无法做到。railsc错误:Warning:You'reusingRubygems1.8.24withSpring.UpgradetoatleastRubygems2.1.0andrun`gempristine--all`forbetterstartupperformance./opt/rh/ruby193/root/usr/share/rubygems/rubygems

  3. ruby-on-rails - 使用 Rmagick 或 ImageMagick 在背景上放置标题 - 2

    我有一张背景图片，我想在其中添加一个文本框。我想弄清楚如何将标题放置在其顶部的正确位置。(我使用标题是因为我需要自动换行功能)。现在，我只能让文本显示在左上角，但我需要能够手动定位它的开始位置。require'RMagick'require'Pry'includeMagicktext="Loremipsumdolorsitamet"img=ImageList.new('template001.jpg')img 最佳答案 这是使用convert的ImageMagick命令行的答案。如果你想在Rmagick中使用这个方法，你必须自己移植

  4. ruby-on-rails - 相关表上的范围为 "WHERE ... LIKE" - 2

    我正在尝试从Postgresql表(table1)中获取数据，该表由另一个相关表(property)的字段(table2)过滤。在纯SQL中，我会这样编写查询:SELECT*FROMtable1JOINtable2USING(table2_id)WHEREtable2.propertyLIKE'query%'这工作正常:scope:my_scope,->(query){includes(:table2).where("table2.property":query)}但我真正需要的是使用LIKE运算符进行过滤，而不是严格相等。然而，这是行不通的:scope:my_scope,->(que

  5. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  6. ruby-on-rails - Ruby - 如何从 ruby​​ 上的 .pfx 文件中提取公钥、rsa 私钥和 CA key - 2

    我有一个.pfx格式的证书，我需要使用ruby​​提取公共(public)、私有(private)和CA证书。使用shell我可以这样做:#ExtractPublicKey(askforpassword)opensslpkcs12-infile.pfx-outfile_public.pem-clcerts-nokeys#ExtractCertificateAuthorityKey(askforpassword)opensslpkcs12-infile.pfx-outfile_ca.pem-cacerts-nokeys#ExtractPrivateKey(askforpassword)o

  7. jquery - 如何将 AJAX 变量从 jQuery 传递到他们的 Controller ？ - 2

    我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过ajax执行，并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam

  8. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  9. 带有 attr_accessor 的类上的 Ruby instance_eval - 2

    我了解instance_eval和class_eval之间的基本区别。我在玩弄时发现的是一些涉及attr_accessor的奇怪东西。这是一个例子:A=Class.newA.class_eval{attr_accessor:x}a=A.newa.x="x"a.x=>"x"#...expectedA.instance_eval{attr_accessor:y}A.y="y"=>NoMethodError:undefinedmethod`y='forA:Classa.y="y"=>"y"#WHATTT?这是怎么回事:instance_eval没有访问我们的A类(对象)然后它实际上将它添加到

  10. ruby-on-rails - rails 上的 ruby : radio buttons for collection select - 2

    我有一个集合选择:此方法的单选按钮是什么？谢谢 最佳答案 Rails3中没有这样的助手。在Rails4中，它是collection_radio_buttons. 关于ruby-on-rails-rails上的ruby:radiobuttonsforcollectionselect，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/18525986/

随机推荐