Jquery 如何获取Bootstrap 3粘贴方法的动态数据偏移值

我想使用Bootstraps文档（）中描述的粘贴方法，但是在滚动到页面顶部后，我想固定到页面顶部的导航栏可以根据上面的内容具有不同的偏移值

下面是导航栏的一个示例：

<div class="navbar navbar-default" data-spy="affix" data-offset-top="200">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
  </ul>
</div>

如您所见，

数据偏移顶部

当前设置为200。如果上面的内容高度为200px，则此选项可以正常工作，但上面的内容是动态的，因此此导航栏上方的高度并不总是相同的。如何使

数据偏移顶部的值成为动态值

我猜我将不得不使用javascript方法来实现，但我不确定。
您可以使用jQuery获得
导航栏上方的动态内容高度。例如：

$('#nav').affix({
      offset: {
        top: $('header').height()
      }
}); 

工作演示：

在某些情况下，还必须计算offset.bottom以确定何时“取消粘贴”元素
 我对它的工作方式非常失望，每次都做一些自定义计算，并将元素的高度偏移到所需的词缀之上

这是最好的

正常的boostrap粘贴不考虑项目的自然偏移顶部位置，您必须手动将其作为属性传递。这就解决了这个问题，并解释了窗口调整大小时偏移顶部的变化

var $attribute = $('[data-smart-affix]');
$attribute.each(function(){
  $(this).affix({
    offset: {
      top: $(this).offset().top,
    }
  })
})
$(window).on("resize", function(){
  $attribute.each(function(){
    $(this).data('bs.affix').options.offset.top = $(this).offset().top
  })
})

我也把这个贴在了

不要忘记将
数据智能词缀
属性添加到词缀元素中

请尝试以下示例代码：

（在此示例中，在窗口的差异宽度中，红色部分的高度可能是100px或200px或300px，因此在滚动时需要差异
数据偏移顶部
）
我建议您在粘贴的div周围添加包装-以避免粘贴导航条的“滚动跳跃”。Thomas发布了一个不错的解决方案，但它不包括粘贴后的闭合空间，而且它在我必须使用的2.x boostrap版本中不起作用。所以我决定写一个全新的词缀实现。它不需要boostrap，只需要jquery。这是我的第一个javascript，所以请发发慈悲：）但也许它会帮助一些人。没有引导的解决方案总是很好的

function myaffix() {

var affixoffset = $('.navbar').offset().top

$('#nav-wrapper').height($(".navbar").height());

$(window).scroll(function () {

    if ($(window).scrollTop() <= affixoffset) {
        $('.navbar').removeClass('affix');
    } else {
        $('.navbar').addClass('affix');
    }
});

};

$(document).ready(function () {

   myaffix();

   $(window).on("resize", function () {
       myaffix();
   });

});

