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的固定格，底部邊界

回答

相關問題