如何在 scrollToFixed.js 插件的移动大小窗口中滚动窗口时删除固定位置？答案

【问题标题】：How to remove fix postion when window is scrolling in mobile size window in scrollToFixed.js plugin?如何在 scrollToFixed.js 插件的移动大小窗口中滚动窗口时删除固定位置？
【发布时间】：2019-06-23 08:31:45
【问题描述】：

我使用 scrollToFixed.js 滚动我的 div 并修复位置。但是当我在移动设备中看到页面时，我想在滚动到页面底部时删除位置修复。我该怎么做？我写了一些代码但它不能正常工作。

      <div class="header" style='height:50px;border:1px solid;'></div>
       <div class="container-fluid">
        <div class="row">
               <div class="col-md-3 col-sm-4">
                <div class="profileRight" style='height:550px;border:1px solid;'>
                    name:Jack
                </div>
            </div>
               <div class="col-md-9 col-sm-8 profile-info">
                      <div style='height:1550px;border:1px solid;'>
                content</div>
                        </div>
            </div>    
          </div>

       $( '.profileRight' ).scrollToFixed( {
    marginTop: $( '.header' ).outerHeight(),
    limit: function () {
        var limit = $( '.footer' ).offset().top-480;
        return limit;
    }

} );
$( document ).scroll( function () {
    var winWidth = $( window ).width();
    if ( winWidth < 767 ) {
        $( '.profileRight' ).css( "position", "static" );
    }
} );

【问题讨论】：

标签： javascript jquery twitter-bootstrap scroll fixed

【解决方案1】：

你可以用css代替js，比如：

  @media only screen and (max-width: 767px) {
  .profileRight{
   position: static;
   }
  }

【讨论】：

我使用的是 scrollToFixed.js 插件，它不能与这个 css 代码一起正常工作。并且 scrollToFixed.js 创建了很多 div，当我设置静态位置时它还不够

【解决方案2】：

第一个问题是您想使用什么指标来定位您所谓的“移动”。如果喜欢在您的代码中，并且前面的评论者建议，您可以使用“移动”意味着比767px 更窄的浏览器窗口，即使用户在台式计算机上，那么媒体查询也可以解决问题，但是请记住，还有其他方法可以检查浏览器是否实际上是移动/触摸的，请参阅What is the best way to detect a mobile device?。

对于您使用 scrollToFixed.js 的情况，问题在于插件在元素上添加了 position:fixed 样式“内联”，因此为了使媒体查询具有更多特异性，您将不得不使用 @媒体查询匹配的声明中的 987654324@ 标志。

@media only screen and (max-width: 767px) {
  .profileRight{
     position: static !important;
  }
}

【讨论】：