函数myaffix（）{
var affixoffset=$（'.navbar'）.offset（）.top
$（“#nav wrapper”）.height（$（“.navbar”）.height（））；
$（窗口）。滚动（函数（）{
如果上面的（$（window）.scrollTop（）Skelly是正确的，没有更好的方法可以做到这一点。使用“本机”引导的唯一可能解决方案是通过JavaScript调用附加附加选项（如上文中所述）

使用
数据偏移量
属性来实现相同的效果尤其是不可能（即使这会更方便，即使粘贴的文档提高了人们的希望）

这样就可以写作了

data-offset='{"top":42}'

但是一个人不允许写，例如：

data-offset='{"top":$("#banner").height()}'

原因是数据属性是通过JQuery
.data（）
API解析的，该API只允许解析纯JSON值，请参见。
ThomasReggi的数据智能粘贴在某些情况下（调整文档大小或粘贴的列太高时）对我不起作用但它给了我一个简单的想法：在粘贴内容之前添加一个空元素，并使用它来获得偏移量。调整大小时效果很好

在进行此操作时，我还将元素的宽度设置为原始父元素中的自然宽度。以下是我的解决方案：

$('[data-affix-after]').each( function() {
  var elem = $(this);
  var parent_panel = elem.parent();
  var prev = $( elem.data('affix-after') );

  if( prev.length != 1 ) {
    /* Create a new element immediately before. */
    prev = elem.before( '<div></div>' ).prev();
  }

  var resizeFn = function() {
      /* Set the width to it's natural width in the parent. */
      var sideBarNavWidth = parent_panel.width()
          - parseInt(elem.css('paddingLeft'))
          - parseInt(elem.css('paddingRight'))
          - parseInt(elem.css('marginLeft'))
          - parseInt(elem.css('marginRight'))
          - parseInt(elem.css('borderLeftWidth'))
          - parseInt(elem.css('borderRightWidth'));
      elem.css('width', sideBarNavWidth);

      elem.affix({
          offset: {
              top: prev.offset().top + prev.outerHeight(true),
              bottom: $('body>footer').outerHeight(true)
          }
      });
  };

  resizeFn();
  $(window).resize(resizeFn);
});

如果要禁用粘贴（例如，当右列堆叠时），请使用CSS：

.affix, .affix-bottom { position: static; }

在相应的媒体查询中

GI
Thnx ThomasReggi代表一个想法。但可能更正确的写法是：

$(this).data('bs.affix').options.offset.top = $(this).offset().top

对于像我这样的人，他们也需要一个底部值，可以用类似的方式来写

顺便说一句，我认为应该基于setTimeout（有点像debounce）将其包装在一个装饰器中.
我之前在这方面遇到了很多问题，出于某种原因，我无法获得其他人建议的任何解决方案。我对Bootstrap和JQuery相对较新，所以我可能做了一些不太懂的事情。无论如何，我找到了一个非常有效的解决方案，尽管严格来说它没有使用Bootstrap想要的粘贴功能。我保持了我的
#thismelement.affix{top:desiredFixedPosition；}
CSS的完整性，但是从#thismelement的HTML标记中去掉了
数据间谍
和
数据偏移量top
属性。然后我在JQuery中硬编码了它：

var newAffix = function() {
    if($("otherElementsAboveThisElement").height() <= $(window).scrollTop()) {
        $("#thisElement").addClass("affix");
    } else {
        $("#thisElement").removeClass("affix");
    }
}

$(document).ready(function() {
    $(window).resize(newAffix);
    $(window).scroll(newAffix);
}

var newAffix=function（）{
如果（$（（“OtherElementsBoveThisElement”）.height（）您的答案不是动态的，只是静态的。是的-这不是一个独立的答案，而是Skelly答案的附录（不允许我发表评论）.我只是想澄清，如果不在页面上使用自定义JavaScript（我已经尝试了好几个小时）来表达动态词缀计算，包括调试引导程序和JQuery例程，那是毫无意义的。你是我的英雄！谢谢，伙计..对其他人说：在使用这段代码时，别忘了添加“数据智能词缀”属性到您的词缀元素。；）最好的答案！做得很好。这帮助我解决了我的问题。您的代码中有一个错误，请使用“$（this.data（'bs.affix'）.options.offset.top”而不是“$（this.data（'bs.affix'）.options.offset”。我还可以建议使用[data offset top dynamic”而不是[data smart affixture]use.outerhight（）不是.height（）来包含边框和填充，我需要一种方法来重新计算页面大小上的值，还需要添加一个空格保持器，以便粘贴平稳运行，例如粘贴内容时不会跳页。解决方案->
.affix, .affix-bottom { position: static; }

$(this).data('bs.affix').options.offset.top = $(this).offset().top

var newAffix = function() {
    if($("otherElementsAboveThisElement").height() <= $(window).scrollTop()) {
        $("#thisElement").addClass("affix");
    } else {
        $("#thisElement").removeClass("affix");
    }
}

$(document).ready(function() {
    $(window).resize(newAffix);
    $(window).scroll(newAffix);
}