当前位置：文江博客话题详情

粘性 Div 停止于底部

发布于 2024-12-01 13:26:24 字数 278 浏览 1 评论 0原文

我有一个粘性 div，但我需要它停在底部的某个点。当然，在示例（下面的链接）中它永远不会到达底部，但如果我有一个宽度较大的 div，我希望它在到达页脚之前停止。如果您不明白这个问题，请告诉我，帮助会很大。

http://blog.yjl.im/2010 /01/stick-div-at-top-after-scrolling.html

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

吃兔兔 2024-12-08 13:26:24

这里有一个 jquery 插件可以为你解决这个问题。该插件会将元素固定到页面顶部，如示例中所示；并且，如果您将可选限制设置为要停止的元素的顶部，则它应该在滚动时向上移动页面。您必须将“固定”元素的高度添加到限制，以使其在触及您不希望其触及的元素之前再次向上移动页面，如果需要，还可以加上一些边距。

这是一个演示这一点的小提琴： http://jsfiddle.net/ZczEt/2/

这里是插件及其来源：https://github.com/bigspotteddog/ScrollToFixed

// the limit is optional, but it will make the header move up the
// page again once it reaches the 7th paragraph
$(document).ready(function() {
    $('.header').scrollToFixed( { limit: $($('h2')[7]).offset().top } );
});

我忘了提及，这个插件在修复后还将修复粘性标题下方内容中的问题。在您的示例中，如果您缓慢滚动，您会注意到当标题固定时，内容会跳跃标题的高度。这个插件弥补了这一点。

Here is a jquery plugin that may solve this for you. This plugin will fix the element to the top of the page, as you have in your example; and, if you set the optional limit to the top of the element you want to stop at, it should move up the page as it is scrolled. You will have to add the height of the "fixed" element to the limit to get it to move up the page again before it touches the element you do not want it to touch, plus some margin if desired.

Here is a fiddle that demonstrates this: http://jsfiddle.net/ZczEt/2/

Here is the plugin and its source: https://github.com/bigspotteddog/ScrollToFixed

// the limit is optional, but it will make the header move up the
// page again once it reaches the 7th paragraph
$(document).ready(function() {
    $('.header').scrollToFixed( { limit: $($('h2')[7]).offset().top } );
});

I forgot to mention, this plugin will also fix that hitch in the content below your sticky header when it goes fixed. In your example, if you scroll slowly, you will notice that the content jumps the height of the header when it becomes fixed. This plugin compensates for that.

回复收藏 0 原文

我只土不豪 2024-12-08 13:26:24

这与示例有点不同，但我认为这符合您的要求：

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_bottomEdge = window_top + $('#sticky').outerHeight();
    var avoid_top = $('#avoidMe').offset().top;
    if (div_bottomEdge < avoid_top) $('#sticky').css('top', window_top);
}

$(document).ready(function() {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

请参阅此 jsFiddle更多详细信息示例

It's a bit of a departure from the example, but I think this does what you're after:

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_bottomEdge = window_top + $('#sticky').outerHeight();
    var avoid_top = $('#avoidMe').offset().top;
    if (div_bottomEdge < avoid_top) $('#sticky').css('top', window_top);
}

$(document).ready(function() {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

See this jsFiddle Example for more details

回复收藏 0 原文

写下不归期 2024-12-08 13:26:24

我已经使用 jquery 插件

 https://github.com/garand/sticky

停在底部：

 (function($) {

    var limit_bottom=$('#footer').height(); 
    $('.product-box').sticky({topSpacing:0, bottomSpacing:limit_bottom});
   })(jQuery);

i have used jquery plugin

 https://github.com/garand/sticky

to stop at bottom:

 (function($) {

    var limit_bottom=$('#footer').height(); 
    $('.product-box').sticky({topSpacing:0, bottomSpacing:limit_bottom});
   })(jQuery);

回复收藏 0 原文

~没有更多了~