菜單欄，這是不是頂部，但一旦你在菜單欄枝滑下頂端

Question

我需要像一個菜單欄在 http://showbic.com/sports/adam-milne-vs-west-indies/

在這個網站上的MENU_BAR不上頂部，但當您向下滾動菜單欄不會與其餘內容一起上，但觸摸頂部後，它會保持頂部。

我知道一些JavaScript與CSS結合使用，但我怎麼不知道，請別人幫我。

非常感謝您。

Answer 1

查看源代碼時，您可以查看控制此欄的javascript部分。 http://showbic.com/wp-content/plugins/seo-alrp/js/slidebox.js?ver=3.8。 相反的：

$('#alrp-slidebox').animate({'right':'0px'},300); 

地說：

$('#yourContent').animate({'top':'0px'},300); 

而對於（我們假設框的高度是300像素）：

$('#alrp-slidebox').stop(true).animate({'right':'-430px'},100); 

地說：

$('#yourContent').stop(true).animate({'top':'-300px'},100); 

Answer 2

我會建議嘗試索姆在Javascript中使用onscroll，然後將標題保留在頂部，則可以在容器的CSS中使用position:fixed;。 （您可能要玩的頂部放置或別的東西，以保持它在最高層，並在您的首選時當場頂部不需要）

見例如：

<script type="text/javascript"> 
var fixed = false; 

onscroll = function() 
{ 
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
    if (scrollTop > 200) 
    { 
     if (!fixed) 
     { 
      $('.navbar-wrapper').css({ position: 'fixed', top : 0 }); 
      fixed = true; 
      } 
    } 
    else 
    { 
     if (fixed) 
     { 
      $('.navbar-wrapper').css({ position: 'relative', top : 200 }); 
       fixed = false; 
     } 
    } 
} 
</script> 

Answer 3

這可以是你css

body{ 
    height:1000px; 
} 

div{ 
width:200px; 
    height:100px; 
    background:red; 
    position:relative; 
    top:200px; 
} 

.fixedClass{ 
position:fixed; 
top:0; 
} 

的jquery代碼

$(window).scroll(function(){ 
if($(window).scrollTop() > 200){ // position of menu from the top 
$('div').addClass('fixedClass'); 
} 
else{ 
$('div').removeClass('fixedClass'); 
} 
}) 

的Html：P

<div> 
</div> 

工作fiddle