如何在向下滚动页面时保持浮动顶栏？

问题描述：

大家好，我想在我的页面顶部有一个浮动的顶栏，并且即使向下滚动页面也可以看到它。我试图用下面的代码来达到这个目的，但由于某种原因，它不起作用！试图解决后，我注意到，$（文件）。就绪（函数（） 永远不会成为真正的，你们能不能帮我这里有什么问题如何在向下滚动页面时保持浮动顶栏？

浮顶栏：？

<div class="FlyingTopBar"> 
    <div class="GlobalNav">  
     <div class="Content"> 
     <span class="Line"></span> 

     <a class="Active" href="/" title="Home">Home</a> 
     <span class="Line"></span> 
     <a href="/link1.html" title="Link">Link</a> 
     <span class="Line"></span> 
     <a href="/link2.html" title="Link">Link</a> 
     <span class="Line"></span> 
     <a href="/link3.html" title="Link">Link</a> 
     <span class="Line"></span> 
     <a href="/link4.html" title="Link">Link</a> 
     <span class="Line"></span> 



     <a href="/link5.html" title="Link">Link</a> 
     <span class="Line"></span> 
     <a href="/link6.html" title="Link">Link</a> 
     <span class="Line"></span> 

     <a href="/link7.html" title="Link">Link</a> 
     <span class="Line"></span> 




     <a href="/link8.html" title="Link">Link</a> 
     <span class="Line"></span> 
     <a href="/link9.html" title="Link">Link</a> 
     <span class="Line"></span> 
     <a href="/link10.html" title="Link">Link</a> 
     <span class="Line"></span> 
     <div class="BottomFix"></div> 
     </div> 
    </div> 


    </div>

的javascript持有顶部的浮动tobar同时向下滚动：CSS的

<script type="text/javascript"> 
    /*<![CDATA[*/ 


    alert('start'); 

     var $flying_bar = $('div.FlyingTopBar'); 
     var amount_scrolled; 
     var initial_top_position =0; 
     var actual_top_position; 

     $(document).ready(function() { 
     updateCurrentPosition(); 
     alert('visable topbar1'); 
     $flying_bar.css('visibility','visible'); 
     alert('visable topbar2'); 

     $(window).bind('scroll', updateCurrentPosition); 
     }) 

     function updateCurrentPosition() { 
     amount_scrolled = $window.scrollTop(); 
     if (amount_scrolled < 0) amount_scrolled = 0; //not tested iPad reversed scroll fix 
     if (amount_scrolled < initial_top_position) { 
      actual_top_position = initial_top_position - amount_scrolled; 
      $flying_bar.css({'top':actual_top_position + 'px'}); 
     } else { 
      $flying_bar.css({'top':'0px'}); 
     } 
     } 



    headerTickerInit('div.ReportTitleTicker'); 

    if($('#ScrollPollSection').length > 0) { 
     $('#SideNavPolls').show(0); 
    } 
    /*]]>*/ 
    </script>

部分：

.FlyingTopBar {z-index:20; position:fixed; top:120px; left:0px; width:100%; visibility:hidden;} /* <- top updated by JS */

答

一下添加到FlyingTopBar类，我们实在没有必要在这种情况下使用JavaScript的： -

. FlyingTopBar { position : fixed; top: 0px; width:100%; z-index:20; }

想了解更多关于固定的定位，经过：http://www.w3schools.com/cssref/pr_class_position.asp

我希望这有助于。 :-) 干杯！

许多谢谢你们。我不知道它可以在没有javascript的情况下完成:-) – user1788736 2013-03-25 06:18:36

答

position:fixed;

会做这项工作。我不明白为什么你必须添加一个脚本来做到这一点。

答

是的，没有需要的JavaScript，检查this fiddle或这里的CSS

#fixed-nav { 
position: fixed; 
background: black; 
margin: 0; 
padding: 20px; 
width: 100%; 
top: 0; 
left: 0; 
}

如何在向下滚动页面时保持浮动顶栏？

相关推荐