動態元素定位

我已經看到了這個事情幾個月和幾年，我真的想知道如何做到這一點。動態元素定位

例如，頁面中間有一個元素。它處於絕對的位置。當向下滾動並進入該元素時，它將變爲固定位置並跟隨滾動，當向上滾動並回到頁面中間時，它會再次變爲絕對值。

我可以給谷歌AdWords帳戶頁面爲例，在廣告系列頁面中，您的關鍵字的標題是相同的東西。

該怎麼做？

感謝

2010-06-14 Utku Dalmaz

像這樣的東西（在Chrome測試）將工作：

<html> 
<head> 
<title>Example</title> 
<style> 
     .banner {position: absolute; top: 40px; left: 50px; background-color:cyan} 
</style> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" /> 
    <script type="text/javascript" > 
$(function() { 
$(window).scroll(function() { 
    var top = $(window).scrollTop(); 
    if (top < 40) top= 40; 
    $('.banner').css({top: top}) 
    }) 
}) 
    </script> 
</head> 
<body> 
<div class="banner">This is the banner</div> 
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/><br/><br/> Cras rhoncus euismod sagittis.<br/><br/><br/> Fusce tincidunt consectetur ante eu commodo.<br/><br/><br/> Fusce lacinia consectetur nulla sit amet mattis.<br/><br/><br/> In viverra bibendum nibh vitae pharetra.<br/><br/><br/> Nam non eros semper ipsum facilisis fringilla.<br/><br/><br/> Phasellus sit amet purus interdum arcu hendrerit sagittis.<br/><br/><br/> Sed fermentum, orci non tincidunt pellentesque, tellus ipsum ultrices dui, at venenatis mi turpis non odio.<br/><br/><br/> Etiam elementum massa eu libero molestie nec pulvinar lacus suscipit.<br/><br/><br/> Etiam erat massa, mattis et sollicitudin eu, posuere commodo ligula.<br/><br/><br/> Vestibulum nec sem arcu.<br/><br/><br/> Vestibulum justo risus, feugiat at tristique a, sagittis vel dui.<br/><br/><br/> Sed enim erat, scelerisque sit amet accumsan scelerisque, vestibulum vitae dui.<br/><br/><br/> Integer et orci enim.<br/><br/><br/> Aliquam est mauris, consequat sed egestas vitae, scelerisque non sapien.<br/><br/><br/> Nam feugiat diam eu elit dignissim commodo.<br/><br/><br/> Curabitur eleifend lacus a leo vehicula rhoncus.<br/><br/><br/> Fusce luctus antequis urna sodales vestibulum.<br/><br/><br/> Aliquam tempus nisl vitae arcu bibendum sollicitudin.<br/><br/><br/> 
</body>

編輯：定位標題下的元素40像素，而使得如果用戶向下滾動

來源

2010-06-16 17:01:05 Iacopo

這正是我想要的，非常感謝你 – 2010-06-17 11:49:44

@Burjua：你的評論並不完全具有建設性。爲什麼解決方案不適合你？上次我檢查了一下，結果如下：也許你可以添加詳細信息，這樣我就可以修復答案以使其正常工作:-) – Iacopo 2013-03-05 13:59:34

-1

您可以通過應用CSS與任何元素做到這一點：但是

#keepmefixed{ 
    position:fixed; 
}

知道IE的支持，沒有這個，它似乎並沒有在Safari上下工夫iPad（從我的測試中）。您需要掛鉤一些JavaScript以使其在這些瀏覽器中正常工作。

來源

2010-06-14 11:52:43 scunliffe

，但我不希望它可見保持它始終固定，它應該是絕對的，那麼如果向下滾動到這個元素，它將變得固定，並且向上滾動時它將變爲絕對再次 – 2010-06-14 15:42:42

你的意思是它應該是「相對」，直到它跳出屏幕，然後切換到位置' fixed'？如果是這樣，只需要一個滾動事件處理程序來檢查滾動位置是否超過元素的頂部（假設垂直位置）......如果是，則更改爲「fixed」...然後反之，當返回「relative」時滾動小於（原始）元素位置。 – scunliffe 2010-06-14 16:55:07

你能告訴我一個代碼片段嗎？謝謝 – 2010-06-15 11:24:25

動態元素定位

回答

相關問題