Как убрать фиксированное положение при прокрутке окна в окне мобильного размера в плагине scrollToFixed.js?

Question

Я использую 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" );
    }
} );

Answer 1

Итак, первый вопрос - какой показатель вы хотите использовать для таргетинга того, что вы называете «мобильным». Если, как и в вашем коде, как предлагает предыдущий комментатор, вам подходит «мобильный», что означает просто более узкое окно браузера, чем 767px, даже если пользователь находится на настольном компьютере, то медиа-запрос сделает свое дело, но Имейте в виду, что существуют другие методы проверки, является ли браузер действительно мобильным или сенсорным, см. Каков наилучший способ обнаружения мобильного устройства? .

Для вашего случая с scrollToFixed.js проблема заключается в том, что плагин добавляет к элементу стиль "1006 *" "inline", поэтому для того, чтобы медиа-запрос имел большую специфичность, вам, к сожалению, придется использовать !important флаг в объявлении, соответствующий медиазапросу.

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

Answer 2

Вы можете использовать css вместо js, например:

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