자바 스크립트에 미디어 쿼리 추가

Question

이 코드에서는 계속 끈적한 사이드 바가 있습니다. 그러나 768px 이하의 .fake-sidebar div에만 영향을주고 싶습니다. 아무도 내 자바 스크립트에 미디어 쿼리를 추가하는 방법을 설명 할 수 있습니까?

var sticky_offset; 
$(document).ready(function() { 
    var original_position_offset = $('.fake-sidebar').offset(); 
    sticky_offset = original_position_offset.top; 
    $('.fake-sidebar').css('position', 'fixed'); 
}); 

$(window).scroll(function() { 
    var sticky_height = $('.fake-sidebar').outerHeight(); 
    var where_scroll = $(window).scrollTop(); 
    var window_height = $(window).height();  

    if((where_scroll + window_height) > sticky_offset) { 
     $('.fake-sidebar').css('position', 'relative'); 
    } 

    if((where_scroll + window_height) < (sticky_offset + sticky_height)) { 
     $('.fake-sidebar').css('position', 'fixed'); 
    } 
}); 

도움을 주시면 감사하겠습니다. 미리 감사드립니다!

당신은 당신이 원하는 것을 따라 window resize에 이벤트를 추가하거나 document ready에 수

Answer 1

:

$(window).resize(function() { 
     var width = $(window).width(); 
     if (width < 768) { 
      $('.fake-sidebar').css('position', 'relative'); 
     } 
     else { 
      $('.fake-sidebar').css('position', 'fixed'); 
     } 
    });