There is a script, it is necessary that it starts running at a screen resolution of> 1200px and does not work on small monitors. How to implement it?

<script type="text/javascript"> $(function() { var topPos = $('.floating').offset().top; $(window).scroll(function() { var top = $(document).scrollTop(), pip = $('#send-letter').offset().top, //расстояние до подвала от верха окна браузера height = $('.floating').outerHeight(); //получаем значение высоты пл.блока if (top > topPos && top < pip - height) { $('.floating').addClass('fixed').fadeIn(); } //блок будет виден, если значения соответствуют указанным else if (top > pip - height) { $('.floating').fadeOut(200); } //блок скроется когда достигнет заданного расстояния else { $('.floating').removeClass('fixed'); } }); }); </script>

    3 answers 3

    Browser width computed javascript and media-queries are different.
    It is better to rely on the one that is calculated using media-queries.

    To transfer the calculated value to javascript, you must use an element that will always be on the page and that does not affect its display in any way. For example, head .

    So, first set the value in the .css file:

     @media screen and (max-width: 1200px) { head { min-width: 320px; /* Какое-то начальное значение */ } } @media screen and (min-width: 1201px) { head { min-width: 1201px; /* Какое-то начальное значение */ } }

    And then we operate them in javascript:

     $('document').ready(function() { // Начальное состояние my_func(); $(window).resize(function() { /** * При изменении ширины окна */ my_func(); }); window.onorientationchange = function() { /** * При смене ориентации с портретной на пейзажную или обратно */ my_func(); }; function my_func() { /** * Считываем значение из CSS */ var browserMinWidth = parseInt($('head').css('min-width'), 10); if (browserMinWidth > 1200) { // какие-то манипуляции } } });

      You can use such a construction, just take into account such a moment that the script will work every time the browser window resizes more than 1200 wide:

       $(window).resize(function() { if(document.documentElement.clientWidth > 1200) { // тут ваш скрипт } });

      If you do not need to consider the possibility of resizing, then the function $(window).resize(function(){}); need not.

      • sort of doing what you said and didn’t work - cevil
      • you can use debounce in order to avoid working with each resize, see davidwalsh.name/javascript-debounce-function - SanŚ́́́́́́́́́́́́́́́́́́́́́́ May at 5:27

      First, check the screen size, not the size of the browser is bad - the user is not obliged to keep the browser maximized.

      Secondly, the width check is $(document).width() and $(window).width() (they work the same way as I imagine) - you put them in if and you are happy.

      But if for some reason it was necessary to check the screen, and not the browser window (well, you never know), then window.screen.width , I cannot comment on cross-browser compatibility.