Javascript와 결합 된 미디어 쿼리?

Question

사용자가 페이지를 아래로 스크롤 할 때 창 위쪽에 끈적한 사이드 바가 있습니다.

그것은 바탕 화면 크기에서 잘 작동하지만 태블릿의 크기로 화면 크기를 조정하는 경우 (단 화면 @media (최소 폭 : 768px) 및 (최대 폭 : 959px)) 더 이상 스틱 ...

Javascript에 미디어 쿼리를 추가해야합니까?

당신은 당신은 #sticky에 1000 세트의 minWidth 속성을 가지고 http://v3.edharrisondesign.com/project/

$('#sticky').scrollToFixed({ 
     marginTop: 20, 
     limit: function() { 
      var limit = $('#foot').offset().top - $('#sticky').outerHeight(true) - 100; 
      return limit; 
     }, 
     minWidth: 1000, 
     zIndex: 999, 
     fixed: function() { }, 
    }); 

    $('#sticky').bind('unfixed', function() { 
     console.log('sticky preUnfixed'); 
    }); 
    $('#sticky').bind('unfixed', function() { 
     console.log('sticky unfixed'); 
     $(this).css('color', ''); 
    }); 
    $('#sticky').bind('fixed', function() { 
     console.log('sticky fixed'); 
     $(this).css('opacity', '1'); 
    }); 
}); 

Answer 1

여기 프로젝트를 볼 수 있습니다. 이는 창 너비가 1000px 이상이어야 함을 의미합니다. 그렇지 않으면 자동으로 꺼집니다. 그것을 제거하거나 원하는 크기에 맞게 충분히 작게 만들어 주면 효과가 있습니다.

$('#sticky').scrollToFixed({ 
    marginTop: 20, 
    limit: function() { 
     var limit = $('#foot').offset().top - $('#sticky').outerHeight(true) - 100; 
     return limit; 
    }, 
    minWidth: 768, 
    zIndex: 999, 
    fixed: function() { }, 
});