javascript - Jquery 媒体查询

Question

下面的代码用于根据滚动位置相应扩展和收缩的标题。脚本本身很好，但在移动版本中扩展功能不是必需的，所以我想根据屏幕尺寸禁用此功能，类似于如何通过媒体查询更改和禁用 css。我想根据屏幕尺寸禁用此代码的执行:

$(document).ready(function() {

  var pageWidth = $(window).width();    
  var scroll = getCurrentScroll();
  var shrinkHeader = 300;

  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( pageWidth > 800 && scroll >= shrinkHeader ) {
           $('.nav_container').addClass('shrink');
      }
      else {
           $('.nav_container').removeClass('shrink');
    }
 });

function getCurrentScroll() {
  return window.pageYOffset || document.documentElement.scrollTop;
}
});

我已更新代码

*****随着窗口宽度脚本的添加，它可以工作，但它仍然有很多错误。当它低于 800 窗口宽度大小时，代码不会执行(按预期)，但扩展标题的 css 保持为默认值(我猜)，而它应该是较小标题的 css (removeClass ('shrink' )

Answer 1

您需要检查滚动函数内的窗口宽度，以便每次都是正确的宽度

$(window).scroll(function() {
    var scroll = getCurrentScroll();
    var pageWidth = $(window).width(); 

    if ( pageWidth > 800 ) {
        ( scroll >= shrinkHeader ) ? $('.nav_container').addClass('shrink') : $('.nav_container').removeClass('shrink');
    }
});

从文档中删除窗口宽度变量。如果页面小于 800px，则滚动中的任何内容都不会执行。如果页面大于 800 像素，您只需检查收缩标题。

如果您希望页面在调整大小时发生变化，那么您需要在 $(window).resize(function () { } 内执行相同的操作，此时您应该放置代码在一个函数中，只需调用它即可滚动和调整大小