JQuery Media Query

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

вы rezising окно Если это так, то вам нужен обработчик событий, что-то вроде:

$(window).resize(function() { 

// Your code here 

}); 

Еще один момент, вы должны проверить ориентацию устройства

Answer 2

вас. не должны полагаться на 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(); 
    }; 

Answer 3

Вам необходимо проверить ширину окна внутри функции прокрутки, так что правильная ширина каждый раз

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

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

Удалить ширину окна вар из док готовы. Если страница меньше 800 пикселей, тогда ничего в свитке не выполняется. Вам нужно только проверить, есть ли сокращение, если страница больше 800 пикселей.

Если вы хотите, чтобы ваши страницы, чтобы изменить при изменении размера, то вы должны сделать то же самое внутри $(window).resize(function() { } в какой момент вы должны поставить код в функцию и просто вызвать его для прокрутки и изменения размера