javascript - 触摸设备上的粘性侧边栏

Question

我有一个使用这个插件的“粘性”侧边栏:https://github.com/AndrewHenderson/jSticky .基本上，它在桌面上运行良好，但在触摸设备上它会延迟一两秒，直到页面完全滚动以重新出现在适当的位置。有没有办法让它在页面滚动时像在桌面上一样滚动？我在其他网站上看到粘性元素是这样工作的，所以应该有一种方法可以更顺利地检查和实现位置。代码如下。您所做的就是为元素分配一个 .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 和 (min-width: 768px) 的 css 选择器 *js-mainnav.megamenu-sticky 仅在最小宽度为 768px 的桌面上显示

它需要的属性在较小的浏览器上不包含。

尝试添加

#js-mainnav.megamenu-sticky {
    z-index: 1000;
   position: fixed !important;
}

在媒体查询之外