使用下面的代碼來檢測對象何時變得「粘滯」並保持固定在其內容中。響應式滾動條

var $window = $(window), 
    $stickyEl = $('#single-post-details'), 
    elTop = $stickyEl.offset().top; 

$window.scroll(function() { 
    $stickyEl.toggleClass('sticky', $window.scrollTop() + 52 > elTop); 
});

但是，我想使這個響應。這意味着它需要首先檢測它上面的橫幅的高度，以便它不會觸發錯誤的點。Here is a fiddle with as an example.

來源

2014-09-22 probablybest

響應是很難做到使用腳本。你爲什麼不使用CSS？ – 2014-09-22 13:15:23

你的意思是這樣的：http://jsfiddle.net/en62c3kq/2/？ – 2014-09-22 13:16:10

多數民衆贊成多數民衆贊成在不響應，如果你縮放它和滾動文字是在圖像的頂部 – probablybest 2014-09-22 13:19:14

問題是，在調整大小時，粘滯元素的頂部位置發生變化。爲了解決這個問題，你不應該檢查圖像的高度，而是重新計算頂部的位置。

使用.resize事件在這裏是有用的。在回調，只是更新您的全局變量：

var $window = $(window), 
    $stickyEl = $('#single-post-details'), 
    elTop = $stickyEl.offset().top; 

$window.on({ 
    resize : function(){ 
     elTop = $stickyEl.offset().top; 
     $window.trigger('scroll'); 
    }, 
    scroll : function() { 
     $stickyEl.toggleClass('sticky', $window.scrollTop() + 20 > elTop); 
    } 
});

注：的trigger('scroll')重要的是要防止粘元走了過來形象，同時擴大了窗口。

Fiddle

來源

2014-09-22 13:30:31

響應式滾動條

回答

Fiddle

相關問題