如何更改css中的data-offset-top属性答案

【问题标题】：how to change data-offset-top property in css如何更改css中的data-offset-top属性
【发布时间】：2017-08-10 19:37:05
【问题描述】：

有人知道我可以更改 css 中的 data-offset-top 属性吗？我在 HTML 文档中设置了 data-offset-top="-150"，但我想在 css 中的 @media 语句中更改它，因为移动设备的偏移量会发生变化。

【问题讨论】：

使用引导程序？

标签： html affix

【解决方案1】：

你可以试试

    $(window).resize(function(){
        if (window.matchMedia('(min-width: 1024px)').matches){
            $('.test').affix({offset: {top: 150} });
        }else{
           $('.test').affix({offset: {top: 250} }); 
        }
    }).trigger('resize');

【讨论】：

谢谢，但我正在寻找 css 解决方案而不是 javascript
@carl 你能给我提琴吗？也许我可以帮助你尝试给你的词缀块填充顶部？

【解决方案2】：

您不能更改 CSS 中的 data-offset-top 属性，因为它不是 CSS 属性。它是您尝试使用的 Bootstrap affix 的 HTML 属性。

如果你想要一个 CSS 解决方案，你可以做最接近的事情 -

<div class="desktop-only" data-spy="affix" data-offset-top="160">
<div class="mobile-only" data-spy="affix" data-offset-top="change_to_whatever">

然后在您的 CSS 中，以适当的分辨率隐藏这些各自的类 -

.mobile-only{
    display : none;
}

@media your_media_query_for_smaller_devices{
  .mobile_only{
     display : block;
  }
  .desktop-only{
     display : none;
  }
}

【讨论】：