Question

我是新来的。查看Google新闻...在向上和向下滚动页面时注意左侧导航。

看看如何滚动一点但是在它消失之前粘在页面顶部？

有关如何完成的任何想法？ jQuery和CSS可以复制吗？如果是这样，任何提示？

Answer 1

这也是在YouTube上的某些页面上完成的，例如收藏页面。我建议你使用Firefox的firebug扩展程序来弄清楚它们是如何做的。我想他们正在使用CSS和Javascript的组合。也许就像在某个垂直位置将位置切换到fixed一样。

Answer 2

我快速实现了您在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>

谷歌新闻，左导航CSS诡计？或者jQuery Trick

2 个答案: