使用下面的代码来检测对象何时变得“粘滞”并保持固定在其内容中。响应式滚动条

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

相关问题