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（＆）＃39;收缩＆＃39）

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');
    }
});

从doc ready中删除窗口宽度var。如果页面小于800px，则滚动中的任何内容都不会被执行。如果页面大于800px，您只需要检查缩水头。

如果您希望在调整大小时更改页面，则需要在$(window).resize(function () { }内执行相同的操作，此时应将代码放在函数中并调用它以进行滚动并调整大小

Answer 2

你正在调整窗口大小吗？如果是这样，那么你需要一个事件处理程序，如：

$(window).resize(function () { 

// Your code here

});

另一点是，您应该检查设备的方向。

Answer 3

您不应该依赖JavaScript来使您的网页响应不同的分辨率或屏幕尺寸，CSS可以使用media-queries为您处理。

但你可以做这样的事情并创建两个不同的CSS页面。然后，只要屏幕分辨率调整到一定大小，CSS也会改变。

function adjustStyle() {
        var width = 0;
        // get the width.. more cross-browser issues
        if (window.innerHeight) {
            width = window.innerWidth;
        } else if (document.documentElement && document.documentElement.clientHeight) {
            width = document.documentElement.clientWidth;
        } else if (document.body) {
            width = document.body.clientWidth;
        }
        // now we should have it
        if (width < 800) {
            document.getElementById("myCSS").setAttribute("href", "css/narrow.css");
        } else {
            document.getElementById("myCSS").setAttribute("href", "css/main.css");
        }
    }

    // now call it when the window is resized.
    window.onresize = function () {
        adjustStyle();
    };

Jquery媒体查询

3 个答案: