터치 장치의 고정 사이드 바

Question

이 플러그인을 사용하는 "끈적"사이드 바를 가지고 있습니다 : https://github.com/AndrewHenderson/jSticky. 기본적으로 데스크톱에서는 잘 작동하지만 터치 장치에서는 페이지가 완전히 스크롤되어 적절한 위치에 다시 나타날 때까지 2 ~ 2 초 정도 지연됩니다. 데스크톱 에서처럼 페이지가 스크롤되는 동안 스크롤 할 수있는 방법이 있습니까? 나는 다른 사이트에서 끈적 끈적한 요소가 이와 같이 작동하는 것을 보았습니다. 따라서 방법을 점검하고 위치를 부드럽게 구현해야합니다. 코드는 다음과 같습니다. 당신이하는 일은 .sticky 클래스를 아이템에 할당하는 것뿐입니다. 데모를 들어, 당신은 내가 일하고 있어요이 페이지를 볼 수 있습니다 http://www.mjmlawoffice.com/responsive/index.php/fees

<script> 
jQuery(function(){ 
jQuery(".sticky").sticky({ 
topSpacing: 0, 
zIndex:2, 
stopper: "#footer" 
}); 
}); 
</script> 


;(function($) { 

    $.fn.sticky = function(options) { 

    var defaults = { 
     topSpacing: 0, // No spacing by default 
     zIndex: '', // No default z-index 
     stopper: '.sticky-stopper' // Default stopper class, also accepts number value 
     }, 
     settings = $.extend({}, defaults, options); // Accepts custom stopper id or class 

    // Checks if custom z-index was defined 
    function checkIndex() { 

     if (typeof settings.zIndex == 'number') { 
     return true; 
     } else { 
     return false; 
     } 
    } 
    var hasIndex = checkIndex(); // True or false 

    // Checks if a stopper exists in the DOM or number defined 
    function checkStopper() { 

     if (0 < $(settings.stopper).length || typeof settings.stopper === 'number') { 
     return true; 
     } else { 
     return false; 
     } 
    } 
    var hasStopper = checkStopper(); // True or false 

    return this.each(function() { 

     var $this   = $(this), 
      thisHeight  = $this.outerHeight(), 
      thisWidth  = $this.outerWidth(), 
      topSpacing  = settings.topSpacing, 
      zIndex   = settings.zIndex, 
      pushPoint  = $this.offset().top - topSpacing, // Point at which the sticky element starts pushing 
      placeholder = $('<div></div>').width(thisWidth).height(thisHeight).addClass('sticky-placeholder'), // Cache a clone sticky element 
      stopper  = settings.stopper, 
      $window  = $(window); 

     function stickyScroll() { 

     var windowTop = $window.scrollTop(); // Check window's scroll position 

     if (hasStopper && typeof stopper === 'string') { 
      var stopperTop = $(stopper).offset().top, 
       stopPoint = (stopperTop - thisHeight) - topSpacing; 
     } else if (hasStopper && typeof stopper === 'number') { 
      var stopPoint = stopper; 
     } 

     if (pushPoint < windowTop) { 
      // Create a placeholder for sticky element to occupy vertical real estate 
      $this.after(placeholder).css({ 
      position: 'fixed', 
      top: topSpacing 
      }); 

      if (hasIndex) { 
      $this.css({ zIndex: zIndex }); 
      } 

      if (hasStopper) { 
      if (stopPoint < windowTop) { 
       var diff = (stopPoint - windowTop) + topSpacing; 
       $this.css({ top: diff }); 
      } 
      } 
     } else { 
      $this.css({ 
      position: 'static', 
      top: null, 
      left: null 
      }); 

      placeholder.remove(); 
     } 
     }; 

     $window.bind("scroll", stickyScroll); 
    }); 
    }; 
})(jQuery); 

Answer 1

@media screen and (min-width: 768px) *js-mainnav.megamenu-sticky에 대한 CSS 선택기는 최소 폭 768px

그것은 그 속성을 가진 바탕 화면에 표시되기 때문입니다 작은 브라우저에는 필요가 없습니다.

시도 mediaquery