jQuery: отключить скрипт на основе ширины окна / медиа запроса

Question

jQuery: отключить скрипт на основе ширины окна / медиа запроса

У меня есть скрипт jQuery ниже, который запускает div, чтобы стать плавающим фиксированным. (Который работает, и у меня нет проблем с ним).

$(document).ready(function() {

    ctop = $('#comment').offset().top - parseFloat($('#comment').css('margin-top').replace(/auto/, 0));

});

$(window).scroll(function (event) {

    // what the y position of the scroll is

    var y = $(this).scrollTop();

    var abottom = $('#individual_second_tier').offset().top - parseFloat($('#individual_second_tier').css('margin-top').replace(/auto/, 0));



    // whether that's below the form

    if (y >= ctop) {

        // if so, ad the fixed class

        $('#comment').addClass('fixed');

        if (y > abottom-$('#comment').height()){

            $('#comment').offset({'top': abottom-$('#comment').height()-y});

        }

        else

        {

            $('#comment').offset({'top': 0 });

        }

    } else {

        // otherwise remove it

        $('#comment').removeClass('fixed');

    }

    var newWidth = $('#comment').parent().width();

    $('#comment').width(newWidth);



    });

Вы можете увидеть его в действии здесь. На сером прямоугольнике справа написано "опрос"

Мой сайт отзывчив, поэтому, когда он идет ниже 768 пикселей, div опроса перемещается вниз под содержание блога. Так что в полной ширине браузера скрипт работает отлично, но когда я изменяю его размер, опрос div выходит из строя.

Я полный нуб, когда это что касается jQuery - я отличный копирайтер - но я воображаю, что в существующем скрипте есть причудливый способ отключить его, когда он соответствует медиа-запросу или ширине браузера,чтобы я мог избавиться от функциональности fixed-floating-div.

Если кому-то нужна локальная копия, чтобы возиться с ней, вот zip-файл с html-файлом (тип будет выглядеть так, как я использую webfonts).

621 6

jQuery

6 ответов:

Comments

Ничего не найдено.

John the Painter · Accepted Answer · 2013-05-30 18:08:32

Не можете ли вы просто заставить положение опроса относительным, а не фиксированным на определенном размере экрана с помощью медиа-запросов?
@media (min-width: 768) {
    #comment { 
        position: relative !important; 
        top: 0 !important; 
    }
}
Или вы можете использовать jQuery в своей функции
if ($(window).width() > 768) { 
    $('#comment').removeClass('fixed');
}

Armin · Accepted Answer · 2013-05-30 23:14:26

Парень без учетной записи переполнения стека увидел мой вопрос и предоставил ответ по электронной почте. Это обманчиво простое решение. Простое добавление к существующему коду:
if ($(window).width() > 768) {
Последний блок кода выглядит следующим образом:
$(document).ready(function() {
    ctop = $('#comment').offset().top - parseFloat($('#comment').css('margin-top').replace(/auto/, 0));
});
$(window).scroll(function (event) {

    if ($(window).width() > 768) {

        // what the y position of the scroll is
        var y = $(this).scrollTop();
        var abottom = $('#individual_second_tier').offset().top - parseFloat($('#individual_second_tier').css('margin-top').replace(/auto/, 0));

        // whether that's below the form
        if (y >= ctop) {
            // if so, ad the fixed class
            $('#comment').addClass('fixed');
            if (y > abottom-$('#comment').height()){
                $('#comment').offset({'top': abottom-$('#comment').height()-y});
            }
            else
            {
                $('#comment').offset({'top': 0 });
            }
        } else {
            // otherwise remove it
            $('#comment').removeClass('fixed');
        }
        var newWidth = $('#comment').parent().width();
        $('#comment').width(newWidth);
    }
});
Я проверил все другие ответы, представленные здесь, но ни один из них не сработал правильно. Большое спасибо, однако, за вашу помощь.

Esteban · Accepted Answer · 2013-05-30 08:26:57

Я столкнулся с той же проблемой некоторое время назад, и вот как я обратился к ней:

Задайте медиа-запрос, чтобы скрыть элемент, когда это необходимо:
/* Somewhere above... */
div#toHide { display: block; /* ... */ }

@media (min-width: 800) {
    div#toHide { display: none; }
}
Тогда в моем .JS файл я создал такую функцию:
function isDivVisible() {
    return $('div#toHide').is(':visible');
}
Теперь о моем методе, который я не хотел выполнять весь его код, если пользователь не сможет его увидеть:
function someHugeFunction() {
    if(isDivVisible()) {
        // some crazy stuff here.
    }
}
Я не знаю, является ли это элегантным или нет, это работало для меня.

Collin Henderson · Accepted Answer · 2013-05-30 18:12:44

Вероятно, что-то вроде:

$(window).resize(function(){
  if( $(this).width() <= 768 ) {
    $('foo').removeClass('bar') //whatever css class is doing the undesired effect at breakpoint
  } 
});

damofknowledge · Accepted Answer · 2013-05-30 18:33:03

MatchMedia может быть тем, что вы ищете: http://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/

Добавьте что-то вроде этого вне функции прокрутки:
var isWide,
    width768Check = window.matchMedia("(min-width: 768px)");

width768Check.addListener(setWidthValue);
function setWidthValue (mediaQueryList) {
    isWide = width768Check.matches;
}
isWide = width768Check.matches;

$(window).resize(function(){
    if (isWide) {
        $('#comment').addClass('fixed');
    } else {
        $('#comment').removeClass('fixed');
    }
});
А затем в вашем свитке
if (y >= ctop && isWide) {
...
}
Не идеально, но делает трюк. Функция resize() соответствующим образом добавит/удалит ваш фиксированный класс при изменении размера окна.

Ashar Zafar · Accepted Answer · 2018-09-13 12:03:18

JQuery: отключить скрипт, основанный на ширине окна / медиа-запросе Jquery только для мобильных устройств

Добавьте Javascript

После добавления jQuery вы можете использовать следующий код в своем пользовательском файле javascript. Вы можете изменить "739" на другой номер в зависимости от разрешения устройства, на которое вы нацелены.
if ( $(window).width() > 739) {      
  //Add your javascript for large screens here 
} 
else {
  //Add your javascript for small screens here 
}
Конец

Да, мы уже сделали! Теперь вы можете выполнять javascript для различных размеров экрана. Дайте мне знать, если вы у вас есть какие-либо вопросы или отзывы ниже. Спасибо!