Twitter 引导程序更改词缀偏移量

2024-02-27

我有一个想要“子导航”的网站。因此,当您滚动到部分时,其工具栏将固定在主工具栏下方。我可以正常工作,但初始化后无法更改顶部偏移量。文档说:

贴上('刷新')

将词缀与添加或删除元素结合使用时 从 DOM 中,您需要调用刷新方法:

但是当我尝试这个时我得到:

未捕获的类型错误:对象#没有方法“刷新”

这是我的代码:

$(function () {
    $('.sec-nav').addClass("affix-top");
    var adjustNavs = function (first) {
        $('.sec-nav').each(function (){
            var $p = $(this).closest('.sec');
            var $$ = $p.prevAll('.sec');
            console.log($$);
            var h = 0;
            $$.each(function () { h+=$(this).outerHeight();});
            console.log(h);

            if (first) {
                $(this).affix({offset: {top: h}});
            } else {
                $(this).data('affix', {b: {options: {offset:{top: h}}}});
                console.log(this);
                $(this).affix('refresh')
            }

        });
    }
    adjustNavs(true);
    $('.sec').bind('DOMSubtreeModified', function () {
        adjustNavs();
    });
});

我尝试过不同的变体

                $(this).data('affix', {b: {options: {offset:{top: h}}}});

包括:

                $(this).affix({offset: {top: h}});

我无法改变偏移量。如何更改 Affix 插件的偏移量?谢谢。


我想到了。我没有动态更新偏移量,而是将偏移值更改为函数:

$(function () {
    $('.sec-nav').addClass("affix-top").each(function (){
        var $self = $(this);
        var offsetFn = function () {
            var $p = $self.closest('.sec');
            var $$ = $p.prevAll('.sec');
            var h = 0;
            $$.each(function () { h+=$(this).outerHeight();});
            return h;
        }
        $self.affix({offset: {top: offsetFn}});
    });
});

现在,当某个部分由于 dom 操作或窗口大小调整而发生变化时,偏移量会由于函数返回值的变化而自动更改。

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

Twitter 引导程序更改词缀偏移量 的相关文章

  • jQuery .append 不起作用

    我想在我的表单中插入一些东西 这些东西被硬编码到插件中 我不想弄乱插件文件 所以我发现 append 我写过类似的东西 据我所知它应该有效 Chrome 中的控制台没有显示任何错误 这是有什么问题吗 由于 wordpress 安全模式 我正
  • JavaScript 中的正则表达式用于验证十进制数字

    我想要 JavaScript 中的正则表达式来验证十进制数字 它最多只允许两位小数 例如 它应该允许10 89但不是10 899 它还应该只允许一个句点 例如 它应该允许10 89但不是10 8 9 尝试使用以下表达式 d d 0 2 如果
  • 防止jsTree节点选择

    我正在使用 jsTree 插件列出文件系统中的文件夹 我需要防止用户在满足特定条件之前更改到另一个节点 下面的代码不会停止传播 我看到了一些使用其他插件的解决方案 但这是一个简单的任务 没有其他插件它一定是可能的 jstree on sel
  • jQuery id 选择器在有 .在 ID 中[重复]

    这个问题在这里已经有答案了 我的html代码如下 div class chatbox html markup which is validated div 在上面的代码中dipesh parmardiv 动态添加 我正在使用以下代码访问它
  • 使用 jquery 通配符检查 cookie 名称

    我有一个生成动态 cookie 的表单 例如 webform 62 1234356 62 1234356 可以是任意数字 我需要使用一些通配符检查来检查名称以 webform 开头的 cookie 是否存在 下面不起作用 if cookie
  • jQuery 在 Chrome 下发现错误元素

    我使用 jQuery 迭代 HTML 表 并动态填充每行的行号 通过在文本框中填充行号 function updateRowNums myTable find tr each function index this find input i
  • Javascript 中的线性回归 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我想在网络浏览器中用 Javascript 进行最小二乘拟合 目前 用户使用 HTML 文本输入输入数
  • 此错误消息“insertId: Error: INVALID_ACCESS_ERR: DOM Exception 15”的含义是什么?

    我正在使用 jquery mobile phonegap 和 openDatabase 开发一个应用程序 当应用程序执行时 我可以在 Safari 浏览器的控制台中看到SQL结果集与此消息 insertId Error INVALID AC
  • 单击回车键上的锚标记链接

    我有一个像这样的锚标签 a class btn btn danger href Continue a 它位于弹出窗口内 我需要按 Enter 键单击此链接 我尝试过以下代码 但它对我不起作用 document ready function
  • 如何找到div的第一个直接子元素

    这应该很容易 但我做不到 我有一个 id 为 LeftScrollableDiv 的 div 元素 我试图找到它下面的第一个子元素 LeftScrollableDiv first child div table table div 但结果为
  • CORS 在 jquery 中工作正常,但在 angularjs 中不行

    我的服务器端是php mysql 我正在另一个域的 Web 服务中进行 Ajax 调用 其中启用了 的访问控制 var postUrl http logical brains com elance clone test login php
  • 单击导航项锚链接时如何关闭切换菜单

    请看我的FIDDLE http jsfiddle net ayhpp8ax 我有一个带有 响应式 导航菜单 带有指向页面上元素的锚链接 的 1 页网站 当浏览器视口小于特定宽度 在我的情况下为 767px 时 使用此 javascript
  • Jquery获取选中的复选框

    您好 我想获取页面中选定复选框的列表 实际上我真正需要的是获取复选框旁边的元素的文本 该元素是一个 html 元素 li 代码如下 但它不起作用 这是我当前的 jQuery document ready function target cl
  • 如何删除除任何特定 id 之外的元素

    假设有一个父 id 其中包含许多元素 我想删除除一个元素之外的所有元素 ex parent id children not id n remove
  • 使用 AJAX 加载部分视图不起作用

    请原谅我 我是 MVC 和 AJAX 的新手 目前我只是提交一个表单 我想使用表单中的数据使用 ajax 更新部分视图中的表 My UserInfo部分视图如下所示 model IEnumerable
  • 过滤自定义选择器是否大于 jQuery 中的数字[重复]

    这个问题在这里已经有答案了 快给你一份 我查看了 jQuery com 中的选择器 但找不到按大于数字的选择器进行过滤的方法 我想做这个 level gt 4 hide 我的 html 看起来像这样 div Test div 如何使用该语法
  • 从 HTTP 登录到 HTTPS

    我的网站默认使用 HTTP 我确实有一个启用 HTTPS 的证书 但只有其上的某些区域强制建立安全连接 登录是通过 Ajax 处理的 我想开始使用 SSL 即使请求来自 HTTP 我尝试强制请求的地址具有 HTTPS 并且它完美地回复 然而
  • 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包
  • 按下回车键时不刷新页面

    我遇到了一些问题 只要表单中有输入 回车键就会触发页面刷新 下面的代码 如果按下回车并且文本区域 input 中没有输入任何文本 则不会刷新页面 但是如果按下回车并且 input中有输入或者光标位于文本区域 我不确定是什么触发了它 因为 s
  • 仅当显式选择行时才关闭 ui-bootstrap typeahead

    我创建了这个jsBin http jsbin com livuqafe 2 edit来证明我遇到的问题 如果您转到此处 请尝试输入 五 并继续 你的自然反应是输入 五 然后按 Tab 如果你想要 五百 你可以向下箭头一次 但是 在这种情况下

随机推荐