当窗口在滚动到固定的插件中在移动尺寸窗口中滚动时，如何删除修复位置.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

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

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

Answer 2

第一个问题是你想用什么指标来定位你所谓的"移动"。如果像您的代码一样，并且前面的评论者建议，您可以使用"移动"，这意味着只是比767px更窄的浏览器窗口，即使用户在台式计算机上，媒体查询也可以解决问题，但请记住，还有其他方法可以检查浏览器是否实际上是移动/触摸的， 请参阅检测移动设备的最佳方法是什么？。

对于 scrollToFixed.js 的情况，问题是插件在元素上添加了position:fixed样式"内联"，因此为了使媒体查询具有更高的特异性，您很遗憾必须在与媒体查询匹配的声明中使用!important标志。

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