jQuery的固定格，底部边界

固定的版本与流畅的运动：http://jsfiddle.net/66MBH/6/jQuery的固定格，底部边界

我一直在到处找，但一直无法找到任何可以帮助我，
首先，
的Jquery 。代码（不记得在那里我得到了它）

$(document).ready(function() { 
    var top = $('#socialbookmarks2').offset().top - parseFloat($('#socialbookmarks2').css('marginTop').replace(/auto/, 0)); 
    $(window).scroll(function (event) { 
    // what the y position of the scroll is 
    var y = $(this).scrollTop(); 

    if (y >= top) { 
     $('#socialbookmarks2').addClass('fixed'); 
    } else { 
     $('#socialbookmarks2').removeClass('fixed'); 
    } 
    }); 
});

快速;当容器的到达？，底部边界或什么时，我该如何停止？

扩大;
我在一个自定义的“博客”网站上使用代码，与wordpress博客相似，社交书签应该从帖子的顶部到底部按照每篇博文发布，然后从下一篇文章开始，用户已经滚动到它，

现在，如果我激活它，它会在第一个书签容器（＃socialbookmarks2）上工作，然后一直沿着页面的底部到达底部而不是停止在该职位。
每页有10个职位。
希望其理解..

我发现财产以后simular什么，我想它，如果你看一下9gag.com，如果你看到他们的评价和Twitter/Facebook的共享盒做。它跟随后，然后停在它的底部。

谢谢！

来源

2013-04-10 user2267175

最终你的答案是只需添加另一份声明到您的条件：

if (y >= top && y < bottom) { 
    $('#socialbookmarks2').addClass('fixed'); 
} else { 
    $('#socialbookmarks2').removeClass('fixed'); 
}

现在，什么是底？顶部+元素的高度。由于我不知道那个元素是什么，我只能举一个粗略的例子：

<div class="blog-item"> 
    <div class="social-bookmarks"></div> 
    <h1>blog title</h1> 
    <p> 
     content here 
    </p> 
</div>

你需要考虑社会书签的父母。此外，听众必须在课堂上，而不是身份证。

var bottom = y + $(this).parent().height();

假设这是在每个$（'。social-bookmarks'）评估的循环中。

有很多方法可以写出来。我只是指出一种方法来实现你的效果，而不是一个工作的例子。为此，您需要尝试一下，如有需要，我可能会更新。

来源

2013-04-10 18:00:25

嗨，感谢您的快速响应！我一直在努力使它在网站上工作，但它不会做任何事情，只是停止工作，我做了一个简单的jsfiddle来显示它现在看起来如何，没有你的代码，你可能会尝试添加你的代码，看看如果它有效？对于麻烦抱歉，我并不擅长所有这些js的东西。 http://jsfiddle.net/7KcJb/1/ 非常感谢:) – user2267175 2013-04-10 19:12:23

这不是添加代码的问题。它将您的代码重构为不依赖于具有ID的元素，并将该项目的高度视为限制条件。我更新了小提琴的基本点在正确的方向：http://jsfiddle.net/7KcJb/3/ - 它适用于我，但有一点显示屏问题。没有什么你不能努力工作。 – 2013-04-10 19:39:38

非常感谢你:) – user2267175 2013-04-10 19:44:17

jQuery的固定格，底部边界

回答

相关问题