изменение css на прокрутке, в зависимости от размера экрана

Итак, я использую этот JQuery для изменения элементов в моем заголовке на прокрутке. Возможно ли, чтобы эти изменения происходили в зависимости от экрана?изменение css на прокрутке, в зависимости от размера экрана

Код:

 $(window).scroll(function() { 

    //After scrolling 100px from the top... 
    if ($(window).scrollTop() >= 10) { 
     $('#scrollthing').css('display', 'none'); 
     $('#ticket-amount').css('margin-bottom', '15px'); 

    //Otherwise remove inline styles and thereby revert to original stying 
    } else { 
     $('#scrollthing').attr('style', ''); 

    } 
});

Спасибо!

источник

2016-01-17 peter vries

Да, вы можете сделать любое условие jquery по размеру порта просмотра. Но в чем проблема? –

Я сделал свой сайт отзывчивым с помощью бутстрапа. Я использую этот код, чтобы сделать мой «фиксированный» заголовок меньшим на экранах ниже 400 пикселей. Но с этим кодом он также влияет на другие экраны. Я не очень много знаю о JQuery, как бы добавить такое условие? благодарит вас за ответ –

По какой-то причине я не могу ответить на свой вопрос. Во всяком случае, я нашел условие, о котором вы говорите: if ($ (window) .width() <405) { –

Чтобы получить ширину и высоту видовом:

var viewportWidth = $(window).width(); 
var viewportHeight = $(window).height();

изменения размера событий страницы:

$(window).resize(function() { 
     //do your check here on resize 
     if($(window).width() < 405) 
     //do here 
});

источник

2016-01-17 13:07:47

Here you go. 




$(window).scroll(function() { 
// checking the condition 
if ($(window).width() < 400 && $(window).scrollTop() >= 10) { 
// set your changes here 
} 
else { 
// else condition for when the if condition does not apply 
} 
});

Это не очень оптимальной производительности, но должны делать работа. Если хотите, вы можете обернуть его в функцию готовности документа.

источник

2016-01-17 13:16:13

изменение css на прокрутке, в зависимости от размера экрана

ответ

Смежные вопросы