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技巧

回答

相关问题