Question

我的脚本如下：

$(window).resize(function(){
if ($(window).width() >= 992){  

    var windw = this;

$.fn.followTo = function ( pos ) {
var $this = this,
    $window = $(windw);

$window.scroll(function(e){
    if ($window.scrollTop() > pos){
        $this.css({
            position: 'static',
            top: pos,
            marginTop: 100


        });
    }
    else {
        $this.css({
            position: 'fixed',
            top: 100
        });
    }

});
};


 $('#bgForm').followTo(1550);    



}   
});

当浏览器的大小低于992px时，我想阻止定位。如何使用我的脚本执行此操作？我尝试使用此代码，但随后元素停止在位置。谢谢！

Answer 1

当一个简单的CSS媒体查询就足够时，我无法理解你为什么要使用Javascript。除非您的问题还有其他问题，否则您没有说明？

@media only screen and (max-width: 992px) {
    // Rules placed here will only apply when the 
    // browser window is smaller than 992px
}

Answer 2

正如@designedbyscott所述，我认为媒体查询是最简单的解决方案，但由于您已经询问过您的JS脚本，这里有一个简化版本，它只创建一个函数来检查窗口宽度并相应地应用您的位置更改。它会在加载，调整大小和滚动时调用，但您可以决定什么是最适合您的。将“你的元素”更改为你想要定位的元素。

function positionFix() {
  element = $('.your-element');
  width = $(window).width();
  scroll = $(window).scrollTop();
  if (width >= 992 || scroll > 1550) {
    element.css('position','static');
    element.css('margin-top','100px');
  } else {
    element.css('position','fixed');
    element.css('top','100');  
    element.css('margin-top','0');  
  }
}
window.addEventListener("load", positionFix);
window.addEventListener("resize", positionFix);
window.addEventListener("scroll", positionFix);

块位置固定在浏览器的准确宽度下方

2 个答案: