觸摸設備上的粘性側欄

我有一個使用此插件的「粘性」側欄：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);

來源

2014-04-29 George Chanturidze

這是因爲@media screen and (min-width: 768px) *js-mainnav.megamenu-sticky你的CSS選擇器與最小寬度768px

屬性，它在桌面上僅顯示不包括在較小瀏覽器上的需求。

嘗試添加

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

的mediaquery

來源

2014-04-29 22:53:03

沒有，對不起，你是混淆了兩個不同的插件外。 Megamenu粘性是最重要的，我沒有抱怨。問題在於右側欄，它是聯繫表單。 –

哦，對不起，我不知道你在說哪一個..你看看演示是否有延遲嗎？ –

實際上經過進一步的審查後，我發現在github的評論中，這個問題之前被另一個用戶識別，但我沒有看到該解決方案已發佈。如果任何人都可以通過jQuery腳本來幫助改進，那很好。如果不是的話，我不得不尋找另一種解決方案。 –

觸摸設備上的粘性側欄

回答

相關問題