Адаптивная загрузка скрипта jQuery

Question

Адаптивная загрузка скрипта jQuery

0

У меня есть сценарий, который исчезает в моем логотипе в зависимости от положения прокрутки (на основе решения Даниэля Стюарта: http://danielstuart.ie/2010/09/20/my-jquery-mini-logo/)

    <script>
        var $scrolled = new Boolean(false);
        jQuery.noConflict();
        jQuery(window).scroll(function () {
            position = jQuery(window).scrollTop();
            if(position >=250 && $scrolled == false){
                $scrolled = new Boolean(true);
                jQuery('.small-logo').fadeIn('normal', function() { });
            }else if(position <250 && $scrolled == true){
                $scrolled = new Boolean(false);
                jQuery('.small-logo').fadeOut('normal', function() { });
            }
        });
    </script>

Проблема в том, что сайт реагирует, и я не хочу, чтобы это загружалось, когда ширина браузера меньше 768 пикселей. Как я могу это сделать, или не так, как есть?

user2475268 07 апр. 2014, в 08:22

Источник

Теги:

javascript

jquery

html

css

3 ответа

0

Проверьте, подходит ли ширина окна для вашего скрипта:

<script>
    var $scrolled = new Boolean(false);
    jQuery.noConflict();
    jQuery(window).scroll(function () {

        if ($(window).width() < 768)
            return false;

        position = jQuery(window).scrollTop();
        if(position >=250 && $scrolled == false){
            $scrolled = new Boolean(true);
            jQuery('.small-logo').fadeIn('normal', function() { });
        }else if(position <250 && $scrolled == true){
            $scrolled = new Boolean(false);
            jQuery('.small-logo').fadeOut('normal', function() { });
        }
    });
</script>

Justinas 07 апр. 2014, в 04:39

0

Вы можете использовать следующие функции jQuery, чтобы узнать размер экрана:

$(window).height();   // returns the height of browser window
$(window).width();   // returns the width of browser window

Вы можете использовать его в инструкции if и запускать только ваш желаемый контент, если ширина экрана> 768:

if ($(window).width > 768)
{
   //do magic here
}

JanR 07 апр. 2014, в 03:45

Ещё вопросы

SomeKittens · Accepted Answer · 2014-04-07T04-57-00.000Z

$(window).width() - это то, что вам нужно:

jQuery(window).scroll(function () {
      if (jQuery(window).width() > 768) {
        position = jQuery(window).scrollTop();
        if(position >=250 && $scrolled == false){
            $scrolled = new Boolean(true);
            jQuery('.small-logo').fadeIn('normal', function() { });
        }else if(position <250 && $scrolled == true){
            $scrolled = new Boolean(false);
            jQuery('.small-logo').fadeOut('normal', function() { });
        }
      }
    });