Google新聞，左導航CSS技巧？或jQuery技巧

我是新來的。查看Google新聞...在頁面上下滾動時注意左側導航欄。Google新聞，左導航CSS技巧？或jQuery技巧

看看如何滾動一下，但在頁面消失之前粘在頁面的頂部？

有關如何完成的任何想法？ jQuery和CSS可以複製它嗎？如果是這樣，任何提示？

2010-10-19 user479959

谷歌新聞DOES工作在IE瀏覽器。而且你的快速實施是很好的，只要你不添加DOCTYPE到你的文件。然後完全停止工作。 – 2011-02-15 17:26:21

這也是在YouTube上的某些頁面上完成的，如收藏夾頁面。我建議你使用諸如Firefox的firebug擴展之類的東西來弄清楚他們是如何做的。我想他們正在使用CSS和Javascript的組合。也許是類似的，當處於某個垂直位置時，將位置切換到fixed。

來源

2010-10-19 02:13:50

我有一個快速實現您正在談論的工作在FF和Chrome中的功能。但無法使其工作的IE瀏覽器，我注意到在谷歌新聞不起作用

<HTML> 
<HEAD> 
    <SCRIPT LANGUAGE="JavaScript"> 
    <!-- 
     function fixLeftNav() 
     { 
      if(document.body.scrollTop > document.getElementById('header').offsetHeight) 
      { 
       document.getElementById('leftNav').style.position = 'fixed'; 
       document.getElementById('leftNav').style.top = 0; 
      } 
      else 
       document.getElementById('leftNav').style.position = 'static'; 
     } 
    //--> 
    </SCRIPT> 
</HEAD> 

<BODY id='a' onscroll="fixLeftNav()"> 
<div id='header' style="width:800px; border: solid 1px green; height: 100px"> 
header 
</div> 
    <div id='leftNav' style="float: left; width: 200px; border: solid 1px green; height: 500px;"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    </div> 
    <div style="width:600px; border: solid 1px green; height: 1000px; margin-left: 200px"> 
    The moderators’ questions were frequently ignored. The candidates barely looked at one another. One wore black gloves and spoke of himself repeatedly in the third person. And Andrew M. Cuomo, the Democratic candidate and the race’s front-runner, at times struggled to suppress laughter... 
    </div> 
</BODY> 
</HTML>

來源

2010-10-19 03:37:59

Google新聞，左導航CSS技巧？或jQuery技巧

回答

相關問